[Bug]: importing ESM node_module causing ERR_REQUIRE_ESM

[heyymarco]

Which Remix packages are impacted?

• remix (Remix core)
• create-remix
• @remix-run/architect
• @remix-run/cloudflare-workers
• @remix-run/dev
• @remix-run/express
• @remix-run/netlify
• @remix-run/node
• @remix-run/react
• @remix-run/serve
• @remix-run/server-runtime
• @remix-run/vercel

What version of Remix are you using?

1.1.1

What version of Node are you using? Minimum supported version is 14.

v16.13.1

Steps to Reproduce

install @nodestrap/navbar using NPM:
npm i @nodestrap/navbar

then import & render the
import { Navbar } from '@nodestrap/navbar'

....

....

Expected Behavior

it should run perfectly. Tested in nextjs / react app with no problem

Actual Behavior

error [ERR_REQUIRE_ESM]: require() of ES Module ..... from ....index.js not supported.
Instead change the require .... to a dynamic import() which is available in all CommonJS modules.

I saw the problem is the generated build/index.js is a common js.
It tries to import an ESM module using require('some-esm-module')

Is there any way to change the generated build/index.js as ESM module?
CommonJS cannot import ESM but ESM can import CommonJS.

[egoist]

should also add esm support for remix.config.js

[egoist]

Seems you can use serverModuleFormat: "esm" in remix config to build the server in esm format, but ideally it should automatically output as esm if type: "module" is set in package.json (which is required to run esm module in Node.js unless you also output the server build as .mjs).

However currently Remix uses require to load remix.config.js and the server build, which won't work with type: "module" 😅 IMO all the Remix packages and examples should be migrated to esm, and use import to load the server build and config file.

[heyymarco]

serverModuleFormat: "esm" => still doesn't work.

nowadays there are a lot of esm modules in npm, so all of them don't work in remix.
I'm going back to NextJS, not as futuristic as remix, but it works.

[tchak]

I am not going back to NextJS but I will be very happy when I can remove from my package.json all the pinning on previous versions for npm packages that migrated to esm...

[Adam-Collier]

I am also having this issue

[sjones6]

According to the source code serverModuleFormat: 'esm' specifies the output mode (i.e., to output either esm or cjs) and not whether or not it will compile ES modules from node_modules:

remix/packages/remix-dev/config.ts

Line 170 in 1fd7096

* The output format of the server build. Defaults to "cjs".

[wanbinkimoon]

+1 esm support is needed

[pradeepa45]

+1 esm supprt is needed

[zayenz]

See documentation on gotchas for how to import ESM-modules: https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

[machour]

Tracked in #109

[sukh-winder]

I tried this gotcha approach mentioned in the remix documentation while I was using nanoId() and it didn't work and today itself when I was trying to use swiper it didn't work.
Any Solution to this?

[yehudamakarov]

@Ricky428 I'm also trying the solution but the CLI tells me

my package is possibly an ESM only package and should be bundled with "serverDependenciesToBundle in remix.config.js.

meanwhile, the exact string of the package is in serverDependenciesToBundle, and I get the same error

[yehudamakarov]

i just opened #6928

[yarapolana]

This might not work for everyone, but it worked for me.

module.exports = {
  ...
  serverModuleFormat: 'cjs', // or 'esm' both worked
  serverDependenciesToBundle: [
    /^@uppy.*/, // 👈🏼 notice the way its written
    /^nanoid.*/,
  ],
  ...
}

[div-seungha]

@yarapolana Thanks! You nailed it!! Your solution worked for me and I don't get this error anymore.

[deadcoder0904]

This might not work for everyone, but it worked for me.

module.exports = {
  ...
  serverModuleFormat: 'cjs', // or 'esm' both worked
  serverDependenciesToBundle: [
    /^@uppy.*/, // 👈🏼 notice the way its written
    /^nanoid.*/,
  ],
  ...
}

Adding esm worked for me instead of cjs. Before that, I got this error:

 💿  remix dev

 info  building...
 info  built (2.8s)
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'D:\Code\Remix\example.com\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///D:/Code/Remix/example.com/build/<stdin>:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at run (D:\Code\Remix\example.com\node_modules\.pnpm\@remix-run+serve@2.5.1_typescript@5.3.3\node_modules\@remix-run\serve\dist\cli.js:113:15)

Previously, I got the filename here so I changed it from .js to .cjs but now no filenames so was confused.