Failed to load tsconfig.json: Missing baseUrl in compilerOptions

[rhys-vdw]

No idea what's going on here. My tsconfig.json:

project/tsonfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "removeComments": false,
    "sourceMap": true,
    "isolatedModules": false,
    "strictNullChecks": true,
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "lib": ["dom", "esnext"],
    "baseUrl": ".",
    "paths": {
      "Audio/*": ["./app/assets/audios/*"],
      "Components/*": ["./app/assets/javascripts/components/*"],
      "Constants/*": ["./app/assets/javascripts/constants/*"],
      "Decorators/*": ["./app/assets/javascripts/components/decorators/*"],
      "Images/*": ["app/assets/images/*"],
      "Math/*": ["./app/assets/javascripts/math/*"],
      "Redux/*": ["./app/assets/javascripts/redux/*"],
      "Routes": ["./app/assets/javascripts/rails-routes.js.erb"],
      "Services/*": ["./app/assets/javascripts/services/*"],
      "Stylesheets/*": ["./app/assets/stylesheets/*"],
      "Types": ["./app/assets/javascripts/types/index"],
      "Utilities/*": ["./app/assets/javascripts/utilities/*"],
      "react": ["node_modules/@types/react"]
    },
    "preserveConstEnums": true
  },
  "include": [
    "app/assets/javascripts/**/*.ts",
    "app/assets/javascripts/**/*.tsx",
    "stories/**/*.ts",
    "stories/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

webpack.config.ts

// ...
  resolve: {
    plugins: [
      new TsconfigPathsPlugin({
        baseUrl: __dirname,
        extensions: [".js", ".ts", ".tsx"],
      }),
    ],
// ...

This error doesn't make sense because, firstly, tsconfig.json has a baseUrl, and secondly, it doesn't need one because I've included it in the options.

Also, this should kill the build rather than just logging. If it can't find the file then what's the point of continuing to run? The paths will not resolve.

[rhys-vdw]

Oops, I realised what's going on. There is another tsconfig in the same dir as webpack.config.js. I think my comments still stand though:

• Should kill the build
• Should allow override via options

[rhys-vdw]

Uh... Actually I have no idea what's going on. :-(

  resolve: {
    plugins: [
      new TsconfigPathsPlugin({
        baseUrl: __dirname,
        configFile: path.join(appRoot, "tsconfig.json"),
        extensions: [".js", ".ts", ".tsx"],
      }),
    ],
  },

output:

[130] -> yarn run dev
yarn run v1.12.3
$ nvc && TS_NODE_PROJECT=config/webpack/tsconfig.json node --max_old_space_size=4096 node_modules/.bin/webpack-dev-server --progress --hot --config config/webpack/app-config.ts --mode development
info: Node version matches the engine version
Failed to load tsconfig.json: Missing baseUrl in compilerOptions
 10% building 0/1 modules 1 active ..../app/assets/javascripts/application.tstsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
 10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://0.0.0.0:3808/
ℹ ｢wds｣: webpack output is served from //localhost:3808/webpack_assets/
 10% building 4/5 modules 1 active .../node_modules/webpack/hot/dev-server.jstsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin

[Ky6uk]

Also just got an issue. I think this is sort of conflicts between ts-node config and project config. For some reasons the plugin trying to use tsconfig.json presented in TS_NODE_PROJECT I think.

Can be related to #1, #17 and #31

[salchichongallo]

@Ky6uk is right, I just added delete process.env.TS_NODE_PROJECT; on top of my webpack.config.ts file and everything works fine!

Although the file I use to compile my Webpack config file extends from the same config that I use in the plugin. I guess TypeScript's extend config funcionality is not supported, yet.

[rhys-vdw]

Another option:

// helpers.ts
import { endsWith } from "lodash"
import * as path from "path"

function fromTsAlias(tsAlias: string) {
  return endsWith(tsAlias, "/*")
    ? tsAlias.substring(0, tsAlias.length - 2)
    : `${tsAlias}$`
}

function fromTsPath(tsPath: string) {
  return endsWith(tsPath, "/*")
    ? tsPath.substring(0, tsPath.length - 2)
    : tsPath
}

export function tsPathsToAlias(
  appRoot: string,
  paths: Record<string, ReadonlyArray<string>>
) {
  return Object.entries(paths).reduce<Record<string, string>>(
    (acc, [key, value]) => {
      if (value.length !== 1) {
        throw new TypeError(
          `Unsupported TS alias ${key} has length ${value.length}`
        )
      }
      acc[fromTsAlias(key)] = path.join(appRoot, fromTsPath(value[0]))
      return acc
    },
    {}
  )
}

const config: Configuration = {
  // ...
  resolve: {
    // ...
    alias: tsPathsToAlias(appRoot, tsConfig.compilerOptions.paths),
  },

[bichikim]

I solve this problem by below code delete process.env.TS_NODE_PROJECT add this code on top of webapck.config.ts file.

👍

[kaankucukx]

I solve this problem by below code delete process.env.TS_NODE_PROJECT add this code on top of webapck.config.ts file.

👍

Ok now i have below one ..

No file system found on resolver. Please make sure you've placed the plugin in the correct part of the configuration. This plugin is a resolver plugin and should be placed in the resolve part of the Webpack configuration.

:(

[kaankucukx]

Okey i got it to work.

I was in a hurry and i didn't figured that i put my plugin initilization under resolve: {} property. I was configuring it under root plugin: [] property. So moving my configuration to resolve: {} fixes everything.

const config: webpack.Configuration = {
plugins: [],
resolve: [
 plugins: [
  new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, './tsconfig.json'),
        extensions: ['.ts', '.tsx', '.js'],
        logLevel: 'INFO',
        baseUrl: path.resolve(__dirname, '.'),
        mainFields: ['browser', 'main'],
      }),
]
],
}```

[chayakornwc]

i have same issue, but baseUrl and configFile define not resolve this issue.

[VictorQueiroz]

Can we have a fix for this? Also having the same problem.

It simply doesn't work if you have TS_NODE_PROJECT environment variable. delete process.env.TS_NODE_PROJECT does the job for the plugin to work, but would be great to have a definite fix for this problem.

[johnnyreilly]

Can we have a fix for this?

Do you fancy having a go at working on this? PRs are generally gratefully received 🥰

[VictorQueiroz]

@johnnyreilly Yes. Sorry about the tone. I will try to look into it over the weekend as I'm trying to use more of TS paths.

[garethbrown-bjss]

I've got this problem when trying to setup Storybook with angular. I can't modify the webpack.config.ts file to add the delete process.env.TS_NODE_PROJECT; line to it. Are there any other ways around this?

[jakebailey]

I've filed dividab/tsconfig-paths#143 for this, but one place this will pop up again is in TS 4.1 and above, which don't require baseUrl anymore (and will resolve paths relative to the config file instead, fixing auto-imports that would normally be treated differently due to baseUrl being provided).