ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.34k stars 8.14k forks source link

🐛 [BUG]ant design pro 6.0版本重新配置打包输出js的路径 访问异常 #10990

Closed wangJacker closed 10 months ago

wangJacker commented 11 months ago

🐛 bug 描述

image

📷 复现步骤 | Recurrence steps

pro-cli 创建 选择umi4.0

然后在config.ts中配置: const versionInfo = require('../package.json'); chainWebpack: (config, { env, webpack }) => { if (env === "production") { config.output .filename(static/js/[name].[contenthash:8].${versionInfo.version}.js) .chunkFilename(static/js/[name].[contenthash:8]chunk.${versionInfo.version}.js); } } 执行tyarn build的时候并不会异常,但放置服务器下访问会出现异常

🏞 期望结果 | Expected results

希望能正常运行不会报错:Minified React error #299;

💻 复现代码 | Recurrence code

在config.ts中配置: const versionInfo = require('../package.json'); chainWebpack: (config, { env, webpack }) => { if (env === "production") { config.output .filename(static/js/[name].[contenthash:8].${versionInfo.version}.js) .chunkFilename(static/js/[name].[contenthash:8]chunk.${versionInfo.version}.js); } }

© 版本信息

🚑 其他信息

image image

chenshuai2144 commented 11 months ago

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成,可以尝试下方案,官方人员会在一定时间后继续继续处理。

你好!根据你提供的信息,我理解你遇到了 Ant Design Pro 6.0 版本重新配置打包输出 js 路径后访问异常的问题。首先,确保你按照以下步骤进行配置:

  1. config.ts 文件中引入 package.json 文件:const versionInfo = require('../package.json');
  2. chainWebpack 方法中,判断当前环境是否为生产环境:if (env === "production") { ... }
  3. 在生产环境下,配置 outputfilenamechunkFilename
config.output
  .filename(`static/js/[name].[contenthash:8].${versionInfo.version}.js`)
  .chunkFilename(`static/js/[name].[contenthash:8]chunk.${versionInfo.version}.js`);

如果你按照以上步骤进行配置,但访问时仍然出现错误 Minified React error #299,则可能是由于生成的文件路径不正确导致的问题。请先确保打包后的文件路径与你在服务器上的访问路径一致。根据你提供的截图,看起来路径可能是正确的。

另外,请确保你的项目使用的是正确的 React 版本,并且在服务器上的部署过程中没有出现其他错误。你可以尝试以下解决方案:

  1. 在项目根目录下执行 tyarn clean,然后重新执行 tyarn build,再次访问服务器看是否可以解决问题。
  2. 如果还是无法解决,请尝试删除构建产物(build 文件夹),重新执行 tyarn build 并部署到服务器上。

如果问题仍然存在,可能需要更多的信息来帮助定位问题。你可以提供更多的错误日志或告诉我你使用的 React 版本,以便更详细地分析问题。

另外,以下是一些有关 Ant Design Pro 和 umi 的文档,可能对你有帮助:

希望以上信息对你有所帮助,如果还有任何问题,请随时向我提问!

wangJacker commented 11 months ago

pro-cli 生成的项目 react 版本是18.2.0, "react": "^18.2.0" 同样的配置在pro5.0就是好的没有问题,很奇怪

wangJacker commented 11 months ago

{ "name": "ant-design-pro", "version": "6.0.0", "private": true, "description": "An out-of-box UI solution for enterprise applications", "scripts": { "analyze": "cross-env ANALYZE=1 max build", "build": "max build", "deploy": "npm run build && npm run gh-pages", "dev": "npm run start:dev", "gh-pages": "gh-pages -d dist", "i18n-remove": "pro i18n-remove --locale=zh-CN --write", "postinstall": "max setup", "jest": "jest", "lint": "npm run lint:js && npm run lint:prettier && npm run tsc", "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ", "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier -c --write \"/.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto", "openapi": "max openapi", "prepare": "husky install", "prettier": "prettier -c --write \"/.{js,jsx,tsx,ts,less,md,json}\"", "preview": "npm run build && max preview --port 8000", "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login", "serve": "umi-serve", "start": "cross-env UMI_ENV=dev max dev", "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev", "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev", "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev", "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev", "test": "jest", "test:coverage": "npm run jest -- --coverage", "test:update": "npm run jest -- -u", "tsc": "tsc --noEmit" }, "lint-staged": { "*/.{js,jsx,ts,tsx}": "npm run lint-staged:js", "*/.{js,jsx,tsx,ts,less,md,json}": [ "prettier --write" ] }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ], "dependencies": { "@ant-design/icons": "^4.8.0", "@ant-design/pro-components": "^2.3.57", "@ant-design/use-emotion-css": "1.0.4", "@umijs/route-utils": "^2.2.2", "ahooks": "^3.7.8", "antd": "^5.2.2", "classnames": "^2.3.2", "compression-webpack-plugin": "^10.0.0", "lodash": "^4.17.21", "moment": "^2.29.4", "omit.js": "^2.0.2", "rc-menu": "^9.8.2", "rc-util": "^5.27.2", "react": "^18.2.0", "react-captcha-code-custom": "^1.0.1", "react-dev-inspector": "^1.8.4", "react-dom": "^18.2.0", "react-helmet-async": "^1.3.0", "url-loader": "^4.1.1" }, "devDependencies": { "@ant-design/pro-cli": "^2.1.5", "@testing-library/react": "^13.4.0", "@types/classnames": "^2.3.1", "@types/express": "^4.17.17", "@types/history": "^4.7.11", "@types/jest": "^29.4.0", "@types/lodash": "^4.14.191", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@types/react-helmet": "^6.1.6", "@umijs/fabric": "^2.14.1", "@umijs/lint": "^4.0.52", "@umijs/max": "^4.0.52", "cross-env": "^7.0.3", "eslint": "^8.34.0", "express": "^4.18.2", "gh-pages": "^3.2.3", "husky": "^7.0.4", "jest": "^29.4.3", "jest-environment-jsdom": "^29.4.3", "lint-staged": "^10.5.4", "mockjs": "^1.1.0", "prettier": "^2.8.4", "swagger-ui-dist": "^4.15.5", "ts-node": "^10.9.1", "typescript": "^4.9.5", "umi-presets-pro": "^2.0.2" }, "engines": { "node": ">=12.0.0" } } 这个是我所有的JSON 文件希望有用

chenshuai2144 commented 10 months ago

目测是 try files 的问题,看看是不是nginx 的问题

image

你可以点进去看看