Next.js CJS build error `SyntaxError: Named export 'ScriptElementKind' not found.`

[huypham50]

Getting this error when yarn build / yarn dev

file:///Users/johndoe/Desktop/code/repo/node_modules/@valtown/codemirror-ts/dist/esm/autocomplete/getAutocompletion.js:1
import { ScriptElementKind } from "typescript";
         ^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ScriptElementKind' not found. The requested module 'typescript' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'typescript';
const { ScriptElementKind } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:432:15)
   Generating static pages (23/26)  [ ===]
Error occurred prerendering page "/app/[workspaceSlug]/queries". Read more: https://nextjs.org/docs/messages/prerender-error

file:///Users/johndoe/Desktop/code/repo/node_modules/@valtown/codemirror-ts/dist/esm/autocomplete/getAutocompletion.js:1
import { ScriptElementKind } from "typescript";
         ^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ScriptElementKind' not found. The requested module 'typescript' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'typescript';
const { ScriptElementKind } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:432:15)

Error occurred prerendering page "/app/[workspaceSlug]". Read more: https://nextjs.org/docs/messages/prerender-error

file:///Users/johndoe/Desktop/code/repo/node_modules/@valtown/codemirror-ts/dist/esm/autocomplete/getAutocompletion.js:1
import { ScriptElementKind } from "typescript";
         ^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ScriptElementKind' not found. The requested module 'typescript' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'typescript';
const { ScriptElementKind } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:432:15)
   Generating static pages (25/26)  [  ==]
Error occurred prerendering page "/playground". Read more: https://nextjs.org/docs/messages/prerender-error

file:///Users/johndoe/Desktop/code/repo/node_modules/@valtown/codemirror-ts/dist/esm/autocomplete/getAutocompletion.js:1
import { ScriptElementKind } from "typescript";
         ^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ScriptElementKind' not found. The requested module 'typescript' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'typescript';
const { ScriptElementKind } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:432:15)

My tsconfig

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

My next config

/** @type {import('next').NextConfig} */
module.exports = {
    reactStrictMode: true,
    swcMinify: true,
    webpack: (config, { isServer }) => {
        // https://github.com/vercel/next.js/issues/7755#issuecomment-812805708
        if (!isServer) {
            config.resolve.fallback.fs = false;
        }

        return config;
    },
};

Great library!

[tmcw]

Ah, okay - I guess the bundler we've been using with this module does es module interoperability differently (we're mostly using this module with remix/esbuild). We should probably just use the TS default export.

[huypham50]

Haha banger it works thank you. For future folks if you're using Next.js you might face an issue where ReferenceError: localStorage is not defined as well.

The fix is to import the component dynamically without SSR

import dynamic from "next/dynamic";

export const CodeEditor = dynamic(() => import("./editor").then((module) => module.CodeEditor), {
    ssr: false,
});