webpack.config.ts can not be resolved any more after upgrading to 3.2.0

[JounQin]

Describe the bug

As Title.

What is the current behavior?

(function (exports, require, module, __filename, __dirname) { import path from 'path';
                                                                     ^^^^

SyntaxError: Unexpected identifier

To Reproduce
Steps to reproduce the behavior:
use webpack.config.ts with ts-node

Expected behavior
build successfully

[evenstensberg]

Checking it out.

[evenstensberg]

can you make a repro repo for me to make it easier to debug?

[matmannion]

Not specific to typescript, we have the same problem with webpack.config.babel.js. Downgrading webpack-cli to 3.1.2 fixes this

[evenstensberg]

Gotcha. I think that we will need to add interpret again, we removed that dependency. Fixing this this week sorry for the inconvience

[retorquere]

Looks like this was fixed in the 3.2.1 release.

[ematipico]

@JounQin if you think the your problem is fixed, feel free to close the issue!

[Enase]

FYI: it's fixed for webpack.config.babel.js for me as well.

[JounQin]

Thanks.

[zenVentzi]

Still getting this error

import path from 'path';
       ^^^^

SyntaxError: Unexpected identifier

"devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
    "@babel/plugin-transform-runtime": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-typescript": "^7.3.3",
    "@types/node": "^11.10.4",
    "@types/webpack-bundle-analyzer": "^2.13.1",
    "babel-loader": "^8.0.5",
    "ts-node": "^8.0.2",
    "typescript": "^3.3.3333",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.1.0",
    "webpack-cli": "^3.2.3"
  }

{
  "compilerOptions": {
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "strict": true,   
    "noEmit": true, 
    "moduleResolution": "node",                       /* Enable all strict type-checking options. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "allowSyntheticDefaultImports": true
  }
}

import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

export default config;

"build": "webpack --config webpack.config.ts",

[vadim-su]

I have the same problem

tsc -V                                                                
Version 3.3.3333

[evenstensberg]

Could you try webpack-cli v.3.2.3 ?

[vadim-su]

webpack-cli -v
3.2.3

[vadim-su]

typescript, webpack-cli and webpack should be installed locally.
yarn add -D typescript webpack-cli webpack
After that, everything works.

Maybe I'm doing something wrong?

[chyzwar]

I think it is still broken:

webpack-cli@3.2.3
typescript@3.3.3333
ts-node@8.0.3

It is monorepo with hoisted node_modules.

webpack --config webpack.prod.ts


xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:3831
    const err = new SyntaxError(message);
                ^
SyntaxError: xxxxxxxxxxxxxxxxx/clients/web/webpack.prod.ts: Unexpected token (14:12)

  12 | const extractGlobal = new ExtractTextPlugin("css/global.css");
  13 | 
> 14 | const config: webpack.Configuration = {
     |             ^
  15 |   mode: "production",
  16 |   /**
  17 |    * Type of sourceMaps
    at Parser.raise (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:3831:17)
    at Parser.unexpected (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:5143:16)
    at Parser.parseVar (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:7884:18)
    at Parser.parseVarStatement (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:7714:10)
    at Parser.parseStatementContent (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:7310:21)
    at Parser.parseStatement (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:7243:17)
    at Parser.parseBlockOrModuleBlockBody (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:7810:25)
    at Parser.parseBlockBody (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:7797:10)
    at Parser.parseTopLevel (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:7181:10)
    at Parser.parse (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:8660:17)
    at parse (xxxxxxxxxxxxxxxxx/node_modules/@babel/parser/lib/index.js:10660:38)
    at parser (xxxxxxxxxxxxxxxxx/node_modules/@babel/core/lib/transformation/normalize-file.js:170:34)
    at normalizeFile (xxxxxxxxxxxxxxxxx/node_modules/@babel/core/lib/transformation/normalize-file.js:138:11)
    at runSync (xxxxxxxxxxxxxxxxx/node_modules/@babel/core/lib/transformation/index.js:44:43)
    at transformSync (xxxxxxxxxxxxxxxxx/node_modules/@babel/core/lib/transform.js:43:38)
    at Object.transform (xxxxxxxxxxxxxxxxx/node_modules/@babel/core/lib/transform.js:22:38)
    at compile (xxxxxxxxxxxxxxxxx/node_modules/@babel/register/lib/node.js:73:20)
    at compileHook (xxxxxxxxxxxxxxxxx/node_modules/@babel/register/lib/node.js:102:12)
    at Module._compile (xxxxxxxxxxxxxxxxx/node_modules/pirates/lib/index.js:93:29)
    at Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Object.newLoader [as .ts] (xxxxxxxxxxxxxxxxx/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (xxxxxxxxxxxxxxxxx/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (xxxxxxxxxxxxxxxxx/node_modules/webpack-cli/bin/convert-argv.js:116:13)
    at requireConfig (xxxxxxxxxxxxxxxxx/node_modules/webpack-cli/bin/convert-argv.js:118:6)
    at xxxxxxxxxxxxxxxxx/node_modules/webpack-cli/bin/convert-argv.js:126:17
    at Array.forEach (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @0.0.1 build: `webpack --config webpack.prod.ts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

[evenstensberg]

https://link.medium.com/EzGAUAEYZU

[chyzwar]

I found it. In my case adding typescript project references broke build not webapck cli. I am not sure why adding references affected parsing of webpack config...

[etcinit]

I was having the same issue above (SyntaxError: Unexpected identifier) when importing path. It was resolved once I explicitly included ts-node as a devDependency (i.e.yarn add --dev ts-node).

[hakobpogh]

I have the same issue for the following versions

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

and it worked after adding tihs: TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" but previously with this versoins I didn't have the issue:

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

[eighteen-k-gold-malow]

我的也有同样问题，执行 npm i --save-dev webpack-cli 后就解决了
I also had the same problem, which was solved by executing `npm I -- save-dev webpack-cli'.

{
  "name": "angular-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^12.7.4",
    "@types/webpack": "^4.39.1",
    "ts-node": "^8.3.0",
    "tsconfig-paths": "^3.8.0",
    "typescript": "^3.6.2",
    "webpack-cli": "^3.3.7"
  }
}

[evenstensberg]

Try updating to 3.3.8

[damountie]

Still getting this error

import path from 'path';
       ^^^^

SyntaxError: Unexpected identifier

I ran into this problem when trying to use the following tsconfig.json setting:

"module": "esnext",

As @hakobpogh said above, if you specify a different tsconfig.json for your webpack config parsing, then it should work.

./package.json:

"build": "export TS_NODE_PROJECT=toolchain/tsconfig.webpack.json && webpack --config toolchain/webpack.config.ts",

./toolchain/tsconfig.webpack.json:

"module": "commonjs",

./tsconfig.json:

"module": "esnext", <-- or whatever else you want for your project's source files.