node.js - React 在生产模式下渲染一个空白页面
问题描述
我启动我的 nodejs 服务器并呈现一个空白页面，但我可以在 chrome 检查器中看到它正在index.html从我的反应构建中呈现我，但在标签内<div id='root'></div>没有任何内容。
在检查员控制台中我有这个问题
Uncaught SyntaxError: Unexpected token < main.a3362a52.chunk.js:1
Uncaught SyntaxError: Unexpected token < index.bundle.js:1
所以我想我不能因为这个错误而渲染我的组件/
通过搜索，我发现了两种探索的可能性。
首先我尝试解决这个语法错误问题，我发现它可能是 babel 的问题，所以我尝试在我的index.html
It remove the syntax error aboutindex.bundle.js但块上的另一个仍然存在，因为它是由我的 react build 生成的.
然后我试着看看路由器是否有问题，所以我在我的输入中index.js输入了 ReactDOM.render(test, document.getElementById('root')); 但是这个 div 没有渲染，所以我想这不是路由器问题。
我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>my app</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<script src="index.bundle.js" type = "text/jsx">
</script>
</html>
我的index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter basename='/'>
<App />
</BrowserRouter>,
document.getElementById('root'));
我的.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
],
"plugins": [
[
"@babel/plugin-proposal-class-properties"],
["react-intl",
{
"messagesDir": "./public/messages/"
}
]
]
}
和我的 webpack.config.js
const webpack = require('webpack');
const path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
]
},
devServer: {
contentBase: './build'
}
}
console.log(path.resolve(__dirname, 'build'));
module.exports = config;
所以我认为问题来自 babel 但我不知道如何解决它，你有什么想法或其他方式我应该探索解决我的问题吗？
谢谢你
编辑
package.json
{
"name": "my app",
"version": "0.1.0",
"license": "None",
"private": true,
"config": {
"mongoDir": "/usr/local"
},
"dependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^3.5.1",
"@material-ui/icons": "^3.0.1",
"@svgr/webpack": "2.4.1",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.18.0",
"b64-to-blob": "1.2.19",
"babel-eslint": "9.0.0",
"babel-loader": "^8.0.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-plugin-react-intl": "^3.0.1",
"babel-preset-react-app": "^6.1.0",
"bfj": "6.1.1",
"bootstrap": "^4.1.2",
"bootstrap-select": "1.13.2",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"classnames": "^2.2.6",
"clean-webpack-plugin": "^1.0.0",
"core-js": "2.5.7",
"cors": "2.8.4",
"country-select-js": "2.0.1",
"domino": "2.1.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.5",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"express": "4.16.3",
"express-session": "1.15.6",
"font-awesome": "4.7.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"hammerjs": "2.0.8",
"html-webpack-plugin": "4.0.0-alpha.2",
"i18n-iso-countries": "3.7.8",
"i18next": "^12.1.0",
"identity-obj-proxy": "3.0.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"jquery": "3.3.1",
"js-string-compression": "1.0.1",
"jwt-decode": "^2.2.0",
"lodash": "4.17.11",
"mini-css-extract-plugin": "0.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"popper.js": "1.14.3",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"react": "^16.6.3",
"react-app-polyfill": "^0.1.3",
"react-cookie": "^3.0.8",
"react-country-region-selector": "^1.4.3",
"react-dev-utils": "^6.1.1",
"react-dom": "^16.6.3",
"react-facebook-login": "^4.1.1",
"react-flags-select": "^1.1.9",
"react-google-login": "^4.0.0",
"react-hot-loader": "^4.3.12",
"react-i18next": "^8.3.8",
"react-intl": "^2.7.2",
"react-phone-input-2": "^2.7.0",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-sidebar": "^3.0.2",
"react-youtube": "^7.8.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"resolve": "1.8.1",
"rxjs": "6.2.2",
"simple-line-icons": "2.4.1",
"terser-webpack-plugin": "1.1.0",
"ts-loader": "4.4.2",
"ts-node": "7.0.0",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3",
"youtube-player": "5.5.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@types/compression": "0.0.36",
"@types/cors": "2.8.4",
"@types/jasmine": "2.8.8",
"@types/jasminewd2": "2.0.3",
"@types/jquery": "3.3.10",
"@types/lodash": "4.14.116",
"@types/node": "8.10.20",
"babel-loader": "^8.0.4",
"babel-plugin-transform-react-jsx": "^6.24.1",
"codelyzer": "4.4.2",
"css-loader": "^1.0.0",
"dotenv": "^6.0.0",
"file-loader": "^2.0.0",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.4",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "2.0.1",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.2.0",
"node-sass": "^4.10.0",
"protractor": "5.3.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"ts-node": "7.0.0",
"tslint": "5.10.0",
"typescript": "2.7.2",
"url-loader": "^1.1.1",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"scripts": {
"start": "node scripts/start.js",
"build": "npm run clean && npm run build:langs && node scripts/build.js && npm run compile ",
"test": "node scripts/test.js --env=jsdom",
"clean": "rm -rf ./build/index.bundle.js",
"compile": "NODE_ENV=production webpack --config ./webpack.config.js --progress --colors",
"build:langs": "NODE_ENV='production' babel-node scripts/mergeMessages.js"
},
"proxy": "http://localhost:5000/",
"engines": {
"node": "~8.11.3",
"npm": "~5.6.0"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
}
}
解决方案
推荐阅读
- sql-server - SSIS 将文件从一个域移动到另一个域
- php - $wpdb->get_row() 是否将 LIMIT 1 添加到查询中？
- mapbox - 是否可以在 Mapbox Studio 中删除一定距离内的重复点标签？
- reactjs - 在 React Native 中导入和导出组件
- git - 在本地和远程之间显示不同的文件
- syntax - 为什么“朱莉娅语言文档”中的这一行为输入参数是不同类型的情况定义了一个外部构造函数？
- rust - 编写一个基于输入 ident 令牌调用方法的宏
- selenium-ide - 在 chrom 上的 Selenium IDE 中使用 VerifyElementPresent 的输出状态
- node.js - 当要求工作正常时，为什么导入模块会导致“类型'typeof import上的属性不存在”？
- python - escpos 打印机图像未对齐到中心