SWC minify feedback

[timneutkens]

This is a feedback thread for when your application enabled minification through SWC. The main goal of this thread is to collect potential issues people are running into with minified output.

[torjusb]

@timneutkens here is a small test case I could come up with from our project: https://github.com/torjusb/nextjs-swc

It uses @ericblade/quagga2. Seems to fail whenever that is imported (https://github.com/torjusb/nextjs-swc/blob/master/pages/index.js#L9-L37).

I did try compiling it with SWC on its own, but couldn't get it to fail then, but maybe nextjs configures it differently.

[yussan]

i just upgrade next, react and react-dom, and got some error.

[Giayychan]

same here , using ^12.0.2 and ran rm -rf .next && next build

info  - Creating an optimized production build ...thread '<unnamed>' panicked at 'Infinite loop detected (current pass = 31)', /Users/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/swc_ecma_minifier-0.47.1/src/compress/mod.rs:261:13
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
fatal runtime error: failed to initiate panic, error 5
sh: line 1: 16774 Abort trap: 6           next build

[ghost]

i know why :
because i used @toast-ui/react-editor , when i remove @toast-ui/react-editor , the swc it's work

[ghost]

@timneutkens

hi ， i submit an issues #31077

a small demo https://github.com/find456789/tmp_nextjs12_swc

[DerekGathright-minted]

Got this when running rm -rf .next && yarn run next build

warn  - SWC minify beta enabled. https://nextjs.org/docs/messages/swc-minify-enabled
info  - Checking validity of types
info  - Creating an optimized production build
Failed to compile.

static/chunks/172.9d1c62da4237cd57.js from Terser
error: Legacy octal escape is not permitted in strict mode

      |
47555 |     'nbsp': '\240'
      |              ^^

Caused by:
    0: failed to parse input file
    1: error was recoverable, but proceeding would result in wrong codegen
    2: Syntax Error
Error: error: Legacy octal escape is not permitted in strict mode

      |
47555 |     'nbsp': '\240'
      |              ^^

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


> Build failed because of webpack errors
error Command failed with exit code 1.

[timneutkens]

I've together a small reproduction in the SWC playground: https://play.swc.rs/?version=1.2.124&code=H4sIAAAAAAAAA0vOzysuUUhUsFWo5lIAAvW8pOICdSsF9RgjEwN1rloABfhT8yAAAAA%3D&config=H4sIAAAAAAAAA0WMTQrEIAxG75K1286id5hDBCctFv9IUhgR714tlu7C915ehUMsrBUyshCPS0pU%2FMMKZAOKZZcVTNf6tKEXagYUeScdiiyd%2BZSEJjUQXHRbGSWbQmYSeRHG3T9m66GQfucYKmjJdAc%2F0N7G%2FHPynaLySe0Cj9ke9LUAAAA%3D

[kdy1]

I tried working on this but found that it's a correct error.

[timneutkens]

I think the main thing here is that it might not be marked as strict? 🤔 E.g. in the playground I didn't "use strict", it's implicit for esmodules right?

[kdy1]

Yeah I think it's the cause. All module codes are in strict mode and seems like swc parsed it as a module.
Should we parse it as a script?

[sokra]

webpack sets a flag on javascript assets whether they are in module or script mode. In next.js they are all in script mode currently.
Yes we should parse it as script. Maybe some node_modules uses with() {}^^

[sudo-jaa]

Just upgraded our project to "next": "12.0.1", in the interest of trying out some new features. We're currently hitting a recursion limit in the minifier so swc panics and the build aborts.

This is probably telling of a problem somewhere in our code more so than an issue with swc's minifier, but i'd be quite interested in debugging it. Is there a way to enable swc's debug feature in cargo from the next CLI?

info  - Creating an optimized production build .thread '<unnamed>' panicked at 'Infinite loop detected (current pass = 31)', /Users/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/swc_ecma_minifier-0.46.2/src/compress/mod.rs:261:13
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
fatal runtime error: failed to initiate panic, error 5
[1]    21082 abort      next build

That said, the source Rust that i've found in swc for this part of the minifier says the recursion panic is temporary, so now i'm not sure what to believe!

        // Temporary
        if self.pass > 30 {
            panic!("Infinite loop detected (current pass = {})", self.pass)
        }

Otherwise great job with next 12, it looks awesome.

[yussan]

yups ,me too @sudo-jaa , same case

[itsmitul]

Facing this exact issue

[timneutkens]

@yussan @itsmitul as said please provide a reproduction of your particular code 🙏

[itsmitul]

@yussan @itsmitul as said please provide a reproduction of your particular code pray

import "firebase/auth";

This is what causing the problem for me

[jakst]

importing hellojs@1.19.5 causes this issue for us. Next v12.0.3.

[mrtnbroder]

Hi there! Good job with Next.js 12! It looks great.

I've tried out the swcMinify: true option today and ran into an issue which does not happen with swcMinify: false.

The produced outcome and where an error is thrown (in the browser, not when running next build!):

...if(Q){if(L)const b=window.setInterval(f...

as you can see, it tries to assign a variable to a const right after an if (L) clause. This throws an error in the browser.

The code comes from this package (which has 150k downloads a week) right here: https://github.com/JustFly1984/react-google-maps-api/blob/7e807a6b9115766609c667bef783eb01f706f4c7/packages/react-google-maps-api/src/LoadScript.tsx#L106-L126

I hope this is the right thread to discuss this issue.

[timneutkens]

Thanks! We'll investigate it further 👍

[kdy1]

Thank you for trying swc minifier!
Fixed on upstream (swc-project/swc#2570) and made PR to fix it (#30540)

[JustFly1984]

@mrtnbroder the react-google-maps-api package is unmaintained for more than 3 years. Please switch to @react-google-maps/api instead.

[florianajir]

@JustFly1984 what about the official @googlemaps/react-wrapper ? is it supported ?

[robheittman]

Similar to the above. When opting in to swcMinify: true on an app using some https://material-ui.com/ components ("@mui/material": "^5.0.2"), swcMinify attempted to reassign a minified constant which created a syntax error. On certain pages, apparently depending on JS chunk load order, this had the effect of disabling React completely and leaving just the SSR rendition of the page with all interaction disabled, so for now we've had to turn swcMinify back off again.

But can confirm that swcMinify is super fast! And SWC in dev mode is absolutely blazin'! Great job

[kdy1]

I'm working to fix minifier at swc-project/swc#2597 and I decided to postpone fix for this because material-ui is not a bundle.
I can't know which component is problematic.

There is no dist or bundle.

[loukmane-issa]

@kdy1 do you have any plan for material UI? I'm having some very strange behavior where the theme is not applied correctly and gets corrected after. Is there any way to run the minified code locally, so I can try to debug it and point out the problem?

[kdy1]

You can do swcMinify: true in next.config.js, rm -rf .next && yarn build && yarn start and look at the browser.
I have a plan to fix it, but finding a cause from minified source code takes lots of time, so it would be really nice if you help.

[kdy1]

I'll work on mui issue

[kdy1]

Can you create a repro case? I failed to find the bug

[ivantm]

I've come across an issue where Emotion's Global component does not unmount as expected when swcMinify is set to true in next.config.js. I've created a repository with a npx-create-app initialised repo with minimal reproduction case and description of the issue.

[ivantm]

Just checked again, and updating from next.js 12.0.1 to 12.0.2 fixed this issue. Thanks 👍

[clementroche]

Hi, i've got an error using swcMinify: true with gsap/SplitText. I used gzipped gsap-bonus "gsap": "./lib/gsap-bonus.tgz" in package.json. Only live version has the issue, dev version is fine.
I removed swcMinify and it works.

[tablufc88]

Same here with the gsap ScrollTrigger plugin

[gpng]

Hi, I'm getting an error with swcMinify: true with deck.gl, using NextJS 12.0.2

I've created a minimal repro repo here https://github.com/gpng/next12-deckgl

This is the deployment using swcMinify: true https://next12-deckgl-6bjjaphof-geraldpng.vercel.app/
And without https://next12-deckgl-42nlm2h21-geraldpng.vercel.app/

Without swcMinify, the page is interactive and you can see a single orange circle if you scroll out.

---

On another site using deck.gl, I ran into a different set of errors

I can't provide a repro repo here as it is closed source, and the minimal repro I attempted results in the error above.

Using swcMinify: true https://greatescape-webapp-flights-cl7r03c32-great-escape.vercel.app/map?passengers=1&returnDate=2022-02-23&origins=city%3ASIN&currency=SGD&departDate=2022-02-09
And without https://greatescape-webapp-flights-qi2whzbx6-great-escape.vercel.app/map?departDate=2022-02-09&returnDate=2022-02-23&origins=city%3ASIN&currency=SGD&passengers=1

If working properly, you should be able to see arcs connecting each circle on the map

[kdy1]

I tried to reproduce it, but https://github.com/gpng/next12-deckgl/blob/d3a10007d5eda3166e6fa1fafecfab2bf2f9c9df/package.json does not contain any dependency and it seems like a project generated by create-next-app without any additional commit.

[gpng]

sorry forgot to update the repo, its pushed now

[amadeus]

I'm seeing an issue where a node dep is being transpiled incorrectly. Build works fine, but in browser I get this error:

Uncaught SyntaxError: Unexpected template string

The code from the node_module looks something like this:

import { LENGTH_1, LENGTH_32, LENGTH_16, LENGTH_256 } from "./length";
export const AES_LENGTH = LENGTH_256;
export const HMAC_LENGTH = LENGTH_256;
export const AES_BROWSER_ALGO = "AES-CBC";
export const HMAC_BROWSER_ALGO = `SHA-${AES_LENGTH}`;
export const HMAC_BROWSER = "HMAC";
export const SHA256_BROWSER_ALGO = "SHA-256";
export const SHA512_BROWSER_ALGO = "SHA-512";
export const AES_NODE_ALGO = `aes-${AES_LENGTH}-cbc`;
export const HMAC_NODE_ALGO = `sha${HMAC_LENGTH}`;
export const SHA256_NODE_ALGO = "sha256";
export const SHA512_NODE_ALGO = "sha512";
export const RIPEMD160_NODE_ALGO = "ripemd160";
export const PREFIX_LENGTH = LENGTH_1;
export const KEY_LENGTH = LENGTH_32;
export const IV_LENGTH = LENGTH_16;
export const MAC_LENGTH = LENGTH_32;
//# sourceMappingURL=default.js.map

And in the transpilation, part if it ends up looking like this:

const he=256,ie=he,je=he,ke="AES-CBC",le=`SHA-${ie}`,me="HMAC"`aes-${ie}-cbc`,`sha${je}`;

Notice the very last item, it's just after the last ,, there's a template string? It's like it drops the assignment

[raulfdm]

Reproduction: https://github.com/devraul/nextjs-draft-js-swc-minify-bug

[raulfdm]

I saw that Next 12.0.3 was released and this error no longer occurs.

https://github.com/devraul/nextjs-draft-js-swc-minify-bug/tree/next-12-0-3

[milanbgd011]

INFO: When swcMinify: false is active, then npm run build works 100%, all perfect.

Tried to make as precise and complete repro example, in respect to Tim and his team. You guys are awesome!

Created issue on "ToastUI/Editor" repo with link to this comment: nhn/tui.editor#1993

ERROR Infinite loop detected :

$ RUST_BACKTRACE=full npm run build

> up-nextnnnn@0.1.0 build
> next build

info  - Loaded env from /Users/xxx/a/next12/up-nextN12/.env.local
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

warn  - SWC minify beta enabled. https://nextjs.org/docs/messages/swc-minify-enabled
info  - Checking validity of types  
error - ESLint version 8.1.0 is not yet supported. Please downgrade to version 7 for the meantime: npm uninstall eslint && npm install --save-dev eslint@"<8.0.0"
(node:53208) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
info  - Creating an optimized production build ...thread '<unnamed>' panicked at 'Infinite loop detected (current pass = 31)', /Users/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/swc_ecma_minifier-0.47.1/src/compress/mod.rs:261:13
stack backtrace:
   0:        0x12ce32ae8 - <std::sys_common::backtrace::_print::DisplayBacktrace as core::fmt::Display>::fmt::h9f48360f76571cd0
   1:        0x12ce4ff0c - core::fmt::write::ha504d799b94a55bf
   2:        0x12ce2e9d0 - std::io::Write::write_fmt::hde46313a30f4d348
   3:        0x12ce3437c - std::panicking::default_hook::{{closure}}::h746eef9273cd1e58
   4:        0x12ce33f24 - std::panicking::default_hook::h3c4997c0839159a6
   5:        0x12ce349bc - std::panicking::rust_panic_with_hook::hbf0894661b421e73
   6:        0x12ce34508 - std::panicking::begin_panic_handler::{{closure}}::h5e00e602cee59280
   7:        0x12ce32f60 - std::sys_common::backtrace::__rust_end_short_backtrace::h9aada038cf96ea98
   8:        0x12ce34470 - _rust_begin_unwind
   9:        0x12cea0254 - std::panicking::begin_panic_fmt::h4ae5eb000c93aa8d
  10:        0x12be6b59c - <swc_ecma_minifier::compress::Compressor<M> as swc_ecma_visit::VisitMut>::visit_mut_module::h5aa36a2a77b957bc
  11:        0x12beab574 - swc_ecma_minifier::optimize::h4cef7e1e12ec0928
  12:        0x12bed73cc - swc::Compiler::minify::ha72c8a41118aa546
  13:        0x12ba5ac70 - <next_swc::minify::MinifyTask as napi::task::Task>::compute::h5e852b6a63b7d85d
  14:        0x12ba4f954 - napi::async_work::execute::h34bc1e8430463ae0
  15:        0x1009afecc - _worker
  16:        0x1a8e214ec - _pthread_from_mach_thread_np
fatal runtime error: failed to initiate panic, error 5
[1]    53195 abort      RUST_BACKTRACE=full npm run build

HOW TO REPRODUCE:

1. create new next app with npx create-next-app@latest --ts and install these

    "@toast-ui/editor": "3.1.1",
    "@toast-ui/react-editor": "3.1.1",

2. enable "swcMinify" in next.config.js

module.exports = { swcMinify: true }

3. on index page add to imports

const EditorDynamic = dynamic(
  () => import('editordynamic'),
  { ssr: false },
);

4. on index page add on proper place in "HTML" this

<EditorDynamic />

5. create page editordynamic with these contents

import React, { useRef } from 'react';
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';

export default function EditorDynamicComponent(props:any): React.ReactElement {
  const editorRef: any = useRef(null);

  return (
    <>
      <Editor/>
    </>
  );
}

6. execute npm run build and we have the error!

FULL PACKAGE.JSON CONTENTS IF NEEDED:

{
  "name": "up-nextnnnn",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "next start",
    "build": "next build",
    "dev": "PORT=3001 next dev",
    "devinspect": "PORT=3001 NODE_OPTIONS='--inspect' next dev",
    "lint": "next lint",
    "huskyinstall": "husky install",
    "precommit:jest": "jest --bail",
    "precommit:eslint": "eslint '**/*.{js,jsx,ts,tsx}' --fix --quiet",
    "precommit:tsc": "tsc --pretty --noEmit",
    "testall": "tsc --pretty --noEmit && eslint '**/*.{js,jsx,ts,tsx}' --fix --quiet && jest --bail",
    "test": "jest --watch",
    "testbail": "jest --bail",
    "check": "npm-check --update --save-exact",
    "checkglobal": "npm-check --global --update --save-exact",
    "nodegypfix": "brew install pixman cairo pango"
  },
  "dependencies": {
    "@adobe/react-spectrum": "3.14.1",
    "@ant-design/icons": "4.7.0",
    "@bull-board/express": "3.7.0",
    "@sentry/nextjs": "6.14.0",
    "@tailwindcss/forms": "0.4.0-alpha.1",
    "@tailwindcss/typography": "0.5.0-alpha.2",
    "@toast-ui/editor": "3.1.1",
    "@toast-ui/react-editor": "3.1.1",
    "@xstate/immer": "0.2.0",
    "@xstate/react": "1.6.2",
    "ajv": "8.6.3",
    "antd": "4.16.13",
    "assign-deep": "1.0.1",
    "aws-sdk": "2.1022.0",
    "axios": "0.24.0",
    "blurhash": "1.1.4",
    "bullmq": "1.51.3",
    "canvas": "2.8.0",
    "chalk": "4.1.2",
    "date-fns": "2.25.0",
    "deep-object-diff": "1.1.0",
    "firebase": "9.3.0",
    "flatted": "3.2.2",
    "formidable": "2.0.1",
    "formik": "2.2.9",
    "framer-motion": "5.2.0",
    "get-value": "3.0.1",
    "immer": "9.0.6",
    "insert-css": "2.0.0",
    "ioredis": "4.28.0",
    "jsonwebtoken": "8.5.1",
    "merge-value": "1.0.0",
    "moment": "2.29.1",
    "nanoid": "3.1.30",
    "next": "12.0.2",
    "next-mdx-remote": "3.0.7",
    "next-seo": "4.28.1",
    "pouchdb": "7.2.2",
    "rc-picker": "2.5.19",
    "react": "17.0.2",
    "react-aria": "3.10.0",
    "react-datepicker": "4.3.0",
    "react-dom": "17.0.2",
    "react-hotkeys-hook": "3.4.4",
    "react-stately": "3.9.0",
    "recharts": "2.1.6",
    "swiper": "7.2.0",
    "swr": "1.0.1",
    "xstate": "4.26.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "5.15.0",
    "@testing-library/react": "12.1.2",
    "@types/bull": "3.15.5",
    "@types/jest": "27.0.2",
    "@types/node": "16.11.6",
    "@types/react": "17.0.34",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "autoprefixer": "10.4.0",
    "critters": "0.0.14",
    "eslint": "8.1.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-next": "12.0.2",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.26.1",
    "eslint-plugin-react-hooks": "4.2.0",
    "fsevents": "2.3.2",
    "husky": "7.0.4",
    "jest": "27.3.1",
    "npm-check": "5.9.2",
    "postcss": "8.3.11",
    "prettier": "2.4.1",
    "prettier-eslint": "13.0.0",
    "tailwindcss": "3.0.0-alpha.1",
    "ts-jest": "27.0.7",
    "typescript": "4.4.4"
  }
}

FULL NEXT.CONFIG.JSON IF NEEDED

/** @type {import('next').NextConfig} */

const { withSentryConfig } = require('@sentry/nextjs');

// SENTRY CONFIGURATION
const SentryWebpackPluginOptions = {
  silent: false, // Suppresses all logs
  urlPrefix: '~/_next', // how artifact in sourcemap starts (should be same with include after "urlPrefix")
  include: '.next', // how real path in next app starts (should be same with urlPrefix after "include")
  ignore: ['node_modules'], // no sourcemaps for node_modules please
  release: process.env.RELEASE_VERSION,
};

// https://securityheaders.com
const securityHeadersRoot = [
  {
    key: 'Content-Security-Policy',
    value: `
      default-src 'self';
      script-src 'self' 'unsafe-inline' 'unsafe-eval' *.unpkg.com;
      child-src *.google.com;
      frame-src 'self';
      style-src 'self' 'unsafe-inline' *.cloudflare.com *.googleapis.com *.jsdelivr.net *.unpkg.com;
      img-src * blob: data:;
      media-src 'none';
      connect-src *;
      font-src 'self' data: *.gstatic.com;
    `.replace(/\n/g, ''),
  },
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN',
  },
  {
    key: 'Permissions-Policy',
    value: 'geolocation=()',
  },
];

const securityHeadersAdmin = [
  {
    key: 'Content-Security-Policy',
    value: `
      default-src 'self';
      script-src 'self' 'unsafe-inline' 'unsafe-eval'  *.unpkg.com;
      child-src *.google.com;
      frame-src 'self';
      style-src 'self' 'unsafe-inline' *.cloudflare.com *.googleapis.com *.jsdelivr.net  *.unpkg.com;
      img-src * blob: data:;
      media-src 'none';
      connect-src *;
      font-src 'self' data: *.gstatic.com;
    `.replace(/\n/g, ''),
  },
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN',
  },
  {
    key: 'Permissions-Policy',
    value: 'geolocation=()',
  },
];

const finalExports = {
  async headers() {
    return [
      {
        source: '/',
        headers: securityHeadersRoot,
      },
      {
        source: '/:path*',
        headers: securityHeadersRoot,
      },
      {
        source: '/admin/:path*',
        headers: securityHeadersAdmin,
      },
    ];
  },
  // CONFIGURATION
  // CONFIGURATION
  // CONFIGURATION
  //
  // reactStrictMode: true, // IMPORTANT: BREAKS ANTD COMPONENTS IN DEV, DISABLE WHEN DEVELOPING ANTD RELATED STUFF, development mode only warn of React current and future stuff
  swcMinify: true, // IMPORTANT: BREAKS BECAUSE OF LOOPING IMPORTS JS minification 7x faster compared to Terser
  experimental: {
    optimizeCss: true, // inline critical CSS to the <head> of the page
    // START: DISABLED UNTIL REACT 18 STABILIZES, WE NEED BIG REFACTOR HERE
    // reactRoot: true,
    // concurrentFeatures: true, // server-side Suspense, SSR streaming, SSR will use the same strict runtime as Middleware
    // serverComponents: true, // data fetching at the component level, no more getXXXprops needed
    // END: DISABLED UNTIL REACT 18 STABILIZES, WE NEED BIG REFACTOR HERE
  },
};

module.exports =
  process.env.ENABLE_SOURCEMAP_UPLOAD_TO_SENTRY_DROPLET === '1'
    ? withSentryConfig(finalExports, SentryWebpackPluginOptions)
    : finalExports;

[kdy1]

I checked the version to see if this is something I should work on.

(Side note: the latest version of swc_ecma_minifier is 0.97.1, https://crates.io/crates/swc_ecma_minifier/0.97.1)

For first, the version of swc_ecma_minifier in next.js@12.1.1 is 0.89.2 (

next.js/packages/next-swc/Cargo.lock

Lines 2169 to 2170 in a00268e

	name = "swc_ecma_minifier"
	version = "0.89.2"

)

and it's https://github.com/swc-project/swc/blob/fb421b8cc3bbaa64d080c19f9c2946ab0d488cac/crates/swc_ecma_minifier/Cargo.toml

So patches starting from swc-project/swc@f7b212b are not applied. There were many bugfixes, but I'll try it locally as there's no patch (explicitly) targetting react-ace.

I'll get back soon with the test result

[kdy1]

I tested it locally, and at least the infinite loop issue for https://github.com/arnemahl/swc-minify-react-ace-loading-bug is fixed.
@danr-za Can you create a repro, if your project is different from it?

[kdy1]

Ah, infinitely loading? I thought you were talking about a crash with a message for infinite loop
I'll try it soon...

[kdy1]

Fixed with swc-project/swc#4183
Thank you for reporting!

[ghost]

@kdy1 Thanks for checking and fixing it up so quickly!

[milanbgd011]

When used without "swcMInify: true", all works.

REPRODUCTION

1. clean Next12, enable "swcMinify:true" in next config
2. install "npm i ajv"
3. put anywhere "import Ajv from 'ajv'; const ajv = new Ajv();` (needs to be client hydrated, not SSR execution)

ERROR (BROWSER CONSOLE)

Uncaught SyntaxError: Missing initializer in const declaration

EXPLANATION WHAT IS THE PROBLEM

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const

[chrisrhymes]

I have just updated a next js site to 12.0.8 and I still get this same error when I set swcMinify: true in the next.config.js. The error also goes away when I set swcMinify: false.

Uncaught SyntaxError: Missing initializer in const declaration

This is where I am defining the constant. I wondered if it was because the return value is a function? I tried returning an empty string when the if isn't true but that didn't resolve the issue.

const hideLabel = props => {
  if(props.labelHidden === true) {
    return VisuallyHidden;
  }
}

[kdy1]

I expect this to be fixed. Can you try latest canaray?

[stefanus-ricky]

I can confirm this issue from react-tooltip
ReactTooltip/react-tooltip#972

Turning off swcMinify in next config fix my issue. Some versions for those who want to try reproduce the issue
"react-tooltip": "^5.11.2",
"next": "13.1.6",
"react": "18.2.0",
Edit: sorry, seems this issue fixed on newest next version

[ratheo]

I'm running into a minification error with v. 13.4.3 and 13.4.4-canary.3 of next.js
In the file node_modules/next/dist/shared/lib/router/router.js the line const { url , as , options , key } = state; gets transpiled into var n, {url: a, _$as: o, options: i, key: u} = r;
This means that as always becomes undefined because it gets destructured as _$as

[bugzpodder]

found an issue with next@12.3.4 and handsontable@v12. fixed in next@13

[avitorio]

Hello,
My package is throwing an error with Next.js when swcMinify isn't set to false.
I create a repo reproducing the error and explaining what's happening:

https://github.com/avitorio/swcminify-debug

Any help is appreciated. Hopefully this helps fix this bug. Let me know if you need any more clarification.

[kdy1]

I started working on this at swc-project/swc#7615

[avitorio]

Thank you so much!

[JamesWatling]

Without any steps to replicate, we changed our next js project to use swcMinify: true

Next 12

We are using direct uploads to aws s3, and for whatever reason we started getting a mismatch on the md5 sum that the library generated vs what amazon expected, after ruling out all the dependencies we finally rolled back this change and it all is resolved!

[agusterodin]

I am using a library called Plotly to render WebGL plots. I noticed that as of Next.js 13.5.4, Plotly now displays an error saying WebGL is not supported. My browser absolutely supports WebGL (Chrome on MacOS). Switching back to Next.js 13.5.3 or setting swcMinify: false in next.config.js fixes the issue. This is likely an issue with SWC minification.

Production build behavior in Next 13.5.3 or setting swcMinify: false

Production build behavior in Next 13.5.4+ when setting swcMinify: true

Minimal reproduction
https://github.com/agusterodin/next-plotly-webgl-error-reproduction

[agusterodin]

^ follow up: fixed in latest version of Next!

[billnbell2]

You can set parameters to see if it fixes the issue?
https://swc.rs/docs/configuration/minification

[BearCooder]

people using nextJs having problems with taquito and beacon package. It’s mainly because the compiler swc has a minify option that breaks a handful taquito functions (also other libraries). People have bypassed it by disabling minify on their server as temporary fix. But when can we expect a real fix?

[BearCooder]

See the errors after creating next app and adding the libraries

./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'style' is not exported from 'solid-js/web' (imported as 'style').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'className' is not exported from 'solid-js/web' (imported as 'className').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'style' is not exported from 'solid-js/web' (imported as 'style').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'style' is not exported from 'solid-js/web' (imported as 'style').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'setAttribute' is not exported from 'solid-js/web' (imported as 'setAttribute').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/home/Programming/tezos-nextjs-template/node_modules/pino/lib'

Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/logger/dist/cjs/index.js
./node_modules/@walletconnect/sign-client/dist/index.es.js
./node_modules/@airgap/beacon-transport-walletconnect/dist/esm/communication-client/WalletConnectCommunicationClient.js
./node_modules/@airgap/beacon-transport-walletconnect/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/dapp-client/DAppClient.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx
 ⚠ ./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'className' is not exported from 'solid-js/web' (imported as 'className').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'style' is not exported from 'solid-js/web' (imported as 'style').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'className' is not exported from 'solid-js/web' (imported as 'className').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'setAttribute' is not exported from 'solid-js/web' (imported as 'setAttribute').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'className' is not exported from 'solid-js/web' (imported as 'className').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'setAttribute' is not exported from 'solid-js/web' (imported as 'setAttribute').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'className' is not exported from 'solid-js/web' (imported as 'className').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'style' is not exported from 'solid-js/web' (imported as 'style').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'className' is not exported from 'solid-js/web' (imported as 'className').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'style' is not exported from 'solid-js/web' (imported as 'style').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'style' is not exported from 'solid-js/web' (imported as 'style').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'setAttribute' is not exported from 'solid-js/web' (imported as 'setAttribute').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'effect' is not exported from 'solid-js/web' (imported as 'effect').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

./node_modules/pino/lib/tools.js
Module not found: Can't resolve 'pino-pretty' in '/home/Programming/tezos-nextjs-template/node_modules/pino/lib'

Import trace for requested module:
./node_modules/pino/lib/tools.js
./node_modules/pino/pino.js
./node_modules/@walletconnect/logger/dist/cjs/index.js
./node_modules/@walletconnect/sign-client/dist/index.es.js
./node_modules/@airgap/beacon-transport-walletconnect/dist/esm/communication-client/WalletConnectCommunicationClient.js
./node_modules/@airgap/beacon-transport-walletconnect/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/dapp-client/DAppClient.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./Wallet.ts
./app/page.tsx

[billnbell2]

Is anyone using SWC for nextJS @ 14.0.4 with JoyRide? What version of JoyRide?

I get a ton of errors with SWC enabled and "react-joyride": "2.5.5",

[billnbell2]

Has anyone tried it on Nextjs 14?

[porenes]

nextjs 14.2.2 , @nivo/bar and @nivo/line 0.85.1 are the only 2 new packages that break my build.
Using swcMinify: false fix the issue.
I will try regularly to re-enable.

[kdy1]

Can you provide a reproduction? It's very hard to investigate an issue or verify the fix without a repro.

[porenes]

Would my package.json be helpfull ?

  "name": "app.f4r.xyz",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@farcaster/core": "^0.13.3",
    "@farcaster/hub-nodejs": "^0.11.8",
    "@farcaster/hub-web": "latest",
    "@heroicons/react": "^2.1.3",
    "@mod-protocol/core": "^0.2.1",
    "@mod-protocol/farcaster": "^0.2.0",
    "@mod-protocol/react-editor": "^0.1.0",
    "@mod-protocol/react-ui-shadcn": "^0.3.1",
    "@neynar/nodejs-sdk": "^1.13.1",
    "@nivo/bar": "^0.85.1",
    "@nivo/line": "^0.85.1",
    "@noble/ed25519": "^2.1.0",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@supabase/ssr": "^0.1.0",
    "@supabase/supabase-js": "^2.42.5",
    "@tanstack/react-query": "^5.28.9",
    "axios": "^1.5.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "connectkit": "^1.7.3",
    "lucide-react": "^0.364.0",
    "next": "^14.0.0",
    "react": "^18",
    "react-dom": "^18",
    "react-spinners": "^0.13.8",
    "sonner": "^1.4.41",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7",
    "viem": "latest",
    "wagmi": "latest"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18.2.73",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "encoding": "^0.1.13",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "pino-pretty": "^10.2.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.4.0"
  }
}

