javascript - How to use CSS in React SSR

Question

I am building a website by using webpack, Node.js and React.

I am trying to use CSS but when I import a CSS file into index.js file, it says

ERROR in ./node_modules/css-loader/dist/runtime/api.js Module build
failed: Error: Couldn't find preset "@babel/preset-env" relative to
directory "R:\Webdev\AlmaJ\server\node_modules\css-loader"

I have installed

"css-loader": "2.1.0", "style-loader": "0.23.1"

I also tried to use styled.components module in JSX file: import styled from styled-components

The result I got is:

Warning: Please use `require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")`. Support for the latter will be removed in the next major release.
Warning: Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")`. Support for the latter will be removed in the next major release.
R:WebdevAlmaJserver
ode_modulesstyled-componentsdiststyled-components.cjs.js:1
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-is"),n=require("react"),r=e(n),o=e(require("shallowequal")),s=e(require("@emotion/stylis")),i=e(require("@emotion/unitless")),a=e(require("@emotion/is-prop-valid")),u=e(require("hoist-non-react-statics"));function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var l=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},d=function(e){return null!==e&&"object"==typeof e&&"[object Object]"===(e.toString?e.toString():Object.prototype.toString.call(e))&&!t.typeOf(e)},h=Object.freeze([]),p=Object.freeze({});function f(e){return"function"==typeof e}function m(e){return"production"!==process.env.

TypeError: r.createContext is not a function
    at Object.<anonymous> (R:WebdevAlmaJserver
ode_modulesstyled-componentsdiststyled-components.cjs.js:1:13043)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (R:WebdevAlmaJserveruildundle.js:292:18)
    at __webpack_require__ (R:WebdevAlmaJserveruildundle.js:20:30)
[nodemon] app crashed - waiting for file changes before starting...
[BABEL] Note: The code generator has deoptimised the styling of "R:/Webdev/AlmaJ/server/node_modules/react-dom/cjs/react-dom.development.js" as it exceeds the max of "500KB".
Hash: 437588e65c86b4fecb36
Version: webpack 3.5.6.

question from:https://stackoverflow.com/questions/65952823/how-to-use-css-in-react-ssr

Answer 1

Waitting for answers