Next.js: Support baseUrl in tsconfig

[chiller-whale]

When using the baseUrl property intsconfig.json, Next 9 fails to build with the following error:
Module not found: Can't resolve ...

This is resolved by updating the import path to be absolute.

When running tsc on the same directory, the relative import works.

Expected behavior

The baseUrl in tsconfig.json is used when running next build

To Reproduce

Update tsconfig to use baseUrl compiler option:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "."
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Assuming a directory structure of:

  |--> Layout.tsx
pages
  |--> index.tsx

Import file using relative path:

  // pages/index.js
  import Layout from 'components/layout'

  export default (props) => <Layout>Welcome!</Layout>

package.json

"dependencies": {
    "next": "^9.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
  },
"devDependencies": {
   "typescript": "^3.5.3"
}

[PabloSzx]

I needed this feature so i did a workaround using tsconfig-paths-webpack-plugin

My next.config.js ended up like this

EDIT: I just made a template repository using it https://github.com/PabloSzx/Next-TypeScript-Paths

[Timer]

Duplicate of https://github.com/zeit/next.js/issues/7779

[EricVanDerDijs]

@PabloSzx Thanks a lot for that comment, I have been looking for solutions for this for a long while now.

[sakulstra]

@PabloSzx does this actually work for you?

I tried adding as next.config.js

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: (config, options) => {
    if (config.resolve.plugins) {
      config.resolve.plugins(new TsconfigPathsPlugin());
    } else {
      config.resolve.plugins = [new TsconfigPathsPlugin()];
    }

    return config;
  },
  target: "serverless"
};

and

    "baseUrl": "."

inside the tsconfig, but root imports still don't seem to be working (may be due to me mixing js and tsx files).

[PabloSzx]

@sakulstra i just made a Next 9 template repository which uses TypeScript and tsconfig-paths-webpack-plugin https://github.com/PabloSzx/Next-TypeScript-Paths

[HosseinAgha]

@PabloSzx you need to use .push here instead of calling plugins as a function

[zhengrenzhe]

@PabloSzx does this actually work for you?

I tried adding as next.config.js

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: (config, options) => {
    if (config.resolve.plugins) {
      config.resolve.plugins(new TsconfigPathsPlugin());
    } else {
      config.resolve.plugins = [new TsconfigPathsPlugin()];
    }

    return config;
  },
  target: "serverless"
};

and

    "baseUrl": "."

inside the tsconfig, but root imports still don't seem to be working (may be due to me mixing js and tsx files).

config.resolve.plugins is an array, should be this:

if (config.resolve.plugins) {
      config.resolve.plugins.push(new TsconfigPathsPlugin());
} else {
      config.resolve.plugins = [new TsconfigPathsPlugin()];
}

:D

[blainegarrett]

@zhengrenzhe @PabloSzx Out of curiosity, do you have the tsconfig-paths-webpack-plugin installed as a devDependecy or normal dependency. I was surprised to find that running the prod build errored on the import in next.config. For some reason, I thought next.config would be moot in a production build. I normally only use it for the runtimeConfig. I'm wondering if there is a performance hit with it running in the built production app... or maybe at that point its just a useless import?

[PabloSzx]

@blainegarrett

It doesn't matter in the final build, and the path equivalents are made in compilation time.

Although, there is an experimental official support for this feature
Check out this #11293

[timneutkens]

You'll probably want to use the experimental support from #11293 indeed. It'll be on stable very soon.

[regalstreak]

For me, restarting the Next.js dev server worked haha