Hi there I am trying to apply custom CSS to my react component in React SSR project however, it causes an error:
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"
at R:\Webdev\AlmaJ\server\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (R:\Webdev\AlmaJ\server\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (R:\Webdev\AlmaJ\server\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (R:\Webdev\AlmaJ\server\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (R:\Webdev\AlmaJ\server\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (R:\Webdev\AlmaJ\server\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (R:\Webdev\AlmaJ\server\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (R:\Webdev\AlmaJ\server\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (R:\Webdev\AlmaJ\server\node_modules\babel-loader\lib\index.js:50:20)
at Object.module.exports (R:\Webdev\AlmaJ\server\node_modules\babel-loader\lib\index.js:175:20)
@ ./node_modules/css-loader/dist/cjs.js!./src/style.css 1:27-84
@ ./src/style.css
@ ./src/index.js
when I try to import a CSS file in a js file.
my package.json file is here:
"version": "1.0.0",
"description": "AlmaJ ssr project",
"main": "index.js",
"scripts": {
"dev": "npm-run-all --parallel dev:*",
"dev:server": "nodemon --watch build --exec node build/bundle.js",
"dev:build-server": "webpack --config webpack.server.js --watch",
"dev:build-client": "webpack --config webpack.client.js --watch"
},
"author": "",
"dependencies": {
"axios": "0.16.2",
"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-es2017": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"compression": "1.7.0",
"concurrently": "3.5.0",
"css-loader": "2.1.0",
"express": "4.15.4",
"express-http-proxy": "1.0.6",
"lodash": "4.17.4",
"nodemon": "1.12.0",
"npm-run-all": "4.1.1",
"react": "16.3.0",
"react-bootstrap": "^1.4.3",
"react-dom": "16.0.0",
"react-helmet": "5.2.0",
"react-redux": "5.0.6",
"react-router-config": "1.0.0-beta.4",
"react-router-dom": "4.2.2",
"redux": "3.7.2",
"redux-thunk": "2.2.0",
"serialize-javascript": "1.4.0",
"style-loader": "0.23.1",
"styled-components": "^5.2.1",
"webpack": "3.5.6",
"webpack-dev-server": "2.8.2",
"webpack-merge": "4.1.0",
"webpack-node-externals": "1.6.0"
},
here are my webpack files
webpack.server.js:
const path = require("path");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.js");
const webpackNodeExternals = require("webpack-node-externals");
const config = {
target: "node",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "build"),
},
externals: [webpackNodeExternals()],
};
module.exports = merge(config, baseConfig);
webpack.client.js:
const path = require("path");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.js");
const config = {
entry: "./src/client/client.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "public"),
},
};
module.exports = merge(config, baseConfig);
webpack.base.js:
module.exports = {
module: {
rules: [
{
test: /\.js?$/,
loader: "babel-loader",
exclude: "/node_modules/",
options: {
presets: [
"react",
"stage-0",
["env", { targets: { browsers: ["last 2 versions"] } }],
],
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};
I also tried to use styled-components
import styled from "styled-components";
const Some = styled.header`
h1 {
color: red;
}
`;
<Some>
<h1>hi</h1>
</Some>
The server runs before it gets a request from a browser but when the request comes in:
TypeError: element.type.toLowerCase is not a function
at ReactDOMServerRenderer.renderDOM (R:\Webdev\AlmaJ\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2776:28)
at ReactDOMServerRenderer.render (R:\Webdev\AlmaJ\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2755:23)
at ReactDOMServerRenderer.read (R:\Webdev\AlmaJ\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2722:19)
at renderToString (R:\Webdev\AlmaJ\server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2980:25)
at exports.default (R:\Webdev\AlmaJ\server\build\bundle.js:396:44)
at R:\Webdev\AlmaJ\server\build\bundle.js:329:42
at process._tickCallback (internal/process/next_tick.js:68:7)
[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".
I've been spending so much time solving this problem, I would really appreciate any help