Unexpected character '@' for webpack "externals" option

Question

I've found a lot of stuff about "Unexpected character '@'" happening with webpack, but none of it related specifically to, or helpful with, getting that error for the externals webpack option. I've used this before, both with and without @-signs, without any trouble, so I don't know why webpack is getting cranky now.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = () => {
  return {
    mode: 'production',
    target: 'node',
    entry: './build.ts',
    output: {
      path: __dirname,
      filename: `build.js`
    },
    node: {
      __dirname: false,
      __filename: false,
    },
    resolve: {
      extensions: ['.ts', '.js'],
      mainFields: ['es2015', 'module', 'main', 'browser']
    },
    module: {
      rules: [
        {
          test: /\.ts$/i,
          loader: 'ts-loader',
          options: { configFile: 'tsconfig-build.json' },
          exclude: [/\/node_modules\//]
        }
      ]
    },
    externals: ['chalk', '@tubular/util'],
    optimization: {
      minimize: true,
      minimizer: [new TerserPlugin({
        terserOptions: {
          mangle: false,
          output: { max_line_len: 511 }
        }
      })],
    },
  };
};

The @ is a necessary part of the package name that I want to exclude, and I've exclude such packages before, so this is both mysterious and annoying.

Anyone have any idea what's wrong here?

Answer 1

I found an answer, but it's certainly not the answer I was looking for.

If I use the package webpack-node-externals , I can externalize all node_modules like this:

const nodeExternals = require('webpack-node-externals');

 // ...

    externalsPresets: { node: true },
    externals: [nodeExternals()],

In this particular case excluding all node externals happens to be just fine, so webpack-node-externals solves my immediate problem. But if I wanted to be more selective, and wanted to exclude a package with an @ in the name, I'd still have a mystery on my hands.

Answer 2

I found a solution, I was also facing the same issue with Vue.js Project --mode production . All other modes were working fine.

externals:[
      {
        ["@company/library-name"]:{
          root: "@company/library-name"
        }
      }
    ]

This is basically using the object syntax from official docs .