About nodejs path in webpack, how webpack find modules in typescript?

Question

I use webpack-dev-server to resolve some typescripts.

My configuration file:

module.exports={
entry: "./src/index.ts",
output: {
    filename: "main.js"
},
resolve:{
    extensions: ['.ts', '.tsx', 'js'],
    modules: [path.resolve(__dirname, 'src'), "node_modules"]
}
...
}

Then output of commandline:

> cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js
i ｢wds｣: Project is running at http://localhost:8089/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./dist
× ｢wdm｣:
ERROR in (webpack)-dev-server/client?http://localhost:8089
Module not found: Error: Can't resolve './overlay' in 'F:\workspace\tslearn\node_modules\webpack-dev-server\client'
@ (webpack)-dev-server/client?http://localhost:8089 10:14-34
@ multi (webpack)-dev-server/client?http://localhost:8089 ./src/index.ts

the index.js in webpack-dev-server\client.js is:

var stripAnsi = require('strip-ansi');

var socket = require('./socket');

var overlay = require('./overlay');

var _require = require('./utils/log'),

The./overlay.js is under the path "F:\workspace\tslearn\node_modules\webpack-dev-server\client"

But the js still can not find it.

the vscode give me indication is:

Could not find a declaration file for module './socket'. 'f:/workspace/tslearn/node_modules/webpack-dev-server/client/socket.js' implicitly has an 'any' type.

How to fix it? what is different between Typescript and JavaScript on this?

Answer 1

Background
Webpack itself doesn't deal with Typescript, it uses a helper such as ts-loader or other depending on the webpack configuration file webpack.config.js . Example of configuration:

      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: true,
                happyPackMode: true,
                configFile: path.resolve(__dirname, 'tsconfig.json'),
              },
            }
          ],
        },
        ...
        other rules
        ...
      ]

ts-loader will transpile Typescript using configuration settings in tsconfig.json .

How to fix it? what is different between Typescript and JavaScript on this?

tsconfig.json should have "allowJs": true otherwise Typescript compiler won't consider.js files while resolving imports. Also Typescript compiler should be able to find overlay.js and other.js files. It will search in a few places documented here under How TypeScript resolves modules heading.

Finally, in order to get rid of declaration related errors, write declaration files, for example overlay.d.ts and place it next to the corresponding.js files.