[cubing.js issue] Cubing/scramble stopping nextjs from building.

batemanio commented 6 months ago

Steps to reproduce the issue

I was trying to use cubing.js (specifically cubing/scramble) to generate scrambles in a nextjs project. I used npx create-next-app@latest --ts and selected the options: What is your project named? my-nextjs-cubing-app Would you like to use ESLint? › Yes Would you like to use Tailwind CSS? › No Would you like to use src/ directory? › No Would you like to use App Router? (recommended) › Yes Would you like to customize the default import alias (@/*)? › No

I then change into the directory using cd my-nextjs-cubing-app and then install cubing using npm i cubing and replaced the code in app/page.tsx with:

"use client";

import { randomScrambleForEvent } from "cubing/scramble";
import { useEffect, useState } from "react";

export default function Home() {
    const [scramble, setScramble] = useState("");
    const generateScramble = async () => {
        const scramble = await randomScrambleForEvent("333");
        setScramble(scramble.toString());
    };
    useEffect(() => {
        generateScramble();
    }, []);
    return <h1>{scramble}</h1>;
}

Observed behaviour

I then started it with npm run dev.

Once it has loaded I open it (http://localhost:3000) on Google Chrome and the scramble appeared fine. I then went into the nextjs console and lots of errors had appeared. The console looked like this:

$ next dev
   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000

warning ../../package.json: No license field
 ✓ Ready in 2.1s
 ⚠ ../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-TPJIH6VS.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

Circular dependency between chunks with runtime (_app-pages-browser_node_modules_cubing_dist_lib_cubing_chunks_search-worker-entry_js-_e4c40, webpack)
This prevents using hashes of each other and should be avoided.

../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-TPJIH6VS.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

Circular dependency between chunks with runtime (_ssr_node_modules_cubing_dist_lib_cubing_chunks_lazy_recursive-_4f8d0, webpack-runtime)
This prevents using hashes of each other and should be avoided.
 ○ Compiling / ...
 ⚠ ../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-TPJIH6VS.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

Circular dependency between chunks with runtime (_app-pages-browser_node_modules_cubing_dist_lib_cubing_chunks_search-worker-entry_js-_e4c40, webpack)
This prevents using hashes of each other and should be avoided.

../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-TPJIH6VS.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

Circular dependency between chunks with runtime (_ssr_node_modules_cubing_dist_lib_cubing_chunks_lazy_recursive-_4f8d0, webpack-runtime)
This prevents using hashes of each other and should be avoided.
 ⚠ ../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-TPJIH6VS.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

Circular dependency between chunks with runtime (_app-pages-browser_node_modules_cubing_dist_lib_cubing_chunks_search-worker-entry_js-_e4c40, webpack)
This prevents using hashes of each other and should be avoided.

../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-K3COOLRV.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/cubing/dist/lib/cubing/chunks/twsearch-CXJQR4MQ.js
../../node_modules/cubing/dist/lib/cubing/chunks/chunk-TPJIH6VS.js
../../node_modules/cubing/dist/lib/cubing/scramble/index.js
./app/page.tsx

Circular dependency between chunks with runtime (_ssr_node_modules_cubing_dist_lib_cubing_chunks_lazy_recursive-_4f8d0, webpack-runtime)
This prevents using hashes of each other and should be avoided.

When I stopped the website and tried doing npm run build. It would not work and would output:

$ next build
   ▲ Next.js 14.0.4

Failed to compile.

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

Caused by:
    0: failed to parse input file
    1: Syntax Error
Error: 
  x 'import', and 'export' cannot be used outside of module code
   ,-[1:1]
 1 | import { nodeEndpointPort } from "./chunk-NEAVVKH5.js";
   : ^^^^^^
 2 | import { exposeAPI } from "./chunk-7GUL3OBQ.js";
 3 | import "./chunk-VL22SFND.js";
 4 | // src/cubing/search/worker-workarounds/search-worker-entry.js
   `----

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

> Build failed because of webpack errors
   Creating an optimized production build  .error: script "build" exited with code 1 (SIGHUP)

🖼 Screenshots

No response

Expected behaviour

I expected for there to be no errors while building or running the dev server.

Environment

I am using node v20.10.0 and nextjs version 14.0.4.

Additional info

No response

lgarron commented 6 months ago

I took a look, and this seems to be due to a few issues.

Warnings in dev

Next.js does not understand import.meta.resolve(…). This may be a workaround, but the proper solution is for Next.js to support it.
Next.js does not like dynamic imports with obfuscated module strings. I'd love to avoid this, but this is necessary for our published code to be compatible with all JS runtimes and a wide variety of bundlers.
Next.js is warning on a (dynamic) cyclic import chain. This is due to a critical workaround we need for another bundler, and still perfectly valid code. Next.js seems to be concerned about file hashes in the output, which is probably a caching concern. There may be other ways to address this in Next.js, but I don't expect this to be an issue in practice. You may just want to silence this warning if you can.

Error while building

It's hard to trace the error message to a detailed cause, but my best guess is that Next.js is not properly able to build module workers. I suspect this is not an issue with cubing.js, as other folks also seem to have similar issues:

Unfortunately, it seems there isn't much we can do to help you directly. In theory we could consider additional workarounds, but those have a high maintenance cost and cause a lot of trouble — as you can see above, we're already suffering from workarounds that are in place due to other bundlers. Until the JavaScript ecosystem is in a better place, the best we can do is to minimize errors in favor of warnings.

I'd suggest asking in the Next.js project about module worker issues, and let me know if they end up needing a more minimal repro to debug it.

lgarron commented 5 months ago

Closing this for now — let us know if you run into additional issues.

cubing / cubing.js