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

[gcharnock]

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.

[johnnyreilly]

Off the top of my head I can't think of a reason that that would happen. Very strange as we should be respecting the tsc resolution: https://github.com/TypeStrong/ts-loader/blob/master/src/servicesHost.ts#L60

The only thing that occurs to me is that that example uses externals to supply react.... But that shouldn't really make a difference I think.

[gcharnock]

Yeah, the React was working fine. Some thoughts:

Is the error coming from some other part of webpack
Typescript normally produces a numbered error message such as "TS2307: Cannot find module foo" but these errors are formatted differently. I don't have enough of a mental model of webpack to have much intuition about this. Do I need another plugin to use node_modules properly for example?

"module" field in Redux.js
This is possibly a red herring but something usual I noticed is the errors say "ERROR in ./~/redux/es/index.js", which is really odd because the "main" field in Redux's package.json points to "lib/index.js" not "es/index.js". After some digging I've noticed that Redux has a "module": "es/index.js" in its package.json, which is not a standard field. Changing this to "es_invalid" or removing the field produces errors that look like this:

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

Which is closer to what I'd expect. It's still basically the same error, so I'm not sure if I'm completely off track.

[gcharnock]

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.

[johnnyreilly]

Please do - if you submit a PR I'll merge. Thanks for the info!

[sunny-mittal]

The extensions solution didn't solve the problem for me. Interestingly, the project compiles just fine, despite ts-loader telling me module redux can't be found. The error goes away if I set the transpileOnly: true option. Anyone have any ideas?

[johnnyreilly]

Do you have a sample repo that demo's the issue?

[sunny-mittal]

@johnnyreilly Here's a very simple repo that repros the issue: https://github.com/sunny-mittal/setup-helper. The error I get when running yarn build or npm run build is:

ERROR in ./src/index.ts
(1,29): error TS2307: Cannot find module 'redux'.
error Command failed with exit code 2.

but I can see a successfully-built file in my dist directory. I'm likely missing something or doing something stupid, but I just tried starting with typescript yesterday. Any help would be much appreciated!

[sunny-mittal]

And actually, when I change my source code to:

import { createStore } from 'redux'
createStore()

and then run yarn build, I get the above error but no TS errors; but when I run tsc src/index.ts, I get the error I expect: src/index.ts(3,1): error TS2554: Expected 1-3 arguments, but got 0.

[johnnyreilly]

Install the npm package @types/redux as a devDependency

[jt000]

@johnnyreilly - This doesn't solve the problem for moment, which only has a stub @types/moment. The moment.d.ts file is located in node_modules/moment folder. Oddly enough, if I switch the "target": "ES2016" to "ES5", then the module is loaded just fine. Or, if I set "transpileOnly: true", then it the module loads just fine as well.

[johnnyreilly]

Doesn't moment ship with typings in the package? No need for @types/moment

[HeratPatel1]

@johnnyreilly - @types/redux is deprecated.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing as stale. Please reopen if you'd like to work on this further.

[xXACCEXx]

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.