I made an SSR project with basic requirements everything was fine until I used CSS in my project for styling but I got an error that the loader is not there for understanding CSS so I modified my Webpack config using the Webpack-config file for the server as
module.exports = {
entry: "./src/server/index.js",
target: 'node',
mode: 'development',
module: {
rules: [
{
test: /\.js$|jsx/,
exclude: /node_modules/,
use:["css-loader","style-loader"],
loader : "babel-loader",
options: {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"@babel/preset-react"
]
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}
]
},
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
}
and webpack-config file for the client:
module.exports = {
entry: "./src/client/index.js",
mode: 'development',
module: {
rules: [
{
test: /\.js$|jsx/,
exclude: /node_modules/,
loader : "babel-loader",
options: {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"@babel/preset-react"
]
}
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}
]
},
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
}
used navigation.css file with some css code but I am getting an error
webpack://react-ssr-latest/./src/client/component/navigation.css?:1
throw new Error("Module parse failed: Unexpected token (1:0)\nYou 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\n> *{\n| padding:
0px;\n| margin: 0px;");
^
Error: Module parse failed: Unexpected token (1:0)
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
> *{
| padding: 0px;
| margin: 0px;
at eval (webpack://react-ssr-latest/./src/client/component/navigation.css?:1:7)
at Object../src/client/component/navigation.css (/Users/shreyg/Desktop/React-
Practice/SSR-latest/dist/bundle.js:2543:1)
at __webpack_require__ (/Users/shreyg/Desktop/React-Practice/SSR-
latest/dist/bundle.js:2930:42)
at eval (webpack://react-ssr-latest/./src/client/component/Navigation.js?:7:73)
at Module../src/client/component/Navigation.js (/Users/shreyg/Desktop/React-
Practice/SSR-latest/dist/bundle.js:523:1)
at __webpack_require__ (/Users/shreyg/Desktop/React-Practice/SSR-
latest/dist/bundle.js:2930:42)
at eval (webpack://react-ssr-latest/./src/client/component/App.js?:5:69)
at Module../src/client/component/App.js (/Users/shreyg/Desktop/React-Practice/SSR-
latest/dist/bundle.js:501:1)
at __webpack_require__ (/Users/shreyg/Desktop/React-Practice/SSR-
latest/dist/bundle.js:2930:42)
at eval (webpack://react-ssr-latest/./src/server/HTMLRenderer.js?:12:79)
[nodemon] app crashed - waiting for file changes before starting...
/Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/UseEffectRulePlugin.js:24
throw ruleSetCompiler.error(
^
Error: Compiling RuleSet failed: A Rule must not have a 'loader' property when it has
a 'use' property (at ruleSet[1].rules[0].loader: babel-loader)
at RuleSetCompiler.error (/Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:373:10)
at conflictWith (/Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/UseEffectRulePlugin.js:24:29)
at /Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/UseEffectRulePlugin.js:36:6
at Hook.eval [as call] (eval at create (/Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:49:1)
at RuleSetCompiler.compileRule (/Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:177:19)
at /Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:153:16)
at RuleSetCompiler.compileRule (/Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:184:30)
at /Users/shreyg/Desktop/React-Practice/SSR-
latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
ERROR: "dev:webpack-server" exited with 1.
