MenuItem: Fails to build with Vite

[choff5507]

Describe the bug

package.json for the MenuItem component appears to be missing some code to properly build with Vite. Attempting to build production with Vite will error out with the following error:

/node_modules/primevue/menuitem". The package may have incorrect main/module/exports specified in its >package.json.

Adding the following line to the package.json will fix this and allow it to build.

"main": "./MenuItem.d.ts"

Reproducer

NA

PrimeVue version

3.30.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Build a new Vite project and use MenuItem in the project. Proceed to build a production copy of the application.

Expected behavior

Should properly build but doesn't.

[slumtrimpet]

It doesn't just fail to build for me, I can't even run the project when I have an import { MenuItem } from "primevue/menuitem"; anywhere in my code unless I add the fix mentioned here.

[ericuldall]

I'm also having issues building with vite. Using Timeline component:

12:11:30 AM: /opt/build/repo/node_modules/primevue/timeline/timeline.esm.js:1
12:11:30 AM: import { ObjectUtils } from "primevue/utils";
12:11:30 AM: ^^^^^^
12:11:30 AM: SyntaxError: Cannot use import statement outside a module
12:11:30 AM:     at internalCompileFunction (node:internal/vm:73:18)
12:11:30 AM:     at wrapSafe (node:internal/modules/cjs/loader:1178:20)
12:11:30 AM:     at Module._compile (node:internal/modules/cjs/loader:1220:27)
12:11:30 AM:     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
12:11:30 AM:     at Module.load (node:internal/modules/cjs/loader:1119:32)
12:11:30 AM:     at Module._load (node:internal/modules/cjs/loader:960:12)
12:11:30 AM:     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
12:11:30 AM:     at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

It seems this package is not correctly formatted as a module. type: 'module' in package.json, maybe?

[Hextar]

I've also just encountered this issue while trying to integrate primevue with a vite+vue3+unocss project:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
/Users/stefanosalidu/git/synesthetica/risparmia-tu/node_modules/.pnpm/[email protected][email protected]/node_modules/primevue/checkbox/checkbox.esm.js:1
import CheckIcon from 'primevue/icons/check';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Module.<anonymous> (/Users/stefanosalidu/git/synesthetica/risparmia-tu/.vite-ssg-temp/ue6o180sic/main.cjs:9:18)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at build (file:///Users/stefanosalidu/git/synesthetica/risparmia-tu/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vite-ssg/dist/node.mjs:1017:115)
    at async Object.handler (file:///Users/stefanosalidu/git/synesthetica/risparmia-tu/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vite-ssg/dist/node/cli.mjs:34:5)
    ```

[tugcekucukoglu]

Could you provide a simple reproducer link?

[Hextar]

Could you provide a simple reproducer link?

https://github.com/Hextar/risparmia-tu

Running pnpm i && pnpm run build should reproduce it.

Do know I'm using node 18.16.1 there and this is how I'm installing primevue wile using vite-ssg

https://github.com/antfu/vite-ssg

import Checkbox from 'primevue/checkbox'
import PrimeVue from 'primevue/config'
import Sidebar from 'primevue/sidebar'
import Tooltip from 'primevue/tooltip'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'

import { risparmiaTuTheme } from '~/assets/risparmiaTuTheme'

import type { UserModule } from '~/types'

export const install: UserModule = ({ app }: { app: any }) => {
  app.directive('tooltip', Tooltip)
  app.component('Checkbox', Checkbox)
  app.component('Sidebar', Sidebar)

  app.use(PrimeVue, {
    unstyled: true,
    pt: risparmiaTuTheme,
    ripple: false
  })
}

[bcspragu]

I think I might be hitting this issue as well in a Nuxt 3 application:

Failed to resolve entry for package "[...]/node_modules/primevue/menuitem". The package may have incorrect main/module/exports specified in its package.json.

[cmavelis]

I had the same issue but I found that it was tied to the vite plugin: vite-plugin-vue-type-imports, which isn't up to date with the latest vite version anyway. Removing that fixed my issue immediately.

here's a successful build forking from the latest vite+vue+TS template, adding in the following line that was breaking my build:

import type { MenuItem } from 'primevue/menuitem';

do a vite build, see no issues https://stackblitz.com/edit/vitejs-vite-93ramd?file=src%2FApp.vue&view=editor

[johnluxor]

Experiencing the same issue. Using Vue3 + InertiaJS SSR + PrimeVue. It builds fine for front end, but SSR throws an error

(node:20722) 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) /localpath/node_modules/primevue/config/config.esm.js:1 import { FilterMatchMode } from 'primevue/api'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

NodeJS 20

[rinoj]

Experiencing the same issue. Using Vue3 + InertiaJS SSR + PrimeVue. It builds fine for front end, but SSR throws an error

(node:20722) 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) /localpath/node_modules/primevue/config/config.esm.js:1 import { FilterMatchMode } from 'primevue/api'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

NodeJS 20

I have the exact same issue with InertiaJS SSR + PrimeVue

[mrmt00]

Experiencing the same issue. Using Vue3 + InertiaJS SSR + PrimeVue. It builds fine for front end, but SSR throws an error

(node:20722) 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) /localpath/node_modules/primevue/config/config.esm.js:1 import { FilterMatchMode } from 'primevue/api'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

NodeJS 20

Same issue but using the Toolbar InertiaJS SSR + PrimeVue

WORKAROUND / SOLUTION

vite.config.js

   // solution found in https://laracasts.com/discuss/channels/inertia/problema-with-inertiajs-ssr-vite
    ssr: {
        noExternal: [
            'primevue',
        ],
    },