Build started failing with "Module parse failed: Unexpected token"

[alexeychikk]

I haven't changed anything in my configs or deps. But after the latest clean npm i my build started failing with:

Webpack errors:
./dist/hooks/useRequest.js 1:1316
Module parse failed: Unexpected token (1:1316)
File was processed with these loaders:
 * ../node_modules/babel-loader/lib/index.js
 * ../node_modules/@snowpack/plugin-webpack/plugins/import-meta-fix.js
 * ../node_modules/@snowpack/plugin-webpack/plugins/proxy-import-resolve.js
You may need an additional loader to handle the result of these loaders.

The particular line that fails in my code is this optional chaining syntax:
abortFn.current?.();

My tsconfig.json:

{
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "target": "ES2019",
    "moduleResolution": "node",
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "@src/*": ["./src/*"]
    },
    "noEmit": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "importsNotUsedAsValues": "error",
    "noUnusedLocals": true,
  }
}

My snowpack config:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-webpack',
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-typescript',
  ],
  install: [
    /* ... */
  ],
  installOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
  proxy: {
    /* ... */
  },
  alias: {
    '@src': './src',
  },
};

UPD 1:

I think the issue here is that snowpack ignores "target": "ES2019" of my tsconfig.json and therefore not compiles optional chaining syntax to a vanilla js. I also tried to pass args explicitly ['@snowpack/plugin-typescript', { args: '--project tsconfig.json' }] but it has no effect.

[alexeychikk]

I fixed it by patching webpack config like this:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          // FIXES https://github.com/snowpackjs/snowpack/discussions/2810
          config.module.rules.find(
            (rule) =>
              rule &&
              rule.use &&
              rule.use.find((use) => {
                if (
                  !use ||
                  !use.loader ||
                  !use.loader.includes('babel-loader')
                ) {
                  return null;
                }

                use.options.plugins = (use.options.plugins || []).concat([
                  '@babel/plugin-proposal-optional-chaining',
                ]);

                return use;
              }),
          );
          return config;
        },
      },
    ],
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-typescript',
  ],
  install: [],
  installOptions: {},
  devOptions: {},
  buildOptions: {},
  proxy: {},
  alias: {
    '@src': './src',
  },
};

[ljani]

While you're at it, you might want to add nullish coalescing plugin to the list as well:

"@babel/plugin-proposal-nullish-coalescing-operator"

In other words, I'm facing this issue as well. These used to work out-of-box.

[NfNitLoop]

Related issue: #2354

(I see that @alexeychikk already linked from that issue to here, I'm just making it doubly-linked. 😄)

[rossng]

I spent hours chasing an issue that I thought was related to this, but it turned out to be webpack/webpack#12960. It looked like Babel was miscompiling the optional chaining operator - which I assumed was a bug in Snowpack's configuration - but it's actually a Webpack bug. Hope this message saves someone else the work that I did!

I've worked around this for now by setting optimize: { target: "es2017" } in the Snowpack config. Since esbuild is run before any optimiser plugins, this will strip out some of the newer ES features like optional chaining before the code gets ingested by Webpack.