Configuration Languages: TS_NODE_PROJECT not working

[akopchinskiy]

Original docs: https://webpack.js.org/configuration/configuration-languages/#typescript

All dependencies is installed in accordance with the documentation.
But when I use this:

"scripts": {
    "build": "TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
  }

I receive this error:
"TS_NODE_PROJECT" unrecognized command

[SeanPercy]

@akopchinskiy I faced a similar issue. The following worked for me:

• run npm i cross-env
• change the script to "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"

[EugeneHlushko]

@akopchinskiy can you confirm that adding cross-env like Sean suggests solves your issue?

[akopchinskiy]

@EugeneHlushko yes it's working.
But there is another problem with it: webpack.config.json uses global environments and when I use cross-env TS_NODE_PROJECT=... one of my webpack configs conmpiled incorrectly, because I have different tsconfig.json's as well.

[SeanPercy]

@akopchinskiy I guess you mean something like setting the mode to production / development, right?

This is my folder structure:

    |-- dist
    |-- node_modules
    |-- src
    |-- tests
        |-- testProductionBuild.ts
    |-- tools
        |-- .stylelintrc
        |-- babel.config.js
        |-- nodemon.json
        |-- tslint.json
        |-- tsconfig-for-webpack-config.json
        |-- webpackConfig
            |-- common.ts
            |-- development.ts
            |-- production.ts
    |-- .babelrc
    |-- .env
    |-- .gitignore
    |-- package-lock.json
    |-- package.json
    |-- tsconfig.json
    |-- webpack.config.ts

 

And here is an excerpt of my package.json

  "scripts": {
    "webpack-ts": "cross-env TS_NODE_PROJECT=%npm_package_config_TS_NODE_PROJECT%",
    "build": "npm run webpack-ts NODE_ENV=production webpack",
    "pretest-build": "npm run build",
    "test-build": "ts-node --project %npm_package_config_TS_NODE_PROJECT% tests/testProductionBuild.ts",
    "server": "npm run webpack-ts NODE_ENV=development webpack-dev-server",
  },
  "config": {
    "TS_NODE_PROJECT": "\"tools/tsconfig-for-webpack-config.json\""
  },

The tsconfig.json file on the root level is used by my IDE and tslint for linting the entire project.
The tools/tsconfig-for-webpack-config.json file is only used to run webpack.config.ts and test/testProductionBuild.ts

[hakobpogh]

Hi there. I have a .ts config in two different projects one is with the following versions:

    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"

and the other is with the following versions:

    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"

But for the first one I don't need to add TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" but for the second one, it's required. I think that it's better to make it work without this additional stuff.

[aryzing]

@hakobpogh how, then, can you use different TypeScript configs for webpack and for your code?

[eduard-malakhov]

@aryzing, though this is an old issue, maybe this would still be useful. I've had the exact same issue and I managed to resolve it by adding delete process.env.TS_NODE_PROJECT; at the top of my webbacp.config.ts as suggested in jonaskello/tsconfig-paths-webpack-plugin#17. This hack basically clears the TS_NODE_PROJECT variable for any code inside the config, including ts-loader which will then use the default tsconfig.json.

[wrightwriter]

I solved this by modifying my tsconfig as per the docs

{
  "compilerOptions": {
     // stuff
  }
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS",
      "target": "ESNext",
      "esModuleInterop": true,
      "moduleResolution": "node",
      "verbatimModuleSyntax": false
    }
  },
}