Module fails to resolve relative path @3.5.2

[vortrefflich]

Hello team,

I have been used your module @3.5.1.

Recently, I noticed there were errors while resolving relative paths in webpack for recently updated modules.

I tested other modules but only with your latest module (3.5.2), the errors were occurred.

Environment=================
ts-loader: ^9.2.3
typescript: ^4.3.2
webpack: ^5.64.2

Result=====================

1. With tsconfig-paths-webpack-plugin@3.5.2: FAIL
2. With tsconfig-paths-webpack-plugin@3.5.1: SUCCESS
   =========================

Error=======================
Module not found: Error: Can't resolve './RELATIVE_DIR/index.ts' in 'ABSOLUTE_MY_REPO_PATH'

...Field 'browser' doesn't contain a valid alias configuration ...

============================

I hove this report help you and other developers.

[jonaskello]

I think this is related to the change made in #85.

@voliva @Rush Do you have an idea why this seems to be happening now after #85 has been merged in 3.5.2?

[voliva]

I'm not sure, I've been using it in my project with dozens of direct dependencies (and ~hundreds of indirect) and it worked fine. Also confirmed from other devs.

@vortrefflich can you provide more info please? Is there an external dependency that's related to this? Can you please provide a sandbox/repo that reproduces this issue?

[Rush]

I also have a fairly complex Frontend and Backend webpack build and it's the #85 in version 3.5.2 which makes it compile.

Once we know more details I can comment more.

[menosprezzi]

Same here but even with tsconfig-paths-webpack-plugin@3.5.1 it doesnt work!

And it was working days ago :( I dont know which package I've update

ts-loader: 9.2.6
typescript: 4.5.4
webpack: 5.66.0

tsconfig.json

 {
    "compilerOptions": {
        "outDir": "dist",
        "baseUrl": ".",
        "target": "es2020",
        "lib": ["es2020"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "module": "commonjs",
        "allowSyntheticDefaultImports": false,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "types": ["node"],
        "paths": {
            "@mocks/*": ["../../__mocks__/*"],
            "@app/*": ["./src/*"]
        },
        "incremental": true
    },
    "exclude": ["../../node_modules"],
    "include": ["src"]
}

webpack.config.js

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin')

const tsConfigFile = path.join(__dirname, './tsconfig.json')

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
    mode: isProd ? 'production' : 'development',
    devtool: isProd ? false : 'eval-source-map',
    target: 'node',
    externals: [nodeExternals({
        additionalModuleDirs: ['../../node_modules'],
    })],
    externalsPresets: {
        node: true
    },
    entry: './src/index.js',
    output: {
        path: path.join(process.cwd(), 'dist'),
        filename: 'index.js',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$|\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: !isProd,
                        configFile: tsConfigFile
                    }
                }
            },
            {
                test: /\.tsx?$|\.jsx?$/,
                use: {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: !isProd,
                        configFile: tsConfigFile
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js'],
        plugins: [
            new TsconfigPathsPlugin({
                configFile: tsConfigFile,
            }),
        ],
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin({
            typescript: {
                configFile: tsConfigFile,
            },
        }),
    ]
}

I'm using it in a yarn workspaces project

[vortrefflich]

@voliva Sorry, now I noticed you requested more detail before.

My code is nothing special. I just followed example codes which are from googling.

Now I use your module with 'path' module to convert relative path to absolute path. with combination of '__dirname',
and it works for me.

I just guess this problem is derived from different paths among webpack config file, index.ts (base ts) file, and package.json.
Refer below example structure

---

src
-index.ts
-tsconfig.json
-webpack.config.js
package.json

Thanks.

[talha5389]

I also encountered this problem. In my scenario, if I import a file with absolute import which internally imports another file with relative import, it doesn't work. It is not giving me any build error but I have enum defined in file relatively imported and that enum becomes undefined.

Here is my directory structure.

• tsconfig.json (just inherits tsconfig.common.js)
• webpack
  • config.js webpack v5 with ts-loader
  • tsconfig.common.js
• src
  • webpack-main-entry.ts imports services/service1/init
• services
  • service1
    • init.ts (imports './utils/types.ts')
    • utils
      • types.ts defines an enum

It seem to have been fixed by downgrading to 3.5.1

[elisechant]

You can work around this by using absolute path:

const path = require('path')
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'

new TsconfigPathsPlugin({ configFile: path.join(__dirname, '../../../app/tsconfig.json') }),