0

I am using two libraries (react-image-crop and react-responsive-carousel) that require a css import each. I have added css loaders to the next.config.js and when the page initially loads everything is good. However, when a refresh is called on the page there is a document is not defined error. Also, when I run yarn build the build compiles as expected then at the end fails with a Reference Error and refers to this document is not defined error.

Any help would be amazing.

next.config.js

...

const REACT_CAROUSEL_PATH = path.resolve(__dirname, './node_modules/react-responsive-carousel');
const REACT_IMAGE_CROP_PATH = path.resolve(__dirname, './node_modules/react-image-crop');

...

config.module.rules.push({
  test: /\.css$/i,
  include: [REACT_CAROUSEL_PATH, REACT_IMAGE_CROP_PATH], 
  use: [{
      loader: 'style-loader'
    },
    {
     loader: 'css-loader'
  }],
})
Ryan Carville
  • 355
  • 7
  • 15
  • Without a [mcve](https://stackoverflow.com/help/minimal-reproducible-example) it's a guessing game (if I had to guess, it's because one or both of those packages can't be server-side rendered because they use the `document` interface which is only available on the client). On a side note: You shouldn't be using custom Webpack rules for importing global node_module css. Instead you can use an `import` statement within an [_app.js pages file](https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules) or within a component. – Matt Carlotta Jan 03 '22 at 20:36
  • Thanks @MattCarlotta I know about the mcve & apologies. Will try & update the post with more code if possible. It is hard to add that here but your guess is correct. I tried the import in the component and the `_app.js` but it gave the same error. Also the libraries & other stack posts all recommend to use the css webpack loaders. I tried using the `mini-css-extract-plugin` as well & get a `this.getOptions` is not a function on the css file. I have also tried to do conditional rendering for when the component mounts & it will still error that the document is not found. Head scratcher. – Ryan Carville Jan 04 '22 at 01:37
  • The error isn't related to the css imports. Instead, it's related to one or more of the third party components that you're using. Please import them individually using NextJS [dynamic import with no ssr](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr) and that should fix the error related to the document being undefined. On that note, there's no reason to create custom Webpack CSS rules as they're already handled by Next when using the [recommended import statement for CSS](https://github.com/DominicTobias/react-image-crop#usage) – Matt Carlotta Jan 04 '22 at 01:45
  • Yes I understand that it is the third party components not the imports. I will try the dynamic loading as see if that does the trick. – Ryan Carville Jan 04 '22 at 01:50
  • @MattCarlotta when I remove the loaders I get the following `You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders` – Ryan Carville Jan 04 '22 at 01:54
  • Put together an example with `react-responsive-carousel` and it works as expected: [example GitHub repo](https://github.com/mattcarlotta/nextjs-react-carousel) – Matt Carlotta Jan 04 '22 at 02:18
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240699/discussion-between-ryan-carville-and-matt-carlotta). – Ryan Carville Jan 04 '22 at 02:32

1 Answers1

0

Thanks to @MattCarlottta for helping with figure this one out. Answering this should anyone else find themselves in a similar situation. For me, it had to do with my custom nginx server response type for the third party css. In the end I ended up using a SSR compliant library to avoid having to build custom page handling.

Ryan Carville
  • 355
  • 7
  • 15