swcMinify: true leads to "Expected ident" Webpack/Terser error

[osdiab]

What version of Next.js are you using?

11.1.3-canary.81

What version of Node.js are you using?

14.16.1

What browser are you using?

Firefox

What operating system are you using?

macOS

How are you deploying your application?

next dev/next build/Vercel

Describe the Bug

I opted into the SWC compiler and am getting this error when I try to run yarn build:

Now, I'm getting an issue with Terser, that seems to go away when I remove swcMinify: true from my next.config.js

info  - Creating an optimized production build  
Failed to compile.

static/chunks/2095-3910ce9329e0dc7f.js from Terser
error: Expected ident
      
       |
116692 |         var await = is("name", "await") && next();
       |             ^^^^^

Caused by:
    0: failed to parse input file
    1: Syntax Error
Error: error: Expected ident
      
       |
116692 |         var await = is("name", "await") && next();
       |             ^^^^^

Caused by:
    0: failed to parse input file
    1: Syntax Error


> Build failed because of webpack errors

Previous issue

info  - Checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

./src/components/form/percent-input.tsx
Module parse failed: Identifier '_templateObject' has already been declared (92:9)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
You may need an additional loader to handle the result of these loaders.
|     return data;
| }
> function _templateObject() {
|     var data = _taggedTemplateLiteral([
|         "\n    input {\n      text-align: right;\n    }\n  "


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/omar/code/spinach/web-app/node_modules/next/dist/build/index.js:400:19
    at async Span.traceAsyncFn (/Users/omar/code/spinach/web-app/node_modules/next/dist/trace/trace.js:74:20)
    at async Object.build [as default] (/Users/omar/code/spinach/web-app/node_modules/next/dist/build/index.js:78:25)

Expected Behavior

No errors on yarn build

To Reproduce

I'm not sure what it is about this project that causes the issue - it's a nextJS project that uses Emotion with the CSS prop - I tried making a similar repro project but it doesn't fail like this, so I'm happy to grant access to my company's codebase to see if there's somethign I'm doing wrong, but here's some data:

Language: Typescript 4.4.3

next.config.js

const { merge: webpackMerge } = require("webpack-merge");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { withSentryConfig } = require("@sentry/nextjs");

const config = {
  experimental: {
    swcLoader: true,
    swcMinify: true,
  },
  // ...
  webpack5: true,
  webpack: (config, options) =>
    webpackMerge(config, {
      ...(options.isServer ? {} : { resolve: { fallback: { fs: false } } }),
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/i,
            type: "asset/resource",
            generator: {
              filename: "static/chunks/[path][name].[hash][ext]",
            },
          },
          {
            test: /\.svg$/,
            use: [
              {
                loader: "@svgr/webpack",
                options: {
                  svgoConfig: {
                    plugins: {
                      // `removeDimensions` also sets a `viewBox` which we want
                      removeDimensions: true,
                    },
                  },
                },
              },
            ],
          },
        ],
      },
      plugins: [
        ...(process.env.ANALYZE
          ? [
              new BundleAnalyzerPlugin({
                analyzerMode: "server",
                analyzerPort: options.isServer ? 8888 : 8889,
                openAnalyzer: true,
              }),
            ]
          : []),
      ],
    }),
};

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins
const sentryConfig = withSentryConfig(config, {
  // ...
});

// as per https://github.com/getsentry/sentry-javascript/issues/3549
const stashedWebpackConfig = sentryConfig.webpack;
sentryConfig.webpack = (config, options) => {
  const updatedConfig = stashedWebpackConfig(config, options);
  // see: https://github.com/vercel/next.js/blob/master/errors/improper-devtool.md
  if (!options.dev) {
    updatedConfig.devtool = "hidden-source-map";
  }
  return updatedConfig;
};
module.exports = sentryConfig;

