primefaces/primevue-quickstart-nuxt3

Not running with Production Build

who-jonson opened this issue · 4 comments

who-jonson commented

Showing below exception when start

Directory import '/**/.output/server/node_modules/primevue/config' is not supported resolving ES modules imported from /**/.output/server/chunks/app/server.mjs
Did you mean to import primevue-quickstart-nuxt3-main/.output/server/node_modules/primevue/config/config.cjs.js?

❯ yarn build
yarn run v1.22.17
$ nuxt build
Nuxt CLI v3.0.0-27338323.1e98259                                                                                                    07:34:32
ℹ Vite warmed up in 2293ms                                                                                                          07:34:37
ℹ Client built in 3013ms                                                                                                            07:34:38
ℹ Building server...                                                                                                                07:34:38
✔ Server built in 1043ms                                                                                                            07:34:39
ℹ Nitro preset is server                                                                                                            07:34:39
ℹ Cleaning up .output                                                                                                               07:34:39
start Generating public...                                                                                                          07:34:39
✔ Generated public .output/public                                                                                                   07:34:39
start Building server...                                                                                                            07:34:39
start Writing server bundle...                                                                                                      07:34:43
✔ Server built                                                                                                                      07:34:43
  ├─ .output/server/index.mjs (69.5 kB) (23.7 kB gzip)
  ├─ .output/server/chunks/nitro/static.mjs (4.11 kB) (1.51 kB gzip)
  ├─ .output/server/chunks/index.mjs (392 kB) (90.3 kB gzip)
  ├─ .output/server/chunks/app/vue3.mjs (284 B) (200 B gzip)
  ├─ .output/server/chunks/app/server.mjs (120 kB) (31.1 kB gzip)
  ├─ .output/server/chunks/app/render.mjs (22.9 kB) (6.36 kB gzip)
  └─ .output/server/chunks/app/client.manifest.mjs (756 B) (314 B gzip)
Σ Total size: 2.98 MB (709 kB gzip)
ℹ You can preview this build using nuxi preview                                                                                     07:34:43
✨  Done in 11.25s.
❯ yarn start
yarn run v1.22.17
$ node .output/server/index.mjs
Listening on http://localhost:3000
Directory import '/**/primevue-quickstart-nuxt3-main/.output/server/node_modules/primevue/config' is not supported resolving ES modules imported from /**/primevue-quickstart-nuxt3-main/.output/server/chunks/app/server.mjs
Did you mean to import primevue-quickstart-nuxt3-main/.output/server/node_modules/primevue/config/config.cjs.js?
  at new NodeError (internal/errors.js:322:7)  
  at finalizeResolution (internal/modules/esm/resolve.js:304:17)  
  at moduleResolve (internal/modules/esm/resolve.js:731:10)  
  at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)  
  at Loader.resolve (internal/modules/esm/loader.js:89:40)  
  at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)  
  at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)  
  at link (internal/modules/esm/module_job.js:75:36)
Directory import '/**/primevue-quickstart-nuxt3-main/.output/server/node_modules/primevue/config' is not supported resolving ES modules imported from /**/primevue-quickstart-nuxt3-main/.output/server/chunks/app/server.mjs
Did you mean to import primevue-quickstart-nuxt3-main/.output/server/node_modules/primevue/config/config.cjs.js?
  at new NodeError (internal/errors.js:322:7)  
  at finalizeResolution (internal/modules/esm/resolve.js:304:17)  
  at moduleResolve (internal/modules/esm/resolve.js:731:10)  
  at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)  
  at Loader.resolve (internal/modules/esm/loader.js:89:40)  
  at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)  
  at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)  
  at link (internal/modules/esm/module_job.js:75:36)
JorgenSQ commented

I got the same issue -> Works in developmen with vite, but when building for production it cannot resolve the modules.

however, when running node with the "--experimental-specifier-resolution=node" flag, it works (although with some warnings)

As pointed out here: https://stackoverflow.com/questions/64453859/directory-import-is-not-supported-resolving-es-modules-with-node-js/65588027#65588027

To try, change your package.json start-script to "start": "node --experimental-specifier-resolution=node .output/server/index.mjs",

  • 👍1
smorcuend commented

I confirm this issue when i start production build with scss customization.
My css config in nuxt.config.ts:

  css: [
    "primevue/resources/themes/lara-light-teal/theme.css",
    "primevue/resources/primevue.css",
    "primeflex/primeflex.css",
    "@/assets/styles/layout.scss"
  ],

The production build process ends without errors or warnings but it fails when i run with node .output/server/index.mjs

Log trace:

> start
> node .output/server/index.mjs

node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_INVALID_PACKAGE_CONFIG]: Invalid package config ~/devel/nuxt3-app/.output/server/node_modules/ufo/package.json while importing "ufo" from ~/devel/nuxt3-app/.output/server/index.mjs. Unexpected token } in JSON at position 976
    at new NodeError (node:internal/errors:371:5)
    at getPackageConfig (node:internal/modules/esm/resolve:216:11)
    at packageResolve (node:internal/modules/esm/resolve:909:27)
    at moduleResolve (node:internal/modules/esm/resolve:976:18)
    at defaultResolve (node:internal/modules/esm/resolve:1078:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_INVALID_PACKAGE_CONFIG'
}

@JorgenSQ workaround works!

smorcuend commented

@JorgenSQ I notice other solution. If you insert your scss entry file on script as a JS import the problem is gone.

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script lang="ts">
import '~/assets/styles/layout.scss'
</script>
bonomite commented