after trying several days without success I am writing this post.
I want to add server side rendering (SSR) to my application. I followed this tutorial until the point I have to call npm run build. I always get the following error:
node:internal/modules/cjs/loader:1126
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /<PATH_HERE>/node_modules/@babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.
require() of /<PATH_HERE>/node_modules/@babel/runtime/helpers/esm/extends.js from /<PATH_HERE>/dist/main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename extends.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /<PATH_HERE>/node_modules/@babel/runtime/helpers/esm/package.json.
I think it's something with the webpack.config.js:
const nodeExternals = require("webpack-node-externals");
//import nodeExternals from "webpack-node-externals"
const common = {
devtool: "cheap-module-source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader", // asks bundler to use babel loader to transpile es2015 code
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
exclude: [/node_modules/, /public/],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf)(\?[a-z0-9=.]+)?$/,
use: "url-loader?limit=100000",
},
{
test: /\.svg$/,
use: ["@svgr/webpack"],
},
],
},
};
const clientConfig = {
...common,
entry: "./client/src/index",
output: {
path: `${__dirname}/public`,
},
};
const serverConfig = {
...common,
target: "node",
externals: [nodeExternals()],
entry: "./server.js",
output: {
path: `${__dirname}/dist`,
},
};
module.exports = [clientConfig, serverConfig];
My package.json file:
{
"name": "Website Name",
"version": "1.0.0",
"description": "My Website",
"main": "dist/main.js",
"module": "dist/main.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "NODE_ENV=production node dist/main.js",
"build": "rm -rf dist public && webpack --mode production --progress",
"server": "nodemon server.js",
"heroku-postbuild": "npm install --prefix client && npm run build",
"dev": "rm -rf dist public && webpack --mode development --progress"
},
"author": "It's me",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.14.0",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@material-ui/styles": "^4.11.4",
"@svgr/webpack": "^5.5.0",
"bcrypt": "^5.0.0",
"cjs-loader": "^0.1.0",
"compression": "^1.7.4",
"concurrently": "^5.3.0",
"cors": "^2.8.5",
"css-loader": "^5.2.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"file-loader": "^6.2.0",
"humps": "^2.0.1",
"ignore-styles": "^5.0.1",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"mongoose": "^5.11.8",
"normalizr": "^3.6.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0",
"react-router": "^6.0.0-beta.0",
"redux": "^4.1.0",
"redux-logger": "^3.0.6",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"
},
"devDependencies": {
"@babel/core": "^7.14.3",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.14.3",
"@babel/preset-env": "^7.14.4",
"@babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3",
"babel-plugin-transform-assets": "^1.0.2",
"html-webpack-plugin": "^5.3.1",
"nodemon": "^2.0.4",
"npm-run-all": "^4.1.5",
"react-jss": "^10.6.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^3.0.0"
}
}
If you need any further information just let me know I will answer as soon as possible. I am really frustrated about the issue :(
