tsconfig/jsconfig `paths` option does not apply alias

2
open
DimitrK
DimitrK
Posted 7 months ago

tsconfig/jsconfig `paths` option does not apply alias #212

Bug description

Overview

I am trying to use esbuild-loader within a monorepo using yarn workspace and I am unable to declare folder aliases on each individual workspace. I use @ as root alias for source files per workspace

The monorepo structure is as follows

root
  |-apps
  |___|-app1
      |___src/

What is the problem

Running either yarn worspace app1 start or cd apps/app1 && yarn start fails to compile.

Every import statement inside workspace's source code which uses the alias (e.g. import Module from "@/path/to/file") would be expected to resolve properly to the corresponding file within that workspace. Instead the following error is being returned: Error: Can't resolve '@/path/to/file' in <source file path>

What I tried

1. Setting a jsconfig.json per workspace

The root/apps/app1/jsconfig.json file contained the following:

{
  "compilerOptions": {
      "baseUrl": ".",
      "paths": {
          "@/*": ["./src/*"] // tried also "@/*": ["src/*"]
      }
  }
}

2. Setting a tsconfig.json per workspace

Similar to the attempt above, simply added "allowJs": true inside compiler options

3. Passing it directly to loader options.tsconfigRaw inside webpack

also using latest updated esbuild (0.13.4)

The loader found in root/apps/app1/webpack.config.js contains the following:

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'esbuild-loader',
  options: {
    target: 'es2015', 
    loader: 'jsx',
    tsconfigRaw: {
      "compilerOptions": {
          "baseUrl": "./src",
          "paths": {
              "@/*": ["./*"]
          },
          "allowJs": true
      }
    },
    implementation: require('esbuild')
  }
},

Reproduction

Creating a monorepo and use alias through jsconfig. I haven't try this into a simple repo but I expect same results

Node.js package manager

yarn

Environment

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Memory: 1.51 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman

Can you contribute a fix?

  • I’m interested in opening a pull request for this issue.
privatenumber
privatenumber
Created 7 months ago

This is currently expected behavior. Although esbuild bundling supports compilerOptions.paths, esbuild-loader does not add support for it because it's primarily a loader (aka code transformer) rather than a plugin that enhances Wepback module resolution.

To add support, I would have to develop a plugin to import aliases from tsconfig to Webpack's module resolver, which doesn't really fit into the scope of this package.

Looking at how ts-loader handles it, seems like they recommend the tsconfig-paths-webpack-plugin.

Let me know if this works for you and I can recommend it in the README as well.

mgmarlow
mgmarlow
Created 7 months ago

As another data point I ran into this when configuring a project for storybook and tsconfig-paths-webpack-plugin worked like a charm 👍