Unable to import PrimeReact style files on Next.js project - reactjs

I'm trying to use PrimeReact components on a Next.js project but I'm getting an error when I try to import the core css styles as shows in their documentation (https://www.primefaces.org/primereact/#/setup), I have used these components with a create-react-app project, but this time I'm having the following error:
Next js error
I'm using "#zeit/next-sass" and "node-sass" to work with SASS files, I read that is required to create a "webpack.config.js" to manually apply the right loaders but the problem persist (I'm not a webpack expert), I was wondering if someone can give me a hint of what I'm missing.
Thank you in advance.

Related

When using esbuild with external react I get Dynamic require of “react” is not supported

cross post from github
I have two UI components library. One of them (#ikas/components) library does not have any issue but the other (same config) throw this error. Can anyone have any idea?
When i comment inhouse-components it is work. but when i open it it crash... any idea?
I try to external,
Also try add import React from "react" to tsx files. but there error is still there.
I am expecting the #ikas/inhouse-components is should also work as well as #ikas/components
I also control the dist (output folder) .d.ts and show React import different but I don't know if it's relevant

React JS Babel unable to compile css file

I am trying to create a React JS App. The error occurs when I am trying to access .classname in css file.
The image of error
Can someone help me It would be a great help.

ReferenceError in monorepo-imported Typescript JSX component

I'm using Turborepo to build a Typescript monorepo which contains a number of packages that make up a UI framework. The first component is a very basic multi-panel display that is transpiled to ES6 using tsc. The package transpiles and builds correctly, but when I attempt to import one of the JSX components from the package, I get the following error.
I'm pretty new to working with monorepos, so I'm sure there's some configuration somewhere I've missed, but this is working with Turborepo out of the box and I'd been hoping that it would Just Work. The repo structure is the default Turborepo structure but I've attached that anyway in case I've missed something there.

How to import react framework into vscode source code project to create UI component?

When i customize vscode source code, i found it hard to add a page.
I know there are many ways to do so, such as Part/Widget/Browserwindow, but only if i new a Browserwindow can i explicitly load html and js files like in chrome browser and it's friendly.
If i use a Part or a Widget, i need to use native js api to do dom manipulation, and it's so inefficient,
~~so i want to know how did vscode team decide to use no ui framework during the development? Is there some trade-off?~~
i tried to import react and react-dom directly in my own contrib file /vs/workbench/contrib/dialog/browser/dialog.ts, and then get successful compilation and the react component shows up, but i don't know how to add babel with the compilation procedure, so i use react without jsx.
so i want to know how to import react framework into vscode source code project to create ui component? Is there some practices?

How to use the #salesforce/design-system-react package in my Create-React-App

I have an ejected React app that is based on Create-React-App, and I am trying to install the #salesforce/design-system-react package to use the Salesforce lightning components in it. But to use this package is not as easy (seems that I need some extra configuration for Barbel and Webpeck). I don't have much experience on config Barbel and Webpeck and need some help to get me started.
Can someone please let me know how can I get that .BABELRC and the Webpack v1 files described from this site: https://react.lightningdesignsystem.com/getting-started/ ?
Many thanks,
No need to configure anything. Just import the CSS.
In your index.js, add the following line.
import "#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css";
Now you should remove the styling in App.css since the default styling in Create React App will affect your Lightning Components (font-size for example)

Resources