Issue with cjs file not having cjs extension | Vite Land | Page 1

fallen arch May 1, 2024, 5:39 AM

#

Not sure if this is to be considered an issue on my end, for remix.js or with vite, so I wanted to ask:

I have a UI component library which compiles into one index.js (ESM) and index.cjs.js (CJS). I declare them both respectively in my package.json via the "main" and "module" properties. Now, when trying to use the library in Remixjs, I get an error "[vite] Internal server error: require is not defined in ES module scope, you can use import instead. This file is being treated as an ES module because it has a '.js' file extension and '/Users/oes0003t/Projects/tom/y/node_modules/@schedule-x/react/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension."

The most important part here, I believe, is "To treat it as a CommonJS script, rename it to use the '.cjs' file extension." Because this is true, when I change my build output filename into index.cjs instead of index.cjs.js it magically resolves it as CJS and everything works.

My question is: should this really be? I've seen other libraries compile CJS into {filename}.cjs.js before, and it kind of surprises me that it would be expected of me to break with this naming.

Any thoughts or insights?

#

Minimal repro: https://github.com/tomosterlund/remix-test

The used library which can't be imported correctly is @schedule-x/react

GitHub

GitHub - tomosterlund/remix-test

Contribute to tomosterlund/remix-test development by creating an account on GitHub.

warm walrus May 1, 2024, 5:48 AM

#

You need the explicit .cjs extension. It's how node tells cjs/esm apart

fallen arch May 1, 2024, 6:04 AM

#

Thanks!

I thought that's what we had the "main" option for in package.json though? And what I can't grasp then is: why does for example vue (https://github.com/vuejs/core/blob/main/packages/compiler-core/package.json) and react (https://github.com/facebook/react/blob/main/packages/react-dom/package.json) use .js extension instead of .cjs for commonjs output?

fallen arch May 1, 2024, 6:26 AM

#

And what I also can't grasp is how it works in a Nextjs setup without the .cjs extension, though Node is at work there too

warm walrus May 1, 2024, 8:09 AM

#

The main option doesn't necessarily needs to point to CJS code. It can point to ESM too. In which case, node uses the .cjs or type: 'commonjs' hueristic to determine if it's cjs/esm

#

You need to use .cjs only if the closest package.json does not have "type": "module". There's also an explanation here: https://publint.dev/rules#implicit_index_js_invalid_format

#Issue with cjs file not having cjs extension