[nextjs] Throws css imported by dependancy error

[gondar00]

When i try to use the file upload plugin with next i receive the following error in the dev console

Possible Ways to Fix It
Reach out to the maintainer and ask for them to publish a compiled version of their dependency.

https://github.com/zeit/next.js/blob/master/errors/css-npm.md

It's caused by line https://github.com/scaleflex/filerobot-image-editor/blob/master/projects/react/ImageEditorWrapper.js#L7

What is the most optimal fix for the above??

[vaniyokk]

Same question!

[magicspon]

Any movement on this?

[mrgrotts]

I was able to get this working by forking the repo, removing the imported CSS file from ImageEditorWrapper.js, rebuilding and publishing a private version for myself, and then importing the CSS file in _app.js as follows:

import 'FORKED/dist/assets/fonts/filerobot-font.css'

This should work for create-react-app as well, or any webpack configuration that enables file imports.

[odegraciajr]

I was able to get this working by forking the repo, removing the imported CSS file from ImageEditorWrapper.js, rebuilding and publishing a private version for myself, and then importing the CSS file in _app.js as follows:

import 'FORKED/dist/assets/fonts/filerobot-font.css'

This should work for create-react-app as well, or any webpack configuration that enables file imports.

How did you build the fork? is npm run build-new? I'm having an issue on building the package i'm always getting CanvasRenderingContext2D is not defined error

[mrgrotts]

@odegraciajr, I actually found an even better solution :)

Using the webpack configuration below - which is from the bottom of this thread - allows you to use filerobot directly with NextJS. One note, if you use styled-components in your app, you will get warnings about different versions unless you use the version that they are also using.

const removeIssuerApp = issuer => !issuer || !issuer.length ? [] : issuer.filter(i => i.substr(-7) !== '_app.js')

module.exports = {
  webpack (config, options) {
    config.module.rules = config.module.rules.map(
      rule => !rule.oneOf ? rule : ({
        ...rule,
        oneOf: rule.oneOf.map(oneOf => {
          if (!(oneOf.test && oneOf.issuer && (oneOf.test.toString() === '/(?<!\\.module)\\.(scss|sass)$/' || oneOf.test.toString() === '/(?<!\\.module)\\.css$/'))) {
            return oneOf
          }
          const
            and = removeIssuerApp(oneOf.issuer.and),
            or = removeIssuerApp(oneOf.issuer.or),
            not = oneOf.issuer.not || []
          return {
            ...oneOf,
            issuer: !and.length && !or.length && !not.length ? undefined : Object.assign({}, !and.length ? null : {and}, !or.length ? null : {or}, !not.length ? null : {not},)
          }
        })
      })
    )
    return config
  }
}

I also had to use next/dynamic as follows:

const ImageEditor = dynamic(() => import('filerobot-image-editor'), { ssr: false })