Is this package pure ESM? getting "require() of ES Module not supported." error

[stonesthatwhisper]

package.json in my project does not have "type": "module", and I am seeing this error. Is this package "pure ESM"? Do I have to convert my project to pure ESM to use it? Is this (be a pure ESM project) a prerequisite for using this package?

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/me/project/node_modules/yet-another-react-lightbox/dist/index.js from /Users/me/project/.next/server/pages/project.js not supported.
Instead change the require of index.js in /Users/me/project/.next/server/pages/project.js to a dynamic import() which is available in all CommonJS modules.
    at Object.require.extensions.<computed> [as .js] (/Users/me/project/node_modules/ts-node/dist/index.js:851:20)
    at /Users/me/project/.next/server/pages/project.js:711:72
    at runMicrotasks (<anonymous>) {

[igordanchenko]

Is this package "pure ESM"?

Yes, this package is published as ESM-only.

Do I have to convert my project to pure ESM to use it?

Absolutely not. Since you are using a bundler, you don't have to set "type": "module" in your project's package.json in order to use this library. All you need to do is to import this library instead of trying to require it. By the way, is there any particular reason you are using require() syntax in a Next.js project instead of import?

[igordanchenko]

Alright, I tried including babel in my test, but it still builds and runs just fine. We are missing something here. Can you show your complete tsconfig.json and package.json? (please be sure to remove all proprietary or sensitive items)

Are you using next/dynamic to load the lightbox? Can you show your page with the lightbox?

I'm not aware of a reason why you shouldn't be able to run Next.js project with "module": "esnext" in your tsconfig.json. Did you have to change "module" to "commonjs" before you tried using YARL? This doesn't sound right...

[igordanchenko]

@stonesthatwhisper

I'm following up to see if you were able to get to the bottom of this issue. I'm really curious to figure out what exactly in your project configuration is affecting your dev experience. I'll be more than happy to take a closer look if you could share a trimmed-down version of your project (remove all pages and components except the one with the lightbox). Please let me know.

[stonesthatwhisper]

@igordanchenko Thank you for offering help. It's been a major pain for me to move to esnext. When I actually set module to "esnext", "yarn build" can complete successfully however "yarn start" would fail with "SyntaxError: Cannot use import statement outside a module". I'll try to get a trimmed-down version of the project, but that'll take some time.

Nevertheless, I found out my project works with YARL if I build and run it ("yarn build; yarn start") with "module": "commonjs" in tsconfig.json.

The error I reported in the initial post only happens in dev mode with "yarn dev" that runs ts-node --ignore .next -- server/app.ts.

Here is my complete tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",   // "ES2015": yarn build works, but yarn run fails.
    "jsx": "preserve",
    "allowJs": true,
    "alwaysStrict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": false,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots": ["./node_modules/@types"],
    "lib": ["dom", "es2017"],
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": false,
    "outDir": "production-server/"
  },
  "include": [
    "next-env.d.ts",
    "./**/*.tsx",
    "./**/*.ts",
    "./**/*.js",
    "./server/**/*.ts"
  ],
  "exclude": [
    "dist",
    "production-server",
    ".next",
    "out",
    "next.config.js",
    "node_modules"
  ]
}

[igordanchenko]

"yarn dev" that runs ts-node --ignore .next -- server/app.ts

That's the critical piece of information that was missing. A typical Next.js project uses next dev as its "dev" script.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

But since you are using ts-node to run your app in dev mode (I'm honestly not sure how it actually works in terms of substituting everything that Next.js does as a framework), it kind of explains the commonjs / esm issues that you are seeing.

I'll try to get a trimmed-down version of the project, but that'll take some time.

That's pretty much the only option for me to assist you at this point since you are running a non-standard Next.js project.

[stonesthatwhisper]

Thanks @igordanchenko. I'm trying to switch to 'next dev' for our dev environment.