[BUG] webpack plugin does not resolve the `??` / nullish coalescing operator

[oadpoaw]

Bug Report Quick Checklist

• [x] I am on the latest version of Snowpack & all plugins.
• [x] I use package manager yarn
• [x] I run Snowpack on OS Windows and Linux
• [x] I run Snowpack on Node.js v14+

Describe the bug

Webpack plugin cannot resolve the ?? / nullish coalescing operator.

Sample error:

Webpack errors:
<The filename where we used nullish coalescing operator>
Module parse failed: Unexpected token (1:<The column where we used the nullish coalescing operator>)
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.

To Reproduce

1. npm init snowpack-app --template @snowpack/app-template-typescript
2. Add const demo = undefined ?? true; in any line in src/App.tsx or in any file.
3. Add snowpack plugin webpack
4. run npx snowpack build
5. See error!

Expected behavior

Webpack plugin should resolve the nullish coalescing operator, or snowpack itself.

edit: the only workaround that I could find to resolve this issue is to replace all ?? to || / logical OR operator.

[rhostem]

I had a same kind of issue - "Unexpected token". My problem's reason was optional chaining operator.

Module parse failed: Unexpected token (1:2507)
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.

I tried a several setups but no use. I solved by adding webpack babel-loader directly in snowpack.config.js

plugins: [
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          config.module.rules.push({
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                targets: '> 0.25%, not dead',
                plugins: [
                  ['@babel/plugin-transform-runtime', { regenerator: true }], // some packages could require this plugin
                ],
              },
            },
          });

          return config;
        },
      },
    ],
  ],

I expect this issue resolved by snowpack or @snowpack/plugin-webpack itself.

[Kcazer]

I faced the same issue a couple days ago and managed to fix it by adding the following in my package.json

  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
  },

That browserlist is directly copied from CRA initial setup and seems to work without any issue so far.

I can only guess that the browserlist configuration of the plugin (>.75%) is the reason why webpack fails.

[IanVS]

Note, Webpack 4 does not support the ?? operator. For a good description of why, you can check out this issue: https://github.com/PaulLeCam/react-leaflet/issues/883.

I'm not sure what version of webpack you're using, but that might be something you could check.

[oadpoaw]

Closing this issue in favor of @Kcazer 's answer. It works :D