tsconfig-paths-webpack-plugin icon indicating copy to clipboard operation
tsconfig-paths-webpack-plugin copied to clipboard

Can't resolve modules issue

Open jameshulse opened this issue 6 years ago • 1 comments

I'm getting a "Can't resolve module" issue for packages in my project which I'm referencing via paths if I haven't installed node_modules for it yet.

Do I have to run an install in all projects before building or can webpack resolve the referenced project modules if I install them in the main project.

My solution looks like this:

/project-a
    /node_modules
    /src
    package.json
    webpack.config.js
/common <- node_modules not installed, but can they not be looked up in project-a?
    /src
    package.json
tsconfig.json

My root tsconfig contains paths: { "@common": "common/src" }.

jameshulse avatar Sep 20 '19 21:09 jameshulse

Even when you run npm install in the linked project you can get in strange errors because the dependency is using his own node_modules.
I.e.: When project_a using a node_modules which writes something a property and you are using the same node_module in your main project the written property is only accessable in project_a. Happens to me when using a frontend framework where project_a wants to register a component, the main project can't access it.

After some research i found the solution on StackOverflow. The problem is nodes module resolution. The solution is simple, use only the modules from your project where you are dependening on the other project.

In webpack config add the modules line:

...
resolve: {
  plugins: [new TsconfigPathsPlugin()],
  modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
},
...

Keep in mind you have to include all depdencies from the referenced project in your main project yourself. This also includes the version.

Edit: Add Solution

FleMo93 avatar Jan 27 '20 06:01 FleMo93