require() of ES modules is not supported.

[drcmda]

https://github.com/pmndrs/drei/issues/450

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\XapuR\OneDrive\xapu1337-website\node_modules\three-mesh-bvh\src\index.js
require() of ES modules is not supported.
require() of C:\Users\XapuR\OneDrive\xapu1337-website\node_modules\three-mesh-bvh\src\index.js from C:\Users\XapuR\OneDrive\xapu1337-website\node_modules\@react-three\drei\index.cjs.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES module
s.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\XapuR\OneDrive\xapu1337-website\node_modules\three-mesh-bvh\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Users\XapuR\OneDrive\xapu1337-website\node_modules\@react-three\drei\index.cjs.js:1:699)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14) {
  code: 'ERR_REQUIRE_ESM'
}

[drcmda]

i was trying to understand what's going on and could it be this?

{
  "name": "three-mesh-bvh",
  "module": "src/index.js", 
  "main": "src/index.js", 
  "type": "module",

i think i should say:

  "module": "build/index.module.js", 
  "main": "build/index.umd.js", 

otherwise it most likely cannot resolve properly. i believe the problem is that if you deploy esm and cjs or umd then package.json needs to declare both or the package is now incompatible with cjs/umd under node.

[gkjohnson]

Hey @drcmda -- thanks for the report. From the node docs using type: module indicates that all .js files in the subdirectories use es6 modules which I thought would have addressed all this but apparently even then node.js doesn't let you use require to load modules which I didn't realize. It seems unnecessarily convoluted to not support this on nodes part but perhaps there's a good reason. So much for being able to migrate to modules without breaking other workflows...

  "module": "build/index.module.js", 
  "main": "build/index.umd.js",

This still won't work because type: module will cause node to interpret the .umd.js file as a module either way. Changing the extension from .js to .cjs for the umd build file and adjusting the "main" field seems to fix the issue, though. Can you confirm that works for your guys' use case?

[drcmda]

It seems unnecessarily convoluted to not support this on nodes part

i want to cry in my sleep, i don't get the new module system at all 😅

Can you confirm that works for your guys' use case?

pinging @RenaudRohlinger

[RenaudRohlinger]

@drcmda @gkjohnson Hi, thank you both! If I just changed the file extension to cjs then I get :

./node_modules/three-mesh-bvh/src/index.cjs
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import { Ray, Matrix4, Mesh } from 'three';

[gkjohnson]

@RenaudRohlinger

If I just changed the file extension to cjs then I get :

You need to change the file build/index.umd.js to build/index.umd.cjs and in the package.json change the "main" field from src/index.js to build/index.umd.cjs.

@drcmda

i want to cry in my sleep, i don't get the new module system at all 😅

Heh, I thought I did... I thought using type: module in package.json would just let me use modules but apparently it still can't be "required". Hopefully using modules in npm packages reaches some kind of critical mass at some point so they can be distributed without cjs versions but this limitation seems like it will make that difficult. Maybe there's still something in the works from node but I haven't seen much else on it.

[RenaudRohlinger]

@gkjohnson Ah I see sorry for the misunderstood. Just tried and it works 👍 !

[gkjohnson]

I've just published version v0.4.1 to npm with the .cjs extension fix -- let me know once you've updated and tested drei and we can close the issue.

Thanks again!

[joshuaellis]

@gkjohnson I'll put out a drei beta for this fix 👍🏼

[RenaudRohlinger]

@gkjohnson @joshuaellis Everything is now working with SSR. I think we can consider this issue as resolved. Thank you very much!