primefaces / primefaces/primereact

SSR: Wrongly published ESM code

Open
#4,675 21 comments 3 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Resolution: Workaround Type: SSR
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

I'm the author of vite-plugin-ssr and users are reporting the following problem with PrimeReact:

file:///home/fabio/Desktop/playground/vps-cjs-issue/dist/server/entries/pages_index-page.mjs:2
import { Badge } from "primereact/badge/badge.esm.js";
         ^^^^^
SyntaxError: Named export 'Badge' not found. The requested module 'primereact/badge/badge.esm.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'primereact/badge/badge.esm.js';
const { Badge } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at Object.pageFile.loadFile (/home/fabio/Desktop/playground/vps-cjs-issue/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/parseGlobResults.js:35:40)
    at async Promise.all (index 0)
    at loadPageFilesServerSide (/home/fabio/Desktop/playground/vps-cjs-issue/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/analyzePageServerSide/loadPageFilesServerSide.js:10:5)
    at async Promise.all (index 0)
    at loadPageFilesServer (/home/fabio/Desktop/playground/vps-cjs-issue/node_modules/vite-plugin-ssr/dist/cjs/node/runtime/renderPage/loadPageFilesServer.js:15:110)
    at /home/fabio/Desktop/playground/vps-cjs-issue/node_modules/vite-plugin-ssr/dist/cjs/node/prerender/runPrerender.js:257:48

I believe the problem is that Node.js treats the module as CJS because node_modules/primereact/badge/package.json doens't contain type: "module". A fix would be to change the file extension of node_modules/primereact/badge/badge.esm.js to badge.esm.mjs, as the .mjs reliably tells Node.js that the file is an ESM module.

Reproducer

https://github.com/brillout/vps-cjs-issue

PrimeReact version

9.6.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

See the reproduction's Readme.

Expected behavior

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.