Posted in Uncategorized

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

   February 23, 2021  7 Comments on It isn’t made clear exactly how to use non-javascript webpack configs.

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

Author: Fantashit

7 thoughts on “It isn’t made clear exactly how to use non-javascript webpack configs.”

  1. 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.

  2. 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
  }
}

  3. @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.

  5. 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.`

Comments are closed.