[porenes]

The issue is not related to Nivo sorry 🙈

It's most probably another change, narrowing it down now

[kdy1]

Nope. I need a full reproduction

[wojtekmaj]

SWC breaks when importing ESM workers:

static/media/pdf.worker.1f09ce21.mjs from Terser
  x 'import', and 'export' cannot be used outside of module code
       ,-[56104:1]
 56104 | const pdfjsBuild = "0cec64437";
 56105 | 
 56106 | var __webpack_exports__WorkerMessageHandler = __webpack_exports__.WorkerMessageHandler;
 56107 | export { __webpack_exports__WorkerMessageHandler as WorkerMessageHandler };
       : ^^^^^^
 56108 | 
 56109 | //# sourceMappingURL=pdf.worker.mjs.map
       `----

Setting

  swcMinify: false,

fixes the issue.

[kdy1]

Can you provide a minimal reproduction?

[wojtekmaj]

Sure!

A bit of a background, React-PDF users are struggling with making v9 work with Next.js. Notable difference between v8 and v9 is that pdfjs-dist now ships ESM modules, including ESM worker. Issues raised:

• PDFjs-dist error wojtekmaj/react-pdf#1822
• Production build fails on Next.js wojtekmaj/react-pdf#1824

Minimal repro to get the same error:

Download & run -> repro.zip

or walk with me step by step:

yarn create next-app
cd my-app
yarn add pdfjs-dist
echo "console.log(new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url).toString());" >> app/page.tsx
yarn build

results with:

Failed to compile.

./app/page.tsx
Module not found: ESM packages (pdfjs-dist/build/pdf.worker.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

🫠 Not there yet. Adding this bit to Next.js config to make it work again:

  experimental: {
    esmExternals: 'loose',
  }

and

yarn build

results with:

Failed to compile.

static/media/pdf.worker.1f09ce21.mjs from Terser
  x 'import', and 'export' cannot be used outside of module code
       ,-[56104:1]
 56104 | const pdfjsBuild = "0cec64437";
 56105 | 
 56106 | var __webpack_exports__WorkerMessageHandler = __webpack_exports__.WorkerMessageHandler;
 56107 | export { __webpack_exports__WorkerMessageHandler as WorkerMessageHandler };
       : ^^^^^^
 56108 | 
 56109 | //# sourceMappingURL=pdf.worker.mjs.map
       `----

