CODEWITHSUNDEEP
cssreactjswebpackreact-image-cropreact-responsive-carousel
JustAnotherDev
JustAnotherDev

Reputation: 415

CSS import via Webpack not working on reload of page

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'
  }],
})

Upvotes: 0

Views: 521

Answers (1)

JustAnotherDev
JustAnotherDev

Reputation: 415

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.

Upvotes: 0

Related Questions