tsconfig-paths-webpack-plugin
tsconfig-paths-webpack-plugin copied to clipboard
dividab
webpack5 resolve file error in monorepo
Bug report
What is the current behavior?
I use webpack 5 with this plugin in a simple yarn workspaces monorepo, Which contain a simple add and a common util library. But there is an error reported:
If the current behavior is a bug, please provide the steps to reproduce. This is a repo to reproduce: test-monorepo.
-
git clone https://github.com/diem98/test-monorepo.git -
cd test-monorepo && yarn -
cd apps/web-app -
yarn dev
After that, you can see the error in the figure above.
apps/web-app/src/App.tsx content as below:
import React, {useState} from 'react';
import {addOne} from 'common-tools';
import { add } from './utils';
console.log(`add(1,2) : ${add(1,2)}`)
const App = () => {
const [num, setNum] = useState(0);
const handleClick = () => {
setNum(prev => addOne(prev));
}
return (
<div>
<h1>current number: {num}</h1>
<button type="button" onClick={handleClick}>addOne</button>
</div>
)
}
export default App;
You can see that import addOne from common-tools package and import add function from it's own utils directory.
packages/common-tools export detail as below:
But inside the dist, it is like this:
You will find that import ./utils in common-tools/src/add.ts compiled to ./src/utils/index.js, This leads to the error described above.
What is the expected behavior?
It should compile successfully as it did in webpack 4.
branch webpack-4 will compile successfully with the same code.
I tried to dive into the plugin source code， The getInnerRequest return value was found to be different
In webpack 4 ./utils just returns as expected: ./src/utils. But In webpack 5, ./utils returns src/utils.
So in webpack 5 it will execute the following matchPath function. then ./utils request in common-tools/src/add.ts resolved to apps/web-app/src/utils/index.js.
I found that the different results are related to the different versions of the enhanced-resolve implementation. But I don't know if it was done intentionally.
https://codesandbox.io/s/focused-rain-4hoyq?file=/src/index.js
Thank you very much for your help, and please forgive my broken English.
Other relevant information: webpack version: 5.32 Node.js version: 14.15.4 Operating System: macos
We have the same problem in our project. It resolves all ../package.json modules to root package.json file of the project
That makes it impossible to use webpack 5
Hello any news on this ? I have the same issue.
We have packageA a that have a file default-theme.ts in the folder theme.
We have a service that usage packageA but it also have a default-theme.ts in the same folder theme.
It seams that default-theme from the service override the default-theme.ts from the packageA
I've been also built a code sandbox where it can be tested
-
working version with webpack 4 https://replit.com/@CosminIonascu/webpack-4?v=1
-
not working version with webpack 5 https://replit.com/@CosminIonascu/weback-5
They both have the same files, the only think is different is the webpack version.
I've created a dummy package for test purpose with this folder structure:
Notice that in the webpack 5 version test variable get replaced
+1 bump. Having the same issue. I decided to not use this plugin since there didn't seem to be a nice workaround. I ended up just using webpack alias so that I could move my work forward.
resolve: { extensions: ['.tsx', '.ts', '.js'], alias: { shared: path.resolve(__dirname, '../shared/dist'), } }
