.d.ts file cannot be resolved in at-loader

[nihiluis]

For some reason models.d.ts can't be resolved. The editor (VSCODE) resolves it fine though.

Module not found: Error: Can't resolve './typings/models' in '/mnt/windows/code/work/frontend/ui'
 @ ../ui/index.ts 23:15-42
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server react-hot-loader/patch ./src

The export code

/**
 * @module Provides useful nx components
 */

/// <reference path="./typings/index.d.ts" />
/// <reference path="./typings/models.d.ts" />

export * from './src/components/column'
export * from './src/components/misc'
export * from './src/components/nav'
export * from './src/components/row'

export { SelectMenuItem } from './typings'
export { SimpleRange } from './typings/models'
export * from './src/modules/jsxutil'

The models.d.ts

/**
 * @module Provides useful nx components
 */

/// <reference path="./typings/index.d.ts" />
/// <reference path="./typings/models.d.ts" />

import newsReducer from './src/redux/reducers/news'
import * as coinsReducer from './src/redux/reducers/coins'
import newsSaga from './src/redux/sagas/news'
import coinsSaga from './src/redux/sagas/coins'

export * from './src/components/column'
export * from './src/components/misc'
export * from './src/components/nav'
export * from './src/components/row'
export * from './src/components/finance'

export { SelectMenuItem } from './typings'
export { SimpleRange } from './typings/models'
export * from './src/modules/jsxutil'

const reducers: UIReducers = {
  news: newsReducer,
  coinStatus: coinsReducer.coinStatus
}

const sagas: UISagas = {
  news: newsSaga,
  coins: coinsSaga
}

export {
  reducers,
  sagas
}

export interface UIReducers {
  news: any
  coinStatus: any
}

export interface UISagas {
  news: any
  coins: any
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": false,
    "target": "es5",
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": false,
    "noImplicitReturns": true,
    //"noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitUseStrict": true,
    "allowUnreachableCode": true,
    "pretty": true,
    "strictNullChecks": true,
    //"outDir": "build",
    "lib": [
      "es2015",
      "dom"
    ],
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/@types/*", "*"]
    }
    //"types": ["node"],
  },
  "include": [
    "src/*",
    "src/**/*",
    "typings/*",
    "typings/**/*",
    "webpack/**/*",
    "webpack.config.ts"
  ],
  "exclude": [
    "dist",
    "build",
    "node_modules"
  ]
}

[mweststrate]

+1, we've run into same (or similar) problem. Switching to ts-loader solved it in our case

[bronson]

I'm having this problem too. It's frustrating.

I get the same error: ERROR in ./src/filter.ts. Module not found: Error: Can't resolve './png' in '/Users/bronson/testproj/src'

Thrown on the first line in filter.ts:

import './png'
import * as logo from './icon-blue.png'

Here is png.d.ts, seems normal enough:

declare module '*.png' {
  const value: any
  export = value
}

Using reference tags works just fine, for now:

///<reference path="png.d.ts"/>
import * as logo from './icon-blue.png'

And, when I call typescript directly, it also loads png.d.ts just fine:

tsc --module es6 --target es6 --moduleResolution node --allowSyntheticDefaultImports --noImplicitReturns --strict --outDir /tmp --traceResolution src/filter.ts

======== Resolving module './png' from '/Users/bronson/testproj/src/filter.ts'. ========
Explicitly specified module resolution kind: 'NodeJs'.
Loading module as file / folder, candidate module location '/Users/bronson/testproj/src/png', target file type 'TypeScript'.
File '/Users/bronson/testproj/src/png.ts' does not exist.
File '/Users/bronson/testproj/src/png.tsx' does not exist.
File '/Users/bronson/testproj/src/png.d.ts' exist - use it as a name resolution result.
======== Module name './png' was successfully resolved to '/Users/bronson/testproj/src/png.d.ts'. ========

It's only when I'm using the loader that it fails.

Is there any way to fix this? Or investigate further?

[saurabhpati]

I have run into the same error while setting up a project.

here is my code upto until I faced this error:

webpack.config.js:

const path = require('path');

module.exports = { entry: { app: ['./src/app/App.tsx'], vendor: ['react', 'react-dom'] }, output: { path: path.resolve(__dirname, 'dist', 'js'), filename: '[name].bundle.js' }, devtool: 'source-map', resolve: { extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'] }, module: { rules: [ { test: /.(ts|tsx)$/, loader: 'awesome-typescript-loader' }, { enforce: "pre", test: /.js$/, loader: "source-map-loader" } ] }, plugins: [] }

tsconfig.js: { "compilerOptions": { "allowSyntheticDefaultImports": true, "jsx": "react", "module": "commonjs", "noImplicitAny": true, "outDir": "./build/", "preserveConstEnums": true, "removeComments": true, "sourceMap": true, "target": "es5" }, "include": [ "./src///*" ] }

package.json:

{ "name": "webpack-react", "version": "1.0.0", "description": "", "main": "", "scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "./node_modules/.bin/webpack" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.16.3", "react": "^16.3.2", "react-dom": "^16.3.2" }, "devDependencies": { "@types/react": "^16.3.14", "@types/react-dom": "^16.0.5", "awesome-typescript-loader": "^5.0.0", "source-map-loader": "^0.2.3", "ts-loader": "^4.3.0", "typescript": "^2.8.3", "webpack": "^4.8.3", "webpack-cli": "^2.1.3" } }

Error in console: ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6208:55 TS2304: Cannot find name 'Map'.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6215:55 TS2304: Cannot find name 'Set'.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6219:64 TS2304: Cannot find name 'Symbol'.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6225:59 TS2304: Cannot find name 'WeakMap'.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6226:59 TS2304: Cannot find name 'WeakSet'.

Note: The above error is resolved on switching to ts-loader

[millerdrew]

Same issue as @saurabhpati when trying yarn start on this project: https://github.com/UltimateAngular/redux-store

Note: The above error is resolved by updating which version of Webpack the project is using as well as switching to ts-loader