Next.js: Allow multiple component in imports

[vitalijalbu]

Describe the bug

When using Next.js and trying to import import { Button, InputText } from "primereact"; it fails with.

Works fine if you use tree shaking imports however like:

import { Button} from "primereact/button"
import { InputText } from "primereact/inputtext"

Reproducer

https://codesandbox.io/s/youthful-carlos-gckc2q?file=/pages/index.js

PrimeReact version

8.6.1

React version

18.x

Language

ALL

Build / Runtime

Next.js 12.3.1

[melloware]

You must have missed this pinned ticket: #3288

[melloware]

You need to run yarn add quill chart.js

[vitalijalbu]

You need to run yarn add quill chart.js

i did it, but gives me error (nextjs)

[melloware]

that error has nothing to do with the above. You are missing an import. I thin kyou need to take a step back and build a simple example. You are trying to run before you have learned to walk

[melloware]

Start simple with this PrimeReact starter for Next.JS: https://github.com/primefaces/primereact-examples/tree/main/nextjs-basic

[vitalijalbu]

Start simple with this PrimeReact starter for Next.JS: https://github.com/primefaces/primereact-examples/tree/main/nextjs-basic

https://codesandbox.io/s/rough-firefly-84kwwi?file=/pages/index.js. here is an example, just made it... let me know pls what i'm missing.

[melloware]

I re-opened your ticket and updated the description. Looks like this problem is specific to Next.JS as it works fine with Create React App. Your only solution right now is to use explicit components like..

import { Button} from "primereact/button"
import { InputText } from "primereact/inputtext"

[vitalijalbu]

I re-opened your ticket and updated the description. Looks like this problem is specific to Next.JS as it works fine with Create React App. Your only solution right now is to use explicit components like..

import { Button} from "primereact/button"
import { InputText } from "primereact/inputtext"

yes it seems like there's a bug. thanks anyway, pls update me when is fixed :D

[ulasturann]

Hi @vitalijalbu,
It seems like you have just missed the _app.js file in your example.
Here is an example that forked from your first reproducer.

Please have a look at the link below;
https://codesandbox.io/s/muddy-bird-oz6fuo?file=/pages/index.js

[vitalijalbu]

Start simple with this PrimeReact starter for Next.JS: https://github.com/primefaces/primereact-examples/tree/main/nextjs-basic

https://codesandbox.io/s/rough-firefly-84kwwi?file=/pages/index.js. here is an example, just made it... let me know pls what i'm missing.

@ulasturann pls see here, they told me it was an issue with the library, i want multiple imports {button, input, ...etc}

[ulasturann]

Hi again @vitalijalbu,
As you mentioned, we are currently using tree-shaking which is why this is not an issue. We are discussing it but unfortunately, I can only recommend the correct use of the specified for now. We will let you know in case of any changes related to the issue.

Describe the bug

When using Next.js and trying to import import { Button, InputText } from "primereact"; it fails with.
.
.

Works fine if you use tree shaking imports however like:

import { Button} from "primereact/button"
import { InputText } from "primereact/inputtext"

.
.

[vitalijalbu]

Hi again @vitalijalbu, As you mentioned, we are currently using tree-shaking which is why this is not an issue. We are discussing it but unfortunately, I can only recommend the correct use of the specified for now. We will let you know in case of any changes related to the issue.

Describe the bug

When using Next.js and trying to import import { Button, InputText } from "primereact"; it fails with.
.
.

Works fine if you use tree shaking imports however like:

import { Button} from "primereact/button"
import { InputText } from "primereact/inputtext"

.
.

yes but it's no a good idea, instead of having 1 row of import components, we'll have 10!
https://discord.com/channels/787967399105134612/787968635414118421/1031580421722484907

[melloware]

@vitalijalbu that is purely syntax but by doing it the "tree shaking" way you actually are making a smaller more efficient deployment. Your way it has to bring in the entire primereact.js file instead of just the components you are using.

And your reason is because you want imports on one line??? That doesn't seem like a good tradeoff for performance.