Solvedts 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.

16 Answers

✔️Accepted Answer

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.

More Issues: