Resolving ES modules on Nuxt3 integration

[smorcuend]

I'm submitting a ...

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

CodeSandbox Case (Bug Reports)
https://github.com/smorcuend/nuxt3-test

Current behavior
Hi people!

Last changes on nuxt3 CI generates error after build process. The result code on bundling process not showing errors but npx nuxi preview throw this error on console when serving:

Directory import '/home/myproject/.output/server/node_modules/primevue/config' is not supported resolving ES modules imported from /home/myproject/.output/server/chunks/app/server.mjs
Did you mean to import primevue/config/config.cjs.js?
  at new NodeError (node:internal/errors:371:5)  
  at finalizeResolution (node:internal/modules/esm/resolve:412:17)  
  at moduleResolve (node:internal/modules/esm/resolve:932:10)  
  at defaultResolve (node:internal/modules/esm/resolve:1044:11)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)  
  at link (node:internal/modules/esm/module_job:75:36)

Regarding development server is serving correctly.

Minimal reproduction of the problem with instructions
https://github.com/smorcuend/nuxt3-test
npm run build && npm run preview

Please tell us about your environment:

• Debian 11
• Node: 16.13
• NPM: 8.1.0
• Vue version: 3.X
• PrimeVue version: 3.10.X
• Browser: [all]
• package.json

  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "nuxi preview"
  },
  "devDependencies": {
    "nuxt3": "^3.0.0-27356801.e9128f3"
  },
  "dependencies": {
    "primeflex": "~3.1.0",
    "primeicons": "~5.0.0",
    "primevue": "~3.10.0"
  }
}

• nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  css: [
    'primevue/resources/themes/saga-green/theme.css',
    'primevue/resources/primevue.css',
    'primeflex/primeflex.css',
    'primeicons/primeicons.css',
  ]
})

• plugins/primevue.js

import { defineNuxtPlugin } from '#app'
import PrimeVue from 'primevue/config'
import Button from 'primevue/button'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue, { ripple: true })
  nuxtApp.vueApp.component('Button', Button)
  //other components that you need
})

Any ideas?

[dojo-coder]

I'm also having this issue. Did anyone manage to solve this?

[tugcekucukoglu]

I cloned that repo and didn't get this kind of error about PrimeVue. Issue is not clear.

[hasinoorit]

I cloned that repo and didn't get this kind of error about PrimeVue. Issue is not clear.

I am also facing this issue. It does not have any problem with dev environment. Issue raise after build and start. After running the production build, visit the home page, it will throw an error. Please check the library author guide here.

[dojo-coder]

npm i --save-dev github:selucaciu/primevue#update-v3.11.0
Updated with the working package.json exports here.

[hasinoorit]

npm i --save-dev github:selucaciu/primevue#update-v3.11.0 Updated with the working package.json exports here.

Thank you.

[nndnha]

@tugcekucukoglu Please don't ignore this, you can see the error here https://stackblitz.com/edit/github-eyqwuf?file=app.vue

Related issue nuxt/nuxt#13124

[tugcekucukoglu]

@nndnha Really thanks for the example.

Could you please try to using like this

nuxt.config.js

build: {
    transpile: ['primevue']
}

[nndnha]

@nndnha Really thanks for the example.

Could you please try to using like this

nuxt.config.js

build: {
    transpile: ['primevue']
}

Thank you @tugcekucukoglu This works for me.

[wohui]

@nndnha nice works after add " build: {
transpile: ['primevue']
}," in defineNuxtConfig
thanks very much