es modules not working on nuxt 3
See original GitHub issueVersions
- nuxt: v3.0.0-rc.6
- node: v18.7.0
Reproduction
Additional Details
my package.json file
{
"type": "module",
"private": true,
"scripts": {
"build": "nuxt build",
"prod": "nuxt start",
"dev": "nuxt dev",
"dev-host": "nuxt dev --hostname somehostname.com --port 3000",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"naive-ui": "^2.31.0",
"nuxt": "^3.0.0-rc.6"
},
"dependencies": {
"primeflex": "^3.2.1",
"primeicons": "^5.0.0",
"primevue": "^3.15.0",
"vue-qr": "^4.0.9"
}
}
Steps to reproduce
I am trying to use the vue-qr library to create qr codes like so.
npm install vue-qr --save
import in a component
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
or import globally from plugin
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.component("vueQr",vueQr);
});
What is Expected?
since “type”: “module” is set the module will be imported.
What is actually happening?
I get error
(node:9936) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
if I try to use transpile like so
export default defineNuxtConfig({
build: {
transpile:['vue-qr']
}
});
I get
[nuxt] [request error] window is not defined
at $id_0b6AzUAdJH (/A:/programming/projects/fci-frontend-nuxt/.nuxt/dist/server/server.mjs:7535:5)
at async __instantiateModule__ (/A:/programming/projects/fci-frontend-nuxt/.nuxt/dist/server/server.mjs:13895:3)
Issue Analytics
- State:
- Created a year ago
- Reactions:2
- Comments:5 (1 by maintainers)
Top Results From Across the Web
node.js - Error [ERR_REQUIRE_ESM] require() of ES Module ...
Unfortnaly it's not work, i deleted node_modules folder and .output folder, i added type: "module" and i did an npm install && npm...
Read more >ES Modules · Nuxt Concepts
ES Modules. This guide helps explain what ES Modules are and how to make a Nuxt app (or upstream library) compatible with ESM....
Read more >Modules directory - Nuxt
meta : This line is required if you are publishing the module as an npm package. Nuxt internally uses meta to work better...
Read more >Error [ERR_REQUIRE_ESM]: require() of ES Module not ...
The error [ERR_REQUIRE_ESM]: require() of ES Module not supported. Instead change the require of index.js to a dynamic import() which is available in...
Read more >Installation – three.js docs
All methods of installing three.js depend on ES modules (see Eloquent JavaScript: ... Not all features are accessed directly through the three module...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
idk why this broke with the update from rc6 to 8 but adding the offending library in build transpile in nuxt config fixed the problem
updated to nuxt v3.0.0-rc.8 and now primevue that was working fine before is broken too with this error message