sentryWebpackPlugin is using esbuild bundler from unplugin

[Cheprer]

Environment

 node: 16.13.1

    "@sentry/browser": "7.54.0",
    "@sentry/core": "7.54.0",
    "@sentry/webpack-plugin": "2.2.1",
    ...
    "@storybook/addon-actions": "6.4.19",
    "@storybook/addon-essentials": "6.4.19",
    "@storybook/addon-knobs": "6.3.0",
    "@storybook/addon-links": "6.4.19",
    "@storybook/addon-storyshots": "6.4.19",
    "@storybook/addons": "6.4.19",
    "@storybook/api": "6.4.19",
    "@storybook/builder-webpack5": "6.4.19",
    "@storybook/client-api": "6.4.19",
    "@storybook/components": "6.4.19",
    "@storybook/core-events": "6.4.19",
    "@storybook/manager-webpack5": "6.4.19",
    "@storybook/react": "6.4.19",
    "@storybook/testing-react": "1.2.3",
    "@storybook/theming": "6.4.19",
    ...
    "@babel/cli": "7.21.5",
    "@babel/core": "7.22.1",
    "@babel/node": "7.22.1",
    "@babel/plugin-proposal-class-properties": "7.18.6",
    "@babel/plugin-proposal-decorators": "7.22.3",
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
    "@babel/plugin-proposal-optional-chaining": "7.21.0",
    "@babel/plugin-transform-react-constant-elements": "7.22.3",
    "@babel/plugin-transform-runtime": "7.22.4",
    "@babel/preset-env": "7.22.4",
    "@babel/preset-react": "7.22.3",
    "@babel/preset-typescript": "7.21.5"
    ...

Steps to Reproduce

1. I've updated sentry core to latest along with webpack-plugin and followed migration on both
2. Along with webpack-plugin I'm using storybook 6.4.19.
3. When I just import import { sentryWebpackPlugin } from '@sentry/webpack-plugin'; in webpack.config.babel.js where I defined and call sentryWebpackPlugin like this:

webpackConfig.plugins.push(
      sentryWebpackPlugin({
        sourcemaps: {
          assets: 'dist',
          ignore: ['node_modules', 'webpack.config.js'],
          deleteFilesAfterUpload: 'dist/**/*.map',
        },
        release,
      }),
    );

4. In main.js in .storybook I've imported const webpackConfig = require('esm')(module)('../build/webpack.config.babel').default; and just check the mode

if (webpackConfig.mode === 'production') {
      config.plugins.push(...[PLUGINS.miniCSSExtract]);
    }

package.json

• .scripts
  "storybook": "start-storybook -p 6006 --no-manager-cache",

Expected Result

Everything starts when I run yarn storybook

Actual Result

Unplugin was called with esbuld getter somehow, can't track it where it is in this plugin, but it is here because if I comment out the import of import { sentryWebpackPlugin } from '@sentry/webpack-plugin'; it starts to work alright.

