Неожиданный токен React Server Components и Webpack при запуске сервера
Я провожу тесты компонентов React Server с проектом коллеги и блокирую ошибку, которая появляется из .
Я могу собрать проект, веб-пакет сделал это хорошо, без ошибок, но когда я запускаю сервер, у меня есть эта ошибка в терминале, вот полный результат :
assets by path ../build/components/*.ts 2.21 KiB
asset ../build/components/EncryptButton.d.ts 364 bytes [emitted]
asset ../build/components/DecryptContent.d.ts 355 bytes [emitted]
asset ../build/components/Footer.d.ts 339 bytes [emitted]
+ 4 assets
assets by path ../build/pages/*.ts 1.5 KiB
asset ../build/pages/Decrypted.d.ts 339 bytes [emitted]
asset ../build/pages/Encrypted.d.ts 339 bytes [emitted]
asset ../build/pages/Error.d.ts 339 bytes [emitted]
+ 2 assets
assets by path ../build/*.ts 155 bytes
asset ../build/App.d.ts 89 bytes [emitted]
asset ../build/i18n.d.ts 49 bytes [emitted]
asset ../build/index.d.ts 17 bytes [emitted]
asset index.js 74.4 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 44.8 KiB
modules by path ./src/components/*.tsx 11.8 KiB 7 modules
modules by path ./src/pages/*.tsx 7.87 KiB 5 modules
./server/index.js 849 bytes [built] [code generated]
./src/App.tsx 1.5 KiB [built] [code generated]
./src/ressources/LogoWhite.png 22.8 KiB [built] [code generated]
modules by path external "react-bootstrap/ 84 bytes
external "react-bootstrap/esm" 42 bytes [built] [code generated]
external "react-bootstrap/esm/Button" 42 bytes [built] [code generated]
+ 8 modules
webpack 5.75.0 compiled successfully in 2785 ms
[nodemon] restarting due to changes...
[nodemon] starting `node ./server-build/index.js`
Compiled successfully.
File sizes after gzip:
[nodemon] restarting due to changes...
[nodemon] starting `node ./server-build/index.js`
82.01 kB build/static/js/main.4e82a657.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
/src/node_modules/react-bootstrap/esm/index.js:1
export { default as Accordion } from './Accordion';
^^^^^^
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1088:15)
at Module._compile (node:internal/modules/cjs/loader:1123:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at react-bootstrap/esm (/src/server-build/index.js:199:18)
at __webpack_require__ (/src/server-build/index.js:283:41)
Node.js v18.12.1
[nodemon] app crashed - waiting for file changes before starting...
Я думал, что это проблема переноса, поэтому я включаю папку react-bootstrap в сборку. Но не более того (однако я вижу, что папка хорошо встраивается в терминал)!
Я много чего тестировал и читал много тем, но не могу узнать.
сервер/index.js
import path from 'path';
import fs from 'fs';
import React from 'react';
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import App from '../src/App.tsx';
const PORT = process.env.REACT_APP_SERVER_PORT || 8000;
const app = express();
app.get('/', (req,res) => {
const app = ReactDOMServer.renderToString(<App />);
const indexFile = path.resolve('./build/index.html');
fs.readFile(indexFile, 'utf-8', ( err, data ) => {
if(err) {
console.error('Erreur: ', err);
return res.status(500).send('Oops, plus de chance la prochaine fois!')
}
return res.send(
data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
);
});
});
app.use(express.static('/build'));
app.listen(PORT, () => {
console.log(`Serveur en écoute sur le port ${PORT}`)
});
webpack.config.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './server/index.js',
target: 'node',
externals: [nodeExternals({
allowlist: ['react-bootstrap','/^Accordion/']
})],
output: {
path: path.resolve('server-build'),
filename: 'index.js'
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js"],
// Add support for TypeScripts fully qualified ESM imports.
extensionAlias: {
".js": [".js", ".ts", ".tsx"],
".cjs": [".cjs", ".cts"],
".mjs": [".mjs", ".mts"]
}
},
module: {
rules: [
{
test: /\.([cm]?js|jsx)$/,
use: "babel-loader",
},
{
test: /\.([cm]?ts|tsx)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
{
loader: 'ts-loader',
options: {
compilerOptions: {
noEmit: false,
},
},
},
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
use: 'url-loader?limit=100000'
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
}
]
}
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}
пакет.json
{
"name": "flashpaper_front",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.2.5",
"@types/node": "^18.11.18",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"axios": "^1.2.2",
"bootstrap": "^5.2.3",
"express": "^4.18.2",
"i18next": "^22.4.6",
"install": "^0.13.0",
"npm": "^9.2.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.1.1",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
"web-vitals": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev:build-server": "NODE_ENV=development webpack --mode=development -w",
"dev:start": "nodemon ./server-build/index.js",
"dev": "npm-run-all --parallel build dev:* ",
"update": "ncu -u"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.20.7",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"babel-loader": "^9.1.0",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"nodemon": "^2.0.20",
"npm-run-all": "^4.1.5",
"style-loader": "^3.3.1",
"ts-loader": "^9.4.2",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-node-externals": "^3.0.0"
}
}
Я даже поставил SSRProvider изreact-bootstrapобертывание приложения на случай, если
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './i18n';
import App from './App';
import i18next from 'i18next';
import { I18nextProvider } from 'react-i18next';
import { SSRProvider } from 'react-bootstrap';
ReactDOM.hydrate(
<I18nextProvider i18n={i18next}>
<SSRProvider>
<App />
</SSRProvider>
</I18nextProvider>,
document.getElementById('root')
);