can not resolve to correct path when used with webpack5

[wayne-liberty]

here is a minimum repo to show this bug: https://github.com/gespiton/tsconfigplugin-issue-with-webpack-5

The test file in packages/fullscreen couldn't be correctly resolved. If we check the output bundle js file we will see

/***/ "../packages/fullscreen/src/entry.ts":
/*!*******************************************!*
  !*** ../packages/fullscreen/src/entry.ts ***!
  \*******************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", ({ value: true }));
console.log('packages/fullscreen/src/entry.ts loaded');
__export(__webpack_require__(/*! ./test */ "./src/test.ts"));

noted that on the last line, the file path is ./src/test.ts, which resolves to the file application/src/test.ts. While the correct resolve path should be like ../packages/fullscreen/src/test.ts (in webpack 4).

I suppose this has something to do with how webpack5 distinguishes files. But I don't have the knowledge to solve this bug. Wish someone could look into it. For now, I'm planning to use webpack resolve.alias instead of this plugin.

[elsasslegend]

same problem, fallbacked to resolve.alias :(

[jakebailey]

I too have switched to resolve aliases to work around this; I had this this previously and assumed it was my fault, but there's something going on in the plugin. It's not too much code to read paths and produce aliases, and the output is the same (but it actually works in cases where the file names conflict between paths).

[jgchenu]

Any progress please ?

[taylor-lindores-reeves]

Any progress?

[mococa]

Any progress?

[nyngwang]

Any brogress?

[17Sergey]

Guys, if you get an error with ESLint not seeing the paths or just any other error in this crazy configuration world,here is what helped me:

1. Start with this article: https://kasongoyo.medium.com/using-alias-with-react-webpack-and-typescript-72119dbc498

It shows how to add paths in tsconfig.json

2. That article also shows how to make webpack see the aliases with "tsconfig-paths-webpack-plugin" (it will help you to write aliases only in tsconfig, everything for webpack the plugin will do for you)

3. On this step your webpack project should be running correctly, but you get ESLint errors in your code.

Here is how to solve them: https://github.com/import-js/eslint-import-resolver-typescript?tab=readme-ov-file]

Walk through this guide, installation and config .eslintrc file

4. This is it. It helped me and after hours of trying it works. I hope you fix your errors soon and will get down to coding.

Also, if you struggle and can't fix this, I'll leave my repo with pretty serious configuration:

(Webpack + React + TypeScript + ESLint + Prettier + Husky + Babel)

https://github.com/17Sergey/react-ts-webpack

[17Sergey]

Guys, if you get an error with ESLint not seeing the paths or just any other error in this crazy configuration world,here is what helped me:

1. Start with this article: https://kasongoyo.medium.com/using-alias-with-react-webpack-and-typescript-72119dbc498

It shows how to add paths in tsconfig.json

2. That article also shows how to make webpack see the aliases with "tsconfig-paths-webpack-plugin" (it will help you to write aliases only in tsconfig, everything for webpack the plugin will do for you)

3. On this step your webpack project should be running correctly, but you get ESLint errors in your code.

Here is how to solve them: https://github.com/import-js/eslint-import-resolver-typescript?tab=readme-ov-file]

Walk through this guide, installation and config .eslintrc file

4. This is it. It helped me and after hours of trying it works. I hope you fix your errors soon and will get down to coding.

Also, if you struggle and can't fix this, I'll leave my repo with pretty serious configuration:

(Webpack + React + TypeScript + ESLint + Prettier + Husky + Babel)

https://github.com/17Sergey/react-ts-webpack