Imt*_*ury 5 node.js reactjs webpack babeljs server-side-rendering
我正在尝试在我的 Node Express 服务器和 React 应用程序中实现 SSR。
经过困难之后，我可以通过 webpack 和 babel 编译我的文件，但是当我尝试时，node dist/server.js我收到此错误：
internal/modules/cjs/loader.js:1080
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: Z:\alpha\node_modules\@babel\runtime\helpers\esm\defineProperty.js
require() of ES modules is not supported.
require() of Z:\alpha\node_modules\@babel\runtime\helpers\esm\defineProperty.js from Z:\alpha\dist\server.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 defineProperty.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from Z:\alpha\node_modules\@babel\runtime\helpers\esm\package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.@babel/runtime/helpers/esm/defineProperty (Z:\alpha\dist\server.js:63287:18)
at __webpack_require__ (Z:\alpha\dist\server.js:64334:42)
at Module../node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2.js (Z:\alpha\dist\server.js:47967:99)
at __webpack_require__ (Z:\alpha\dist\server.js:64334:42)
at Module../views/web/src/lib/connector.js (Z:\alpha\dist\server.js:42244:154)
at __webpack_require__ (Z:\alpha\dist\server.js:64334:42)
at Object../views/web/src/hooks/useFetch.ts (Z:\alpha\dist\server.js:53066:22)
at __webpack_require__ (Z:\alpha\dist\server.js:64334:42)
at Object../views/web/src/hooks/index.ts (Z:\alpha\dist\server.js:52993:18)
at __webpack_require__ (Z:\alpha\dist\server.js:64334:42)
at Object../views/web/src/components/BottomCartIcon/BottomCartIcon.tsx (Z:\alpha\dist\server.js:48855:15)
at __webpack_require__ (Z:\alpha\dist\server.js:64334:42)
at Object../views/web/src/components/BottomCartIcon/index.ts (Z:\alpha\dist\server.js:48940:24)
at __webpack_require__ (Z:\alpha\dist\server.js:64334:42)
at Object../views/web/src/hoc/Layout/Layout.tsx (Z:\alpha\dist\server.js:52823:24)
at __webpack_require__ (Z:\alpha\dist\server.js:64334:42)
at Object../views/web/src/hoc/Layout/index.tsx (Z:\alpha\dist\server.js:52940:16) {
code: 'ERR_REQUIRE_ESM'
}
webpack.config.js
const nodeExternals = require('webpack-node-externals');
const webpack = require("webpack");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require("autoprefixer");
const path = require("path");
const browserConfig = {
entry: "./views/web/src/index.tsx",
output: {
path: path.join(__dirname, 'public/webpack'),
publicPath: 'public/webpack',
filename: "./public/webpack/bundle.js"
},
devtool: "cheap-module-source-map",
mode: "development",
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=100000' },
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: "file-loader",
options: {
name: "public/media/[name].[ext]",
publicPath: url => url.replace(/public/, "")
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: { importLoaders: 1 }
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [autoprefixer()]
}
}
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: { presets: ["react-app"] }
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.jsx', '.js']
},
plugins: [
new MiniCssExtractPlugin()
]
};
const serverConfig = {
entry: "./lib/www",
target: "node",
externals: [nodeExternals()],
mode: "development",
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/dist',
filename: "server.js",
libraryTarget: "commonjs2"
},
devtool: "cheap-module-source-map",
resolve: {
extensions: ['.ts', '.tsx', '.jsx', '.js']
},
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=100000' },
{
test: /\.node$/,
use: "node-loader"
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: "file-loader",
options: {
name: "public/media/[name].[ext]",
publicPath: url => url.replace(/public/, ""),
emit: false
}
},
{
test: /\.css$/,
use: [
{
loader: "css-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: { presets: ["react-app", "@babel/preset-env"] }
}
]
}
};
module.exports = [browserConfig, serverConfig];
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": false,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true
}
}
.babelrc
{
"presets": [
"@babel/env",
"@babel/react"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-async-to-generator",
"@babel/transform-arrow-functions",
"@babel/proposal-object-rest-spread",
"@babel/proposal-class-properties"
],
"sourceType": "unambiguous"
}
package.json
{
"name": "alpha",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "SET NODE_ENV=development& webpack -w & SET NODE_ENV=development & node dist/server.js",
"production": "SET NODE_ENV=production & webpack -w & SET NODE_ENV=production & node dist/server.js"
},
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/isomorphic-fetch": "0.0.35",
"@types/jest": "^26.0.8",
"@types/node": "^14.0.27",
"@types/react-bootstrap": "^1.0.1",
"@types/react-content-loader": "^4.0.0",
"@types/react-infinite-scroll-component": "^4.2.5",
"@types/react-redux": "^7.1.9",
"@types/react-router-dom": "^5.1.5",
"@types/react-select": "^3.0.15",
"@types/yup": "^0.29.3",
"antd": "^4.6.1",
"axios": "^0.19.2",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"connect-mongo": "^3.2.0",
"cookie": "^0.4.1",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"country-state-city": "^1.0.5",
"csvtojson": "^2.0.10",
"debug": "~2.6.9",
"dotenv": "^8.2.0",
"du": "^1.0.0",
"ejs": "~2.6.1",
"express": "^4.17.1",
"express-formidable": "^1.2.0",
"express-session": "^1.17.0",
"express-useragent": "^1.0.15",
"extract-zip": "^1.7.0",
"file-type": "^14.7.1",
"font-awesome": "^4.7.0",
"formidable": "^1.2.1",
"formik": "^2.1.5",
"he": "^1.2.0",
"helmet": "^3.23.3",
"html-react-parser": "^0.13.0",
"http-errors": "~1.6.3",
"isomorphic-fetch": "^2.2.1",
"jimp": "^0.9.8",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"mongodb": "^3.6.0",
"morgan": "~1.9.1",
"nodemailer": "^6.4.11",
"owl.carousel": "^2.3.4",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"query-string": "^6.13.1",
"react": "^16.13.1",
"react-alert": "^7.0.2",
"react-alert-template-basic": "^1.0.0",
"react-alice-carousel": "^1.19.3",
"react-bootstrap": "^1.3.0",
"react-checkbox-group": "^5.0.2",
"react-content-loader": "^5.1.0",
"react-cookie-consent": "^5.1.3",
"react-custom-scrollbars": "^4.2.1",
"react-datepicker": "^3.1.3",
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
"react-image-gallery": "^1.0.8",
"react-image-magnify": "^2.7.4",
"react-image-zoom": "^1.3.1",
"react-infinite-scroll-component": "^5.0.5",
"react-items-carousel": "^2.8.0",
"react-meta-tags": "^0.7.4",
"react-multi-carousel": "^2.5.5",
"react-owl-carousel": "^2.3.1",
"react-query": "^2.5.14",
"react-radio-buttons": "^1.2.2",
"react-redux": "^7.2.1",
"react-responsive-carousel": "^3.2.9",
"react-router-dom": "^5.2.0",
"react-router-modal": "^1.5.2",
"react-scripts": "^3.4.1",
"react-scroll": "^1.8.1",
"react-scroll-into-view-if-needed": "^2.1.7",
"react-select": "^3.1.0",
"react-share": "^4.2.1",
"react-slick": "^0.27.11",
"react-star-rating-component": "^1.4.1",
"reactstrap": "^8.5.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"rimraf": "^3.0.2",
"sass": "^1.32.12",
"sharp": "^0.25.4",
"shortid": "^2.2.15",
"socket.io": "^2.3.0",
"styled-components": "^5.1.1",
"uuid": "^8.3.0",
"xml2js": "^0.4.23",
"xmlbuilder": "^15.1.1",
"yup": "^0.29.2"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-transform-arrow-functions": "^7.12.1",
"@babel/plugin-transform-async-to-generator": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "^7.12.7",
"@babel/runtime": "^7.12.5",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react-app": "^10.0.0",
"copy-webpack-plugin": "^6.3.2",
"css-loader": "^5.2.4",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.2",
"node-loader": "^2.0.0",
"node-sass": "^5.0.0",
"postcss-loader": "^5.2.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"ts-loader": "^9.1.1",
"typescript": "^4.2.4",
"webpack": "^5.10.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.0",
"webpack-node-externals": "^3.0.0"
}
}