3

I'm experiencing a build failure in my Next.js project when attempting to create an optimized production build (next build). The build process fails specifically due to an issue with Terser, which seems unable to parse a JavaScript file from an external npm package (cubing.js). This failure occurs despite the Next.js documentation stating that it uses SWC for JavaScript transformation and minification by default, not Babel or Terser.

Error Message:

Failed to compile.

static/media/search-worker-entry.3cb2cae1.js from Terser
  x 'import', and 'export' cannot be used outside of module code
   ,-[1:1]
 1 | import {
   : ^^^^^^
 2 |   nodeEndpointPort
 3 | } from "./chunk-NEAVVKH5.js";
 4 | import {
   `----

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

NPM Package Causing Error: The file in question is part of the cubing npm package, located at node_modules/cubing/dist/lib/cubing/chunks/search-worker-entry.js.

import {
  nodeEndpointPort
} from "./chunk-NEAVVKH5.js";
import {
  exposeAPI
} from "./chunk-7GUL3OBQ.js";
import "./chunk-VL22SFND.js";

// src/cubing/search/worker-workarounds/search-worker-entry.js
if (exposeAPI.expose) {
  (async () => {
    await import("./inside-KOB7JHHP.js");
    const messagePort = globalThis.postMessage ? globalThis : await nodeEndpointPort();
    messagePort.postMessage("comlink-exposed");
  })();
}
var WORKER_ENTRY_FILE_URL = import.meta.url;
export {
  WORKER_ENTRY_FILE_URL
};
//# sourceMappingURL=search-worker-entry.js.map

package.json:

{
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.4",
    "react-router-dom": "^6.22.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
    ...
  },
  "devDependencies": {
    "typescript": "^5.3.3",
    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    ...
  },
  "overrides": {
    "typescript": "^5.3.3"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Next.js Documentation:

The Next.js Compiler, written in Rust using SWC, allows Next.js to transform and minify your JavaScript code for production. This replaces Babel for individual files and Terser for minifying output bundles.

Given that Next.js is supposed to use SWC and not Terser for minification, I'm puzzled as to why I'm encountering a Terser-related issue. Has anyone faced a similar problem or can provide insight into why Terser is involved in the build process? Additionally, what steps can I take to resolve this issue and successfully compile my project?

Environment:

  • npm version: 10.2.4
  • Node.js version: v21.6.0
  • Next.js version: 14.1.4

1 Answer 1

0

my experience with this is to fix up next.config.ts with swcMinify: true. Something like this:

const nextConfig: NextConfig = {
  swcMinify: true,
  logging: false,
  webpack: (config) => {
    const nextConfig = ({
      ...config,
      // -- do not use optimization --
      // optimization: {
      //   minimize: true,
      // },
    });
    }

    return nextConfig;
  },
};

export default nextConfig;

Hope this helps.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.