yarn run v1.22.19
$ start-storybook -p 6006 --no-manager-cache
info @storybook/react v6.4.19
info
ERR! /xxx/client/node_modules/unplugin/dist/index.js:1038
ERR!     const setup = (plugin) => plugin.esbuild?.setup ?? ((pluginBuild) => {
ERR!                                              ^
ERR!
ERR! SyntaxError: Invalid or unexpected token
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
ERR!  /xxx/client/node_modules/unplugin/dist/index.js:1038
ERR!     const setup = (plugin) => plugin.esbuild?.setup ?? ((pluginBuild) => {
ERR!                                              ^
ERR!
ERR! SyntaxError: Invalid or unexpected token
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[Cheprer]

Ok after few iterations this import/require const webpackConfig = require('esm')(module)('../build/webpack.config.babel').default; triggered trying to use esbuild in background I have made my way around it, but in general it should not right? It should still stick to webpack or?

[Cheprer]

[UPDATE]

• It is not connected to require('esm')(module).
• If I run standart webpack with imported sentryWebpackPlugin it throws with error above when I try to run with "node -r esm bin/server where I access this config file mentioned above and create webpack(webpackConfi) but it is not that important.

I'll try to create isolated steps to reproduce this issue. Or if you see any problems with this approach at this point?

[lforst]

This is very likely because you're using node < 14 which is the first version that supports optional chaining. Can you try node version 14?

[Cheprer]

I'm using node 16.13.1. I think it is due to esm npm package, which is 4 years unmaintained. I'll try to switch to tsx, but in general I would like to switch to esbuild-loader and drop babel, but after 2 hours of rewrite I've noticed they don't support JS decorators yet.

[Cheprer]

Ok I can't get it to work with tsx due to privatenumber/tsx#113 :( I've tried to workaround with node --loader @esbuild-kit/esm-loader but it didn't work for me. Although it throws for css and scss module build.

For example one of the errors if you have maybe idea where is the problem?

ERROR in ./src/modules/components/LinkForm.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/modules/components/LinkForm.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ReferenceError: __name is not defined
    at SortTemplate (eval at cloneSort (./client/node_modules/source-map-js/lib/quick-sort.js:2:848), <anonymous>:3:107)
    at null.cloneSort (./client/node_modules/source-map-js/lib/quick-sort.js:112:10)
    at null.exports.quickSort (./client/node_modules/source-map-js/lib/quick-sort.js:128:19)
    at null.sortGenerated (./client/node_modules/source-map-js/lib/source-map-consumer.js:500:5)
    at BasicSourceMapConsumer.SourceMapConsumer_parseMappings (./client/node_modules/source-map-js/lib/source-map-consumer.js:599:5)
    at BasicSourceMapConsumer.get (./client/node_modules/source-map-js/lib/source-map-consumer.js:70:12)
    at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor (./client/node_modules/source-map-js/lib/source-map-consumer.js:694:12)
    at SourceMapGenerator.<anonymous> (./client/node_modules/source-map-js/lib/source-map-generator.js:207:43)
    at Array.forEach (<anonymous>)
    at MappingList.MappingList_forEach (./client/node_modules/source-map-js/lib/mapping-list.js:44:17)

My rules for webpack

const BASE_CSS_LOADER = __PROD__
  ? {
      loader: 'css-loader',
      options: {
        sourceMap: false,
      },
    }
  : 'css-loader';
const STYLE_LOADER = __DEV__
  ? 'style-loader'
  : {
      loader: MiniCssExtractPlugin.loader,
      options: { esModule: false },
    };

const SASS_LOADER = {
  loader: 'sass-loader',
  options: {
    sassOptions: {
      includePaths: [paths.client('styles'), paths.client()],
    },
    sourceMap: false, // enable for sentry (UNMS-24)
  },
};

const rules = {
 jsts: {
    test: /\.(ts|tsx|js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true, // speed up build and subsequent rebuilds
        cacheCompression: false,
      },
    },
  },
  scss: {
    test: /\.scss$/,
    include: pathStr => pathStr.startsWith(paths.client()),
    use: [STYLE_LOADER, BASE_CSS_LOADER, 'postcss-loader', SASS_LOADER],
  },
  css1: {
    test: /\.css$/,
    include: pathStr => pathStr.startsWith(paths.client()),
    use: [STYLE_LOADER, BASE_CSS_LOADER, 'postcss-loader'],
  },
  css2: {
    test: /\.css$/,
    exclude: pathStr =>
      pathStr.startsWith(paths.client()) && !pathStr.startsWith(paths.client(path.normalize('styles'))),
    use: [STYLE_LOADER, BASE_CSS_LOADER],
  },
  }

[Cheprer]

Ok workaround (from here: privatenumber/tsx#113) using swc worked. I think we can close this issue since there are alternatives to solve it. Not sure if you want to support esm run with this plugin in case you want. Then the issue remains.

[lforst]

Thank you for investigating and the workaround. Closing because this problem seems a bit niche.

[ukhanzada-nisum-com]

I am also getting optional chaining issues.. in my case node version is 12. This is a legacy project and I cannot update the node version, the error I'm facing is posted below.

[pengfeir]

I am also getting optional chaining issues.. in my case node version is 12. const setup = (plugin) => plugin.esbuild?.setup ?? ((pluginBuild) => {
^

SyntaxError: Unexpected token '.'

[lforst]

This plugin only supports Node >= 14

[pengfeir]

Here are some possible situations that may cause nodemon to malfunction in Node.js 14: node：14.19.0 nuxt：2.13.3