I need to import .css files inline from within my Server-Side rendered React application. I have configured my Webpack file to use what I believe are the appropriate loaders, however I am still receiving the following SyntaxError:
~/.../node_modules/rc-slider/assets/index.css:1
(function (exports, require, module, __filename, __dirname) { .rc-slider {
^
SyntaxError: Unexpected token .
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.rc-slider/assets/index.css (/Users/roberthunter/DEV/AMNE/website-6.0/build/webpack:/external "rc-slider/assets/index.css":1:1)
I have consulted several guides including Webpack's configuration for MiniCssExtractPlugin
https://webpack.js.org/plugins/mini-css-extract-plugin/#root
The following SO question seems to address my problem, but the solution does not work for me.
Webpack css-loader is not importing CSS
I also referenced the following to get an understanding of how css-loader and style-loader actually operate
Webpack style-loader vs css-loader
I have tried many variations of the above including importing the css with loaders inline. Ex:
import SliderCSS from 'style-loader!css-loader!rc-slider/assets/index.css';
Here are my following relevant pieces of code.
webpack.confing.js (For client-side app)
// ...imports above
module.exports = {
mode: dev ? "development" : "production",
// context: path.join(__dirname, "src"),
devtool: !dev ? "none" : "source-map",
entry: {
vendor: ["styled-components"],
webflow: ["./src/app/webflow.js"],
app: ["@babel/polyfill/noConflict", "./src/app/react.js"],
wscripts: ["@babel/polyfill/noConflict", "./src/webflow-scripts/index.js"],
},
resolve: {
modules: [
path.resolve("./"),
"node_modules",
],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
}
}
},
{
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
use: [
MiniCSSExtractPugin.loader,
// 'style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|vtt)$/,
loader: 'file-loader',
},
{
test: /\.(jpg|png|gif)$/,
loaders: [
'file-loader',
{
loader: 'image-webpack-loader',
query: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
},
plugins: [
new MiniCSSExtractPugin(),
new webpack.ProvidePlugin({
"React": "react"
}),
new webpack.DefinePlugin({
'process.env.IS_BROWSER_SIDE': JSON.stringify(true), // Used to determine if code is rendering on the client or the server.
'process.env.NODE_ENV': JSON.stringify(true), // Used to determine if code is rendering on the client or the server.
}),
]
};
webpack.server.config.js (For webpacking server)
// ...imports above
module.exports = {
mode: dev ? "development" : "production",
// context: path.join(__dirname, "src"),
devtool: !dev ? "none" : "source-map",
entry: {
server: ["@babel/polyfill/noConflict", "./src/server/server.js"],
},
resolve: {
modules: [
path.resolve("./"),
"node_modules",
],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
}
}
},
{
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
use: [
MiniCSSExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.scss$/,
use: [MiniCSSExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.(eot|svg|ttf|woff|woff2|vtt)$/,
loader: 'file-loader',
},
{
test: /\.(jpg|png|gif)$/,
loaders: [
'file-loader',
{
loader: 'image-webpack-loader',
query: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].bundle.js",
},
plugins: [
new WebpackSourceMapSupport(),
new webpack.ProvidePlugin({
"React": "react"
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(true), // Used to determine if code is rendering on the client or the server.
}),
new MiniCSSExtractPlugin(),
],
target: 'node',
node: {
__dirname: false,
},
externals: [nodeExternals()],
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"babel-plugin-styled-components",
["css-modules-transform", {
"extensions": [".css"],
"keepImport": true,
}],
],
}
package.json (scripts)
"scripts": {
"build:dev": "webpack --config webpack.config.js --progress --watch",
"build:server:dev": "webpack --config webpack.server.config.js --progress --watch",
"start": "npm-run-all --parallel build:dev build:server:dev server:dev-webpack",
"server:dev-webpack": "nodemon build/server.bundle.js",
With my current setup, I am expecting the .css modules I am importing to be parsed and added to a /dist directory along with my other webpacked assets so that they can be served properly by the express server, whose code is webpacked into the /build directory. However, adding the a line within my app to import '.../../some.css raises this syntax error.
Also, I am aware that there are boilerplates out there that simplify rendering react server-side. I tried Next.js however it was too opinionated to meet my needs (serving statically generated html from a 3rd party web builder). I not completely new to webpack, however I do not have a strong grasp on its inner workings so any additional guidance, help or suggestions are greatly appreciated.
