SWC minify feedback #30237

timneutkens · 2021-10-24T18:33:46Z

timneutkens
Oct 24, 2021
Maintainer

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 · 2021-10-29T07:59:52Z

torjusb Oct 29, 2021

@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 · 2021-10-31T04:35:24Z

yussan Oct 31, 2021

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

Giayychan · 2021-11-04T05:09:18Z

Giayychan Nov 4, 2021

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/git.luolix.top-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 · 2021-11-06T09:25:04Z

ghost Nov 6, 2021

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

ghost · 2021-11-06T09:37:07Z

ghost Nov 6, 2021

@timneutkens

hi ， i submit an issues #31077

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

DerekGathright-minted · 2021-10-27T06:58:51Z

DerekGathright-minted
Oct 27, 2021

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.

6 replies

timneutkens Jan 19, 2022
Maintainer Author

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 Jan 20, 2022
Maintainer

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

timneutkens Jan 20, 2022
Maintainer Author

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 Jan 20, 2022
Maintainer

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 Jan 20, 2022
Maintainer

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 · 2021-10-27T10:55:02Z

sudo-jaa
Oct 27, 2021

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/git.luolix.top-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.

6 replies

yussan Oct 31, 2021

yups ,me too @sudo-jaa , same case

itsmitul Nov 3, 2021

Facing this exact issue

timneutkens Nov 4, 2021
Maintainer Author

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

itsmitul Nov 6, 2021

@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 Nov 17, 2021

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

mrtnbroder · 2021-10-27T15:04:40Z

mrtnbroder
Oct 27, 2021

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.

4 replies

timneutkens Oct 28, 2021
Maintainer Author

Thanks! We'll investigate it further 👍

kdy1 Oct 28, 2021
Maintainer

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

JustFly1984 Nov 8, 2021

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

florianajir Feb 24, 2022

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

robheittman · 2021-10-27T16:58:34Z

robheittman
Oct 27, 2021

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

6 replies

kdy1 Oct 31, 2021
Maintainer

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 Feb 7, 2022

@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 Feb 7, 2022
Maintainer

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 Feb 7, 2022
Maintainer

I'll work on mui issue

kdy1 Feb 10, 2022
Maintainer

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

ivantm · 2021-10-29T04:17:18Z

ivantm
Oct 29, 2021

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.

1 reply

ivantm Nov 8, 2021

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

clementroche · 2021-10-31T15:40:58Z

clementroche
Oct 31, 2021

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.

1 reply

tablufc88 Dec 14, 2021

Same here with the gsap ScrollTrigger plugin

gpng · 2021-11-01T10:04:47Z

gpng
Nov 1, 2021

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

2 replies

kdy1 Nov 2, 2021
Maintainer

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 Nov 2, 2021

sorry forgot to update the repo, its pushed now

amadeus · 2021-11-04T06:26:23Z

amadeus
Nov 4, 2021

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

0 replies

raulfdm · 2021-11-06T06:41:02Z

raulfdm Nov 6, 2021

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

raulfdm · 2021-11-06T06:42:50Z

raulfdm Nov 6, 2021

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 · 2021-11-05T11:08:11Z

milanbgd011
Nov 5, 2021

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/git.luolix.top-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:

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",

enable "swcMinify" in next.config.js

module.exports = { swcMinify: true }

on index page add to imports

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

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

<EditorDynamic />

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/>
    </>
  );
}

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;

16 replies

kdy1 Mar 29, 2022
Maintainer

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 Mar 29, 2022
Maintainer

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 Mar 29, 2022
Maintainer

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

kdy1 Mar 29, 2022
Maintainer

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

ghost Mar 29, 2022

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

milanbgd011 · 2021-11-06T23:27:09Z

milanbgd011
Nov 6, 2021

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

REPRODUCTION

clean Next12, enable "swcMinify:true" in next config
install "npm i ajv"
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

2 replies

chrisrhymes Jan 18, 2022

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 Jan 21, 2022
Maintainer

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

stefanus-ricky · 2023-05-11T16:47:17Z

stefanus-ricky
May 11, 2023

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

0 replies

ratheo · 2023-05-23T14:25:44Z

ratheo
May 23, 2023

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

0 replies

bugzpodder · 2023-05-23T19:11:37Z

bugzpodder
May 23, 2023

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

0 replies

avitorio · 2023-06-27T02:38:42Z

avitorio
Jun 27, 2023

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.

2 replies

kdy1 Jul 3, 2023
Maintainer

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

avitorio Jul 3, 2023

Thank you so much!

JamesWatling · 2023-09-15T17:25:26Z

JamesWatling
Sep 15, 2023

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!

0 replies

agusterodin · 2023-10-20T19:48:45Z

agusterodin
Oct 20, 2023

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

1 reply

agusterodin Oct 30, 2023

