Importing CSS files in Isomorphic React Components

by

You can’t require css in the component that you are rendering on the server. One way to deal with it is to check if it’s a browser before requiring css.

if (process.env.BROWSER) {
  require("./style.css");
}

In order to make it possible you should set process.env.BROWSER to false (or delete it) on the server
server.js

delete process.env.BROWSER;
...
// other server stuff

and set it to true for the browser. You do it with webpack’s DefinePlugin in the config –
webpack.config.js

plugins: [
    ...
    new webpack.DefinePlugin({
        "process.env": {
            BROWSER: JSON.stringify(true)
        }
    })
]

You can see this in action in gpbl’s Isomorphic500 app.

More Related Contents:

  1. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  2. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  3. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  4. Unable to access React instance (this) inside event handler [duplicate]
  5. “You may need an appropriate loader to handle this file type” with Webpack and Babel
  6. ES6 exporting/importing in index file
  7. How do I generate sourcemaps when using babel and webpack?
  8. How to load image files with webpack file-loader
  9. ES6 modules implementation, how to load a json file
  10. When should I use brackets with imports
  11. How to store Configuration file and read it using React
  12. Arrow Function syntax not working with webpack?
  13. where is create-react-app webpack config and files?
  14. Webpack babel 6 ES6 decorators
  15. React.js – Syntax error: this is a reserved word in render() function
  16. Unable to use Arrow functions inside React component class [duplicate]
  17. Error: Missing class properties transform
  18. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  19. Is there a way to render multiple React components in the React.render() function?
  20. Is it possible to use dotenv in a react project?
  21. “You may need an additional loader to handle the result of these loaders.”
  22. how to set up an inline svg with webpack
  23. Electron IPC and nodeIntegration
  24. Webpack 5 – Uncaught ReferenceError: process is not defined
  25. Import ES module in Next.js ERR_REQUIRE_ESM
  26. How to load es6, react, babel code in html with cdn?
  27. React JS Server side issue – window not found
  28. Exporting functions with reactjs and babel
  29. how can I use top level “await” in typescript next.js
  30. How can I fix the “BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?

Leave a Comment