es modules not working on nuxt 3

[elliopitas]

Versions

• 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)

[elliopitas]

@danielroe here is the reproduction https://github.com/elliopitas/nuxt-es-module-reproduction I'm using node 18.7.0. I also tested it on node 16.16.0 with the same results

[elliopitas]

updated to nuxt v3.0.0-rc.8 and now primevue that was working fine before is broken too with this error message

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'A:\programming\projects\fci-frontend-nuxt\node_modules\primevue\inputtext' is not supported resolving ES modules imported from A:\programming\projects\fci-frontend-nuxt\.nuxt\dist\server\server.mjs
Did you mean to import primevue/inputtext/inputtext.cjs.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:400:17)
    at moduleResolve (node:internal/modules/esm/resolve:965:10)
    at defaultResolve (node:internal/modules/esm/resolve:1173:11)
    at nextResolve (node:internal/modules/esm/loader:173:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
    at ESMLoader.import (node:internal/modules/esm/loader:536:22)
    at importModuleDynamically (node:internal/modules/esm/translators:110:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///A:/programming/projects/fci-frontend-nuxt/node_modules/primevue/inputtext'
}

[danielroe]

You might try running nuxi upgrade, as vite 3.0.8 includes some fixes.

The example you give seems unrelated as it's about vue-qr including window and not being compatible with a server environment. Here's a working sandbox using a client-only component: https://stackblitz.com/edit/github-2uynvh.

[elliopitas]

this works great thanks. I didn't see that in the documentation. only the <ClientOnly> tag that I used like this which didn't work

<template>
  <div>
      <ClientOnly>
        <vueQr text="code2FA"></vueQr>
      </ClientOnly>
    <NuxtWelcome />
  </div>
</template>

<script setup lang="ts">
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
</script>

[elliopitas]

updated to nuxt v3.0.0-rc.8 and now primevue that was working fine before is broken too with this error message

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'A:\programming\projects\fci-frontend-nuxt\node_modules\primevue\inputtext' is not supported resolving ES modules imported from A:\programming\projects\fci-frontend-nuxt\.nuxt\dist\server\server.mjs
Did you mean to import primevue/inputtext/inputtext.cjs.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:400:17)
    at moduleResolve (node:internal/modules/esm/resolve:965:10)
    at defaultResolve (node:internal/modules/esm/resolve:1173:11)
    at nextResolve (node:internal/modules/esm/loader:173:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
    at ESMLoader.import (node:internal/modules/esm/loader:536:22)
    at importModuleDynamically (node:internal/modules/esm/translators:110:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///A:/programming/projects/fci-frontend-nuxt/node_modules/primevue/inputtext'
}

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

 build:{
        transpile:["primevue"]
    }