ts-loader: Can't resolve modules from `node_modules` with ts-loader; works with plain `tsc`

I’m getting lots of errors from webpack that look like the following when using ts-loader with a third party library installed in node_modules in the usual way.

Version: webpack 2.6.1
Time: 1143ms
   Asset   Size  Chunks             Chunk Names
index.js  11 kB       0  [emitted]  main
   [0] ./~/redux/es/index.js 1.08 kB {0} [built]
   [3] ./~/process/browser.js 5.42 kB {0} [built]
   [4] ./src/index.tsx 300 bytes {0} [built]
    + 2 hidden modules

ERROR in ./~/redux/es/index.js
Module not found: Error: Can't resolve './createStore' in '/home/gareth/dev/ts-loader/examples/react-cdn-simple/node_modules/redux/es'
 @ ./~/redux/es/index.js 1:0-40
 @ ./src/index.tsx

ERROR in ./~/redux/es/index.js
Module not found: Error: Can't resolve './combineReducers' in '/home/gareth/dev/ts-loader/examples/react-cdn-simple/node_modules/redux/es'
 @ ./~/redux/es/index.js 2:0-48
 @ ./src/index.tsx

I’ve been able to reproduce this using the react-cdn-simple example. Taking redux as an example:

npm install --save redux

Looking in redux in node_modules, it has a typings field in its package.json so I don’t think I need a separate @typings package. I then changed index.tsx to use redux in a trivial way:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {createStore} from "redux";

createStore((s: number, a: any) => s+1);

ReactDOM.render(
    <h1> Hello World! </h1>,
    document.getElementById('wrapper')
);

My IDE says this is well typed and tsc src/index.tsx --jsx react run from the command line builds this without issues. However, running npm build produces the above errors.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (5 by maintainers)

Most upvoted comments

I solved it. In webpack.config.js you need to explicitly add the extension “.js” to resolve.extensions (documentation here). The default value is [".js", ".json"] but I guess those values are not appended to the array of custom extensions.

    resolve: {
        extensions: [ '.ts', '.tsx', ".js", ".json"]
    },

Can I suggest updating the example to include them? Anyone trying to use that example as the basis for a project is going to hit this the moment they use a library from npm.

+36

gcharnock on May 26, 2017

Noticed I was getting the same behaviour when using the lit-html package in my project.

I resolved the errors by declaring "allowJs": true in my tsconfig.json file.

My tsconfig

{
	"compilerOptions": {
		"outDir": "./public/",
		"noImplicitAny": false,
		"module": "es6",
		"target": "es5",
		"lib": [
			"dom",
			"ESNext"
		],
	}
}

My index.ts

export { html, TemplateResult } from 'lit-html';

My error

ERROR in ./src/index.ts
[tsl] ERROR in ./src/index.ts(1,38)
      TS2307: Cannot find module 'lit-html' or its corresponding type declarations.

Seems that webpack still loads the assets, but when ts-loader parses the file with js package then it will report the error… even through webpack has got our back.

xXACCEXx on Aug 10, 2020

Install the npm package @types/redux as a devDependency

johnnyreilly on Oct 8, 2017