I am currently in the process of transitioning my React project from client-side rendering to server-side rendering.
Unfortunately, I have encountered an issue with my webpack configuration for CSS that was working perfectly fine in my original project (client-side rendering).
Although the build process runs smoothly, I encounter a syntax error when trying to execute the project.
/home/choiyeonsuk/web/ssr-tutorial/ssr-wis/node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css:1
(function (exports, require, module, __filename, __dirname) { .react-bs-table .react-bs-container-header .sort-column,.s-alert-close,td.react-bs-table-expand-cell,th.react-bs-table-expand-cell>div{cursor:pointer}.react-bs-table-container .react-bs-table-search-form{margin-bottom:0}.react-bs-table-bordered{border:1px solid #ddd;border-radius:5px}.react-bs-table table{margin-bottom:0;table-layout:fixed}.react-bs-table table td,.react-bs-table table th{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.react-bs-table-pagination{margin-top:10px}.react-bs-table-tool-bar{margin-bottom:5px}.react-bs-container-footer,.react-bs-container-header{overflow:hidden;width:100%}.react-bs-container-body{overflow:auto;width:100%}.react-bootstrap-table-page-btns-ul{float:right;margin-top:0}.react-bs-table .table-bordered{border:0;outline:0!important}.react-bs-table .table-bordered>thead>tr>td,.react-b
SyntaxError: Unexpected token .
at new Script (vm.js:83:7)
at createScript (vm.js:267:10)
at Object.runInThisContext (vm.js:319:10)
at Module._compile (internal/modules/cjs/loader.js:686:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:659:17)
at require (internal/modules/cjs/helpers.js:22:18)
The tools I am using are webpack4 & babel7.
This is what my webpack.config.js looks like:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const serverConfig = {
mode: 'development',
target: 'node',
node: {
__dirname: false,
},
externals: [nodeExternals()],
entry: {
'index.js': path.resolve(__dirname, 'src/server.js'),
},
module: {
rules: [
// webpack rules here
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]',
},
};
const clientConfig = {
mode: 'development',
target: 'web',
entry: {
// webpack entry points here
},
module: {
rules: [
// additional webpack rules here
],
},
output: {
// webpack output configuration here
},
plugins: [
// webpack plugins here
]
}
module.exports = [serverConfig, clientConfig];
Here is my babel.config.js file:
const presets = ['@babel/preset-env', '@babel/preset-react'];
const plugins = [
// babel plugins here
];
module.exports = {
presets,
plugins,
};
After examining the issue, I believe it may be related to the webpack `nodeExternals` not properly excluding `node_modules`.
Any suggestions on how to resolve this?