webpack5 resolve file error in monorepo

[await-ovo]

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.

1. git clone https://github.com/diem98/test-monorepo.git
2. cd test-monorepo && yarn
3. cd apps/web-app
4. 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

[await-ovo]

cc @alexander-akait

[alexander-akait]

I will look at this in near future

[await-ovo]

#60

[elsasslegend]

Having exactly the same issue. Can you provide a fix please ?

[Hartoeft]

Any news on this issue?

[KevinGruber]

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

[cosmin-dev]

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

[buwilliams]

+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'), } }

[nyngwang]

@await-ovo Did you still use this plugin afterward?