Next.js Conflicts with CSS

[William Wise]

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```

[William Wise]

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 !

[Johan Navarro]

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 the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types
Please check, thanks.