It isn't made clear exactly how to use non-javascript webpack configs.

[FrobtheBuilder]

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
If your webpack.config.* is in a non-javascript language, webpack will very conveniently use an appropriate transpiler to run it, but only if you have all the required packages installed, as listed on the js-interpret extensions map. This would be fine, except for the fact that if you're missing them, it will attempt to read the config as javascript and produce a rather unhelpful error message.
In my case, it looks like this:

> sachiel-use-test@1.0.0 start /Users/frob/Projects/sachiel-use-test
> webpack-dev-server --config webpack.config.ts

/Users/frob/Projects/sachiel-use-test/webpack.config.ts:1
(function (exports, require, module, __filename, __dirname) { import webpack = require("webpack")
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:545:28)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at requireConfig (/Users/frob/Projects/sachiel-use-test/node_modules/webpack/bin/convert-argv.js:96:18)
    at /Users/frob/Projects/sachiel-use-test/node_modules/webpack/bin/convert-argv.js:109:17

This is of course fixed by installing typescript and ts-node, as hinted at by the js-interpret documentation, but you might not guess that from this message or the relevant documentation page.

If the current behavior is a bug, please provide the steps to reproduce.
Not sure if I'd exactly call it a "bug", but just make a webpack config in a language that isn't javascript and try to run webpack or webpack-dev-server on it and you'll see what I mean.

What is the expected behavior?
It would be very nice if webpack would warn you that you're trying to run a non-js config without the proper tooling installed (just by looking at the extension, for instance), but at the very least this behavior and the proper course of action ought to be mentioned on the Configuration Languages documentation page.

If this is a feature request, what is motivation or use case for changing the behavior?
Right now the documentation doesn't make clear exactly what needs to be done to enable support for non-javascript configuration files, and when you do it incorrectly, webpack gives you no guidance in the right direction. It's entirely up to the user to figure out this somewhat "magic" behavior.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
Webpack 2.6.1, Node 7.1.0, macOS 10.12.4

[sokra]

@webpack-bot move to webpack/webpack.js.org

but you might not guess that from this message or the relevant documentation page.

Add a hint

[webpack-bot]

I've moved it to webpack/webpack.js.org.

[sokra]

We should throw an error in this case.

[RehanSaeed]

There is documentation explaining how to do this under Configuration Languages. However, the example given does not actually work!!! I get the following error:

Unexpected token import

Furthermore, ts-node does not support ES2015 module syntax so it only gets you half way there anyway. I'd also like to avoid having to install yet another dependency in ts-node.

My workaround has been to use the tsc TypeScript CLI tool and NPM scripts to first transpile the .ts webpack config to .js and then run webpack as normal. More details found in my answer on StackOverflow.

[adamelliotfields]

I was able to get this to work by simply adding "module": "commonjs" to my compilerOptions in tsconfig.json.

If you're using @ngtools/webpack for AoT compilation of Angular files, you'll also need to downgrade @types/node to 8.0.19.

Finally, @angular/compiler-cli will throw a warning if you're not using typescript@2.4.2.

My last two points are not related to this issue, but I'm assuming anyone finding this issue from Google is using Webpack to bundle Angular projects.

Here is my tsconfig.json (change target to es5 if you're targeting older browsers):

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

[youta1119]

I had the same problem. but, I found a solution using tsconfig-path. I submitted a pull request, it merged. And updated the document.Please see docment.

[RehanSaeed]

What if you want to use es2015 module syntax for your code, then I'd need to have a separate tsconfig.json just for my webpack configuration files?

I've settled on using the tsc command in my NPM scripts to transpile my .ts webpack config to .js. This has the added benefit of not having to rely on ts-node as an added dependency and I can use es2015 module syntax in your webpack configuration files. Find a complete guide on how to do this (and a bonus tip on how to exclude webpack 1 typings) in my StackOverflow answer here.

[youta1119]

@RehanSaeed

What if you want to use es2015 module syntax for your code, then I'd need to have a separate tsconfig.json just for my webpack configuration files?

I'm sorry, I was wrong. I found a solution not use another tsconfig.json. But this solution depends ts-node.
This solution is using the environment variable provided by ts-node like so.

package.json

"scripts": {
    "build": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' webpack",
  }

I'll send new pull request to webpack.js.org for modify docment later.

[molihub]

I have installed all modules what I need, but still fail to the same error.
Can anyone help me?

$ TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack  --config  webpack.config.ts
D:\project\gitroot\pro1\webpack.config.ts:1
(function (exports, require, module, __filename, __dirname) { import { resolve } from "path";
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at NativeCompileCache._moduleCompile (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:226:18)
    at Module._compile (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:172:36)

My settings is shown below:

$ head  webpack.config.ts
import { resolve } from "path";
import webpack from "webpack";

const tsConf: webpack.Configuration = {
  mode: "development",
  entry: "./src/public/js/main.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,

$ cat tsconfig-for-webpack-config.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5"
  }
}

$ npm list typescript ts-node tsconfig-paths ts-register typescript-register typescript-require
server1@0.1.0 D:\project\gitroot\pro1
+-- ts-node@5.0.1
+-- ts-register@0.1.0
| `-- typescript@2.9.2  deduped
+-- tsconfig-paths@3.4.0
+-- typescript@2.9.2
+-- typescript-register@1.1.0
| `-- typescript@1.8.10
`-- typescript-require@0.2.10
  `-- typescript@1.8.10

$ node -v
v8.11.2

[kgaregin]

install ts-node package to make it work

npm i ts-node

[akopchinskiy]

TS_NODE_COMPILER_OPTIONS unrecognized command

[kalyuk]

version 3.2.0 incorrect work with webpack.config.ts

downgrade to 3.1.2

`$ webpack-cli
webpack.config.ts:1
(function (exports, require, module, __filename, __dirname) { import * as path from 'path';
^

SyntaxError: Unexpected token *
at new Script (vm.js:80:7)
at NativeCompileCache._moduleCompile (/node_modules/v8-compile-cache/v8-compile-cache.js:226:18)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:172:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/node_modules/webpack-cli/bin/convert-argv.js:113:13)
at requireConfig (node_modules/webpack-cli/bin/convert-argv.js:115:6)
at /node_modules/webpack-cli/bin/convert-argv.js:122:17
at Array.forEach ()
at module.exports (/node_modules/webpack-cli/bin/convert-argv.js:120:15)
at yargs.parse (/node_modules/webpack-cli/bin/cli.js:232:39)
at Object.parse (/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
at /node_modules/webpack-cli/bin/cli.js:210:8
at Object. /node_modules/webpack-cli/bin/cli.js:500:3)
at Module._compile (internal/modules/cjs/loader.js:707:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:760:12)
at startup (internal/bootstrap/node.js:303:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:872:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

[retorquere]

Downgrade of webpack-cli to 3.1.2 did indeed solve the problem for me.

[retorquere]

The bug is being tracked at webpack/webpack-cli#724

[backbone87]

I have a similar problem with a custom inline loader. I have an ejected CRA2 app with react-app-rewired.

+-- react-app-rewired@2.1.0
+-- react-scripts@2.1.8
| `-- webpack@4.28.3
+-- ts-node@8.0.3
+-- tsconfig-paths@3.8.0
`-- typescript@3.3.3333

App.tsx

import spec from '!!../webpack/json-schema-ref-loader.ts!../../spec/openapi.yaml';
...

It seems that the loader isnt transpiled at all:

../spec/openapi.yaml (./webpack/json-schema-ref-loader.ts!../spec/openapi.yaml)
.\webpack\json-schema-ref-loader.ts:1
(function (exports, require, module, __filename, __dirname) { import RefParser from 'json-schema-ref-parser';
                                                                     ^^^^^^^^^

SyntaxError: Unexpected identifier

I thought it is a problem with compilerOptions.module = 'esnext', but when using require insteadof ES6 import:

../spec/openapi.yaml (./webpack/json-schema-ref-loader.ts!../spec/openapi.yaml)
.\webpack\json-schema-ref-loader.ts:13
  let error: any;
           ^

SyntaxError: Unexpected token :

I tried various ways to invoke the scripts, but none of them work:

• cross-env TS_NODE_PROJECT=\"tsconfig.dev.json\" ts-node -r tsconfig-paths/register ./node_modules/react-app-rewired/bin/index.js start
• ts-node --project ./tsconfig.dev.json ./node_modules/react-app-rewired/bin/index.js start

After searching for the wrapping module template, i found only this:

webpack/lib/node/NodeMainTemplatePlugin.js

Line 164 in 5258471

"require('vm').runInThisContext('(function(exports, require, __dirname, __filename) {' + content + '\\n})', filename)" +

It seems like loaders arent required like any other module during the webpack process, i wonder why that is?

[vladimiry]

tsconfig-paths preloader can be registered this way (npm script, cross-env TS_NODE_FILES=true is optional part you might not need to add, \" required for script properly working on Windows):

"build:web": "cross-env TS_NODE_FILES=true npx --no-install --node-arg=\"-r tsconfig-paths/register\" webpack --config ./webpack-configs/web/index.ts",

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[alexander-akait]

bump

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.