^ follow up: fixed in latest version of Next!

billnbell2 · 2023-10-30T05:41:47Z

billnbell2
Oct 30, 2023

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

0 replies

BearCooder · 2024-01-09T17:22:35Z

BearCooder
Jan 9, 2024

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?

1 reply

BearCooder Jan 9, 2024

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 · 2024-01-23T06:44:42Z

billnbell2
Jan 23, 2024

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",

1 reply

billnbell2 Mar 16, 2024

Has anyone tried it on Nextjs 14?

porenes · 2024-04-23T20:32:26Z

porenes
Apr 23, 2024

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.

4 replies

kdy1 Apr 24, 2024
Maintainer

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

porenes Apr 24, 2024

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 Apr 24, 2024

The issue is not related to Nivo sorry 🙈

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

kdy1 Jun 11, 2024
Maintainer

Nope. I need a full reproduction

wojtekmaj · 2024-06-10T22:30:45Z

wojtekmaj
Jun 10, 2024

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.

3 replies

kdy1 Jun 11, 2024
Maintainer

Can you provide a minimal reproduction?

wojtekmaj Jun 11, 2024

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:

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 Jun 13, 2024
Maintainer

#66817 will fix it

Sal0ID · 2024-07-10T11:20:58Z

Sal0ID
Jul 10, 2024

Can someone help me out? github stackoverflow?

0 replies

taitruong007 · 2024-09-24T04:48:19Z

taitruong007
Sep 24, 2024

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

0 replies

SoftwareIK · 2024-10-21T04:30:04Z

SoftwareIK
Oct 21, 2024

@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?

3 replies

kdy1 Oct 22, 2024
Maintainer

nextjs@12 is outdated.

SoftwareIK Oct 22, 2024

@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 Oct 22, 2024
Maintainer

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 · 2024-10-22T04:37:10Z

billnbell3
Oct 22, 2024

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

1 reply

kdy1 Oct 22, 2024
Maintainer

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

This comment has been hidden.

Sign in to view

This comment was marked as off-topic.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment was marked as off-topic.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

SWC minify feedback #30237

timneutkens Oct 24, 2021 Maintainer

Replies: 157 comments · 440 replies

This comment has been hidden.

This comment was marked as off-topic.

This comment has been hidden.

This comment has been hidden.

This comment has been hidden.

This comment has been hidden.

This comment has been hidden.

This comment has been hidden.

timneutkens Jan 19, 2022 Maintainer Author

kdy1 Jan 20, 2022 Maintainer

timneutkens Jan 20, 2022 Maintainer Author

kdy1 Jan 20, 2022 Maintainer

sokra Jan 20, 2022 Maintainer

timneutkens Nov 4, 2021 Maintainer Author

timneutkens Oct 28, 2021 Maintainer Author

kdy1 Oct 28, 2021 Maintainer

kdy1 Oct 31, 2021 Maintainer

kdy1 Feb 7, 2022 Maintainer

kdy1 Feb 7, 2022 Maintainer

kdy1 Feb 10, 2022 Maintainer

kdy1 Nov 2, 2021 Maintainer

This comment has been hidden.

ERROR Infinite loop detected :

HOW TO REPRODUCE:

FULL PACKAGE.JSON CONTENTS IF NEEDED:

FULL NEXT.CONFIG.JSON IF NEEDED

kdy1 Mar 29, 2022 Maintainer

kdy1 Mar 29, 2022 Maintainer

kdy1 Mar 29, 2022 Maintainer

kdy1 Mar 29, 2022 Maintainer

This comment has been hidden.

This comment has been hidden.

This comment has been hidden.

REPRODUCTION

ERROR (BROWSER CONSOLE)

EXPLANATION WHAT IS THE PROBLEM

timneutkens
Oct 24, 2021
Maintainer

Replies: 157 comments 440 replies

timneutkens Jan 19, 2022
Maintainer Author

kdy1 Jan 20, 2022
Maintainer

timneutkens Jan 20, 2022
Maintainer Author

kdy1 Jan 20, 2022
Maintainer

sokra Jan 20, 2022
Maintainer

timneutkens Nov 4, 2021
Maintainer Author

timneutkens Oct 28, 2021
Maintainer Author

kdy1 Oct 28, 2021
Maintainer

kdy1 Oct 31, 2021
Maintainer

kdy1 Feb 7, 2022
Maintainer

kdy1 Feb 7, 2022
Maintainer

kdy1 Feb 10, 2022
Maintainer

kdy1 Nov 2, 2021
Maintainer

ERROR `Infinite loop detected` :

kdy1 Mar 29, 2022
Maintainer

kdy1 Mar 29, 2022
Maintainer

kdy1 Mar 29, 2022
Maintainer

kdy1 Mar 29, 2022
Maintainer