Relevant Deps

  "dependencies": {
    "@emotion/react": "^11.5.0",
    "@sentry/integrations": "^6.13.3",
    "@sentry/nextjs": "^6.12.0",
    "next": "canary",
    // ...
  },
  "devDependencies": {
    "@emotion/eslint-plugin": "^11.5.0",
    "@emotion/serialize": "^1.0.2",
    "@svgr/webpack": "^5.5.0",
    // ...
    "typescript": "^4.4.3",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-merge": "^5.7.3"
  },

[Janpot]

Module parse failed: Identifier '_templateObject' has already been declared

looks like swc-project/swc#2486

edit: seems to be released in latest canary

[osdiab]

oh nice!

[osdiab]

So i updated to the latest canary, now i don't see that error, but instead i see this:

info  - Creating an optimized production build  
Failed to compile.

static/chunks/2095-3910ce9329e0dc7f.js from Terser
error: Expected ident
      
       |
116692 |         var await = is("name", "await") && next();
       |             ^^^^^

Caused by:
    0: failed to parse input file
    1: Syntax Error
Error: error: Expected ident
      
       |
116692 |         var await = is("name", "await") && next();
       |             ^^^^^

Caused by:
    0: failed to parse input file
    1: Syntax Error


> Build failed because of webpack errors

Any idea what can be done to deal with this issue?

[Janpot]

Any idea what can be done to deal with this issue?

Provide a reproduction so it can be debugged

[osdiab]

@Janpot the whole point is that i don't know how to reproduce this since i don't understand at all where these errors are coming from :/ I tried remaking a NextJS app with the same configuration and this didn't happen, so I am lost. Hence my offer to give access to my company's codebase, I don't know what is causing these issues.

[osdiab]

OK I was able to make it stop failing by removing swcMinify: true from my config. so it has something to do with that. Didn't have to do with @sentry/nextjs (with or without it it still failed).

I thought that swcMinify was supposed to be a replacement for Terser, so a little surprised it's showing up; probably my understanding is wrong, and maybe this might be more of an SWC issue than a NextJS one?

[juunone]

@osdiab did you resolve this problem?
i have also same problem with NextJS v12 with Emotion and SWC

[osdiab]

By turning off swcMinify as per above, if I just use swcLoader it's all good. It seems that swcMinify still needs work, which probably explains why it's off by default on next 12.

[timneutkens]

Hey, swcMinify works fine for the majority of cases. We're currently working on fixing any edge cases reported. As such it would be very valuable to get the input source (before minify) so that we can investigate what is wrong with the compiled output.

I've opened a PR to have a debug flag that logs all sources before minification. Once that is out on canary could you please run your app using it and get the source for the file that is breaking, then we can investigate and fix the issue 🙏

PR: #31417

[timneutkens]

This is released as https://github.com/vercel/next.js/releases/tag/v12.0.4-canary.13 which can be installed using npm install next@canary. It's currently being published to npm which takes around 30 minutes, after that you can install and run the following command:

NEXT_DEBUG_MINIFY=1 next build > log.txt

[osdiab]

Happy to, will run this soon!

[timneutkens]

Forgot to mention the last step, which is sending the log here or if it can't be shared publicly sending it to me on https://twitter.com/timneutkens

[osdiab]

sent you a DM on Twitter!

[cabbage-cart]

still getting the same error even after bumping to 12.1

static/chunks/pages/_app-2a74ceb08bf0dc01.js from Terser
error: 'eval' and 'arguments' cannot be used as a binding identifier in strict mode
     
      |
97661 |     function eval(str) {
      |              ^^^^

Caused by:
    0: failed to parse input file
    1: error was recoverable, but proceeding would result in wrong codegen
    2: Syntax Error
    

it only goes away after I add

 optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },

to my next.config seems to fix it, but i dont think this is proper since swcMinify: true should replace Terser. At this point i've just permanently removed the option from my config

[kdy1]

This should be fixed, as the swc minifier has module mode (false by default) and ES codegen bugs are resolved.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.