Error: Must use import to load ES Module

[AdelNorberg]

Hi!
Sorry if I made a stupid mistake. My knowledge in node.js is weak :( But I don’t understand why doesn’t see module build in your package.
I am getting an error in the console:

Node v16.5.0
bitecs v0.3.15-1

package.json:

tsconfig:

[AdelNorberg]

If I remove this line everything works

[NateTheGreatt]

the best solution would be to switch from CommonJS modules (require) over to the more modern ES modules (import), as it is officially supported in the version of node you are using (16) 🙂

CommonJS:

const { createWorld } = require('bitecs')

ES:

import { createWorld } from 'bitecs'

[SupremeTechnopriest]

Also, you will have to either set "type": "module" in your package.json or name your files with the .mjs extension.

[AdelNorberg]

Thank you very much for your reply.
On the screenshot there is a property { type: "module" } and and I am using import instead of require. But the error still remains. At the same time, I have no problems with other packages (uWebSockets.js, three.js, and more)

the best solution would be to switch from CommonJS modules (require) over to the more modern ES modules (import), as it is officially supported in the version of node you are using (16) 🙂

CommonJS:

const { createWorld } = require('bitecs')

ES:

import { createWorld } from 'bitecs'

[SupremeTechnopriest]

See my above comment. You need to give your js files the .mjs extension or add "type": "module" to your own package json.

[AdelNorberg]

See my above comment. You need to give your js files the .mjs extension or add "type": "module" to your own package json.

But I have added type: "module". You can see it in the screenshot above

[SupremeTechnopriest]

Did you make sure to add it back to the bitecs package.json? Are you using a bundle like webpack or rollup?

[NateTheGreatt]

On the screenshot there is a property { type: "module" } and and I am using import instead of require. But the error still remains. At the same time, I have no problems with other packages (uWebSockets.js, three.js, and more)

I suspect you are using a bundler like webpack which is rewriting your import calls over to require calls in the bundled code. Am I correct in this assumption?

[AdelNorberg]

I use this package in two environments. In one of them, this package works. There Rollup.
In another, where there is nothing but ts (config on screenshots), an error occurs, which is in question in the issue

Did you make sure to add it back to the bitecs package.json? Are you using a bundle like webpack or rollup?

Yeah. I removed node_modules so that there were no problems after changing package.json in node_modules

[SupremeTechnopriest]

can you add "module": "ESNext" to your tsconfig's compilerOptions and try again?

[AdelNorberg]

can you add "module": "ESNext" to your tsconfig's compilerOptions and try again?

With ESnext in ts config, other packages already stop working with the same error

[AdelNorberg]

If you look at other packages (three, uWebSockets.js) that work for me, then they do not have in package.json type: "module"

[hazulu]

I am having a similar issue as well-- I created a new TS project and tried using the library and was receiving the same error.

I was able to fix the issue if added type: module to my app's package.json, and compiled tsc rather than trying to run it. I ran the build with the following TSConfig:

and this is the package.json:

(I did not run npm run build, I just used the tsc command)

[mrchantey]

same here, removing "type": "module" from the bitECS package.json did the trick (i'm using typescript+webpack)
ps awesome library! :)

[NateTheGreatt]

the transition from commonjs to es modules has been quite a mess haha. just fyi i haven't forgotten about this, still trying to figure out what the best solution is

[EnderShadow8]

I'm pretty sure there's a way to configure the package.json to provide different entry points depending on whether the module was required or imported, but I'm still figuring out the specfics of how that would work with TS and stuff

Best policy is to just use ESM since ESM can import CJS but not the other way around.

[EnderShadow8]

CJS can import ESM as follows:

const importedModule = await import("./myModule.mjs")

Hope this solves the problem.