Next.js Conflicts with CSS

[RealSGII2]

Description:

I am currently trying to use this system with my App that also uses Next.js. However, I am getting an error that states that react-flexbox-grid is importing global CSS and is being disallowed to. You can read more about this here: https://github.com/zeit/next.js/blob/master/errors/css-npm.md

According to Vercel:

Reach out to the maintainer and ask for them to publish a compiled version of their dependency. Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.

It would be nice if it was compiled so that way I may use it.

Full Error:

Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules\react-flexbox-grid\lib\classNames.js```

[RealSGII2]

Oops, my bad. I've reread readme.md and found what I was missing. It's already been compiled to react-flexbox-grid/dist.

So basically, in order to fix this issue with Next.js:

• If one does not exist, create a file named _app.js under the pages directory. Then import the CSS. This must be done here because Next.js only allows CSS imports from this and custom components.

  import 'react-flexbox-grid/dist/react-flexbox-grid.css'

• Import the compiled file from the dist directory:

  import { Grid, Row, Col } from 'react-flexbox-grid/dist/react-flexbox-grid'

[nguyenmiinh0208]

I fixed my issue ! Thanks you very much !

[jsnavarroc]

That solution doesn't work, get an error alert with PropTypes. react-jsx-runtime.development.js:117 Warning: Failed prop type: Calling PropTypes validators directly is not supported by theprop-typespackage. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types Please check, thanks.