Can not properly use PrimeReact UI library with Remix

[AYastrebtsov]

What version of Remix are you using?

latest(2.2.0)

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Install remix with npx create-remix@latest
Install PrimeReact with npm install primereact

Import any component to page according to docs
import { Button } from 'primereact/button'

And render it on a page
<Button label="This is Prime Button" />

Expected Behavior

Page renders with no errors.

Actual Behavior

When trying to run dev server or prod build this error happens:

Error: Directory import '/Users/andrey/Documents/pets/tourRM/node_modules/primereact/button' is not supported resolving ES modules imported from /Users/andrey/Documents/pets/tourRM/build/index.js
Did you mean to import primereact/button/button.cjs.js?

at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:319:17)
at moduleResolve (node:internal/modules/esm/resolve:945:10)
at defaultResolve (node:internal/modules/esm/resolve:1153:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36)

If I import component as error suggests everything works, but a get this error from TypeScript

Could not find a declaration file for module 'primereact/button/button.cjs.js'. '/Users/andrey/Documents/pets/tourRM/node_modules/primereact/button/button.cjs.js' implicitly has an 'any' type. If the 'primereact' package actually exposes this module, try adding a new declaration (.d.ts) file containing declare module 'primereact/button/button.cjs.js';

I tried to get types from node_modules, but was unable to apply them. Right now I "solve" this problem with @ts-ignore which is far from ideal.

Can you guys check this out?
We as a company used and still using PrimeReact with Vite and Next and it works as expected. And we can not switch to MUI or AntD or Chakra because they all use css-in-js which is not ideal for SSR.

Lately we also not happy with where Next.js is going and right now getting our feet wet with Remix, trying to understand if we could make the switch.

Thanks everyone in advance.

[brophdawg11]

Do you have a serverModuleFormat set in your remix config?

[AYastrebtsov]

Do you have a serverModuleFormat set in your remix config?

No, I don't, but according to Remix docs it is 'esm' by default, I tried 'cjs'as well, but result is still the same.

I also asked around about this problem in PrimeReact community, right now it seems that the issue is one their side.

They say that this issue should fi the problem

primefaces/primereact#5237

So right now I am waiting for this issue to be merged. If after that everything is ok, I'll close this one.

[melloware]

Tomorrow I am going to try and test my fix locally and let you know how it goes

[cd4success]

What version of Remix are you using?

latest(2.2.0)

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Install remix with npx create-remix@latest Install PrimeReact with npm install primereact

Import any component to page according to docs import { Button } from 'primereact/button'

And render it on a page <Button label="This is Prime Button" />

Expected Behavior

Page renders with no errors.

Actual Behavior

When trying to run dev server or prod build this error happens:

Error: Directory import '/Users/andrey/Documents/pets/tourRM/node_modules/primereact/button' is not supported resolving ES modules imported from /Users/andrey/Documents/pets/tourRM/build/index.js Did you mean to import primereact/button/button.cjs.js?

at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:319:17)
at moduleResolve (node:internal/modules/esm/resolve:945:10)
at defaultResolve (node:internal/modules/esm/resolve:1153:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36)

If I import component as error suggests everything works, but a get this error from TypeScript

Could not find a declaration file for module 'primereact/button/button.cjs.js'. '/Users/andrey/Documents/pets/tourRM/node_modules/primereact/button/button.cjs.js' implicitly has an 'any' type. If the 'primereact' package actually exposes this module, try adding a new declaration (.d.ts) file containing declare module 'primereact/button/button.cjs.js';

I tried to get types from node_modules, but was unable to apply them. Right now I "solve" this problem with @ts-ignore which is far from ideal.

Can you guys check this out? We as a company used and still using PrimeReact with Vite and Next and it works as expected. And we can not switch to MUI or AntD or Chakra because they all use css-in-js which is not ideal for SSR.

Lately we also not happy with where Next.js is going and right now getting our feet wet with Remix, trying to understand if we could make the switch.

Thanks everyone in advance.

I'm facing this same issue at the moment.

[getlaurekt]

What version of Remix are you using?

latest(2.2.0)

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Install remix with npx create-remix@latest Install PrimeReact with npm install primereact
Import any component to page according to docs import { Button } from 'primereact/button'
And render it on a page <Button label="This is Prime Button" />

Expected Behavior

Page renders with no errors.

Actual Behavior

When trying to run dev server or prod build this error happens:
Error: Directory import '/Users/andrey/Documents/pets/tourRM/node_modules/primereact/button' is not supported resolving ES modules imported from /Users/andrey/Documents/pets/tourRM/build/index.js Did you mean to import primereact/button/button.cjs.js?

at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:319:17)
at moduleResolve (node:internal/modules/esm/resolve:945:10)
at defaultResolve (node:internal/modules/esm/resolve:1153:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36)

If I import component as error suggests everything works, but a get this error from TypeScript
Could not find a declaration file for module 'primereact/button/button.cjs.js'. '/Users/andrey/Documents/pets/tourRM/node_modules/primereact/button/button.cjs.js' implicitly has an 'any' type. If the 'primereact' package actually exposes this module, try adding a new declaration (.d.ts) file containing declare module 'primereact/button/button.cjs.js';
I tried to get types from node_modules, but was unable to apply them. Right now I "solve" this problem with @ts-ignore which is far from ideal.
Can you guys check this out? We as a company used and still using PrimeReact with Vite and Next and it works as expected. And we can not switch to MUI or AntD or Chakra because they all use css-in-js which is not ideal for SSR.
Lately we also not happy with where Next.js is going and right now getting our feet wet with Remix, trying to understand if we could make the switch.
Thanks everyone in advance.

I'm facing this same issue at the moment.

I also have the same issue, but with error like this:

Error: Directory import xxx\node_modules\primereact\button' is not supported resolving ES modules imported from xxx\build\index.js
Did you mean to import primereact/button/button.cjs.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:320:17)
    at moduleResolve (node:internal/modules/esm/resolve:946:10)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

[jiwonz]

I also have the same issue!

Error: Directory import 'myproject/node_modules/primereact/button' is not supported resolving ES modules imported from myproject/build/index.js
Did you mean to import primereact/button/button.cjs.js?
    at new NodeError (node:internal/errors:406:5)
    at finalizeResolution (node:internal/modules/esm/resolve:227:11)
    at moduleResolve (node:internal/modules/esm/resolve:845:10)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)

[AYastrebtsov]

I migrated my project to Vite https://remix.run/docs/en/main/future/vite and PrimeReact and its types are working correctly now. Since Vite is going to be the default bundler for Remix, I think that it's OK to close this issue as resolved.

[U-4-E-A]

I also have the same issue!

Error: Directory import 'myproject/node_modules/primereact/button' is not supported resolving ES modules imported from myproject/build/index.js
Did you mean to import primereact/button/button.cjs.js?
    at new NodeError (node:internal/errors:406:5)
    at finalizeResolution (node:internal/modules/esm/resolve:227:11)
    at moduleResolve (node:internal/modules/esm/resolve:845:10)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)

Were you able to solve this? I have the same issue with a different library.

[AYastrebtsov]

Yes, we migrated our project to Remix Vite, and in our case PrimeReact works as it supposed to