Caused by:
    0: failed to parse input file
    1: Syntax Error
Error: 
  x 'import', and 'export' cannot be used outside of module code
       ,-[56104:1]
 56104 | const pdfjsBuild = "0cec64437";
 56105 | 
 56106 | var __webpack_exports__WorkerMessageHandler = __webpack_exports__.WorkerMessageHandler;
 56107 | export { __webpack_exports__WorkerMessageHandler as WorkerMessageHandler };
       : ^^^^^^
 56108 | 
 56109 | //# sourceMappingURL=pdf.worker.mjs.map
       `----

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


> Build failed because of webpack errors

[kdy1]

#66817 will fix it

[Sal0ID]

Can someone help me out? github stackoverflow?

[taitruong007]

I ran into the error TypeError: r is not a function when using: next: 14.2.13 , agora-rtm-sdk: <2.0.0.

Agora RTM implementation:

  const [client, setClient] = useState<RtmClient>();
  useEffect(() => {
    const initSdk = async () => {
      // Ref: https://github.com/AgoraIO-Extensions/agora-rtc-react/issues/181
      const AgoraRTM = (await import('agora-rtm-sdk')).default;
      const rtmClient = AgoraRTM.createInstance(appId, {
        logFilter: AgoraRTM.LOG_FILTER_OFF,
      });
      setClient(rtmClient);
    };
    if (!client) {
      initSdk();
    }
  }, [appId, client]);

Setting swcMinify: false fixes the issue.
There might be the same error at: #68665

[SoftwareIK]

@kdy1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') on clicking of Next button on the react-joyride's tooltip. I was using react-joyride: "react-joyride": "2.3.2", and nextjs: "12.3.2"

On local it was working fine but causing the above error in production environment.

Setting swcMinify to false, fixed the issue. I believe this is the issue :

The problem is with the SWC minification using the swcMinify config. It tries to optimize too much, leading to the offset variable not being used before it is declared

But But i am not sure if changing that is a good idea, since I would have to do that in production. Can it cause any complications?

[kdy1]

nextjs@12 is outdated.

[SoftwareIK]

@kdy1 Do you mean for the above version swc minify is not stable(by default disabled)? If that is the case, it seems reasonable to set it to false, until the Next js version is updated in the codebase. But then again, we can not compromise with the rendering time, or the build time. What do you suggest? Or if there is any missing piece, let me know.

[kdy1]

SWC minifier bundled in next@12 is not stable, so I don't recommend enabling it. At the moment it's stable and that's why we removed the option to disable SWC minifier for next@15, but for 12, I'd recommend disabling it.

[billnbell3]

have the same issue, and we decided to remove Joyride because we do not want to turn off SWC.

[kdy1]

What's the next.js version of your project?