我有一个 Laravel 8 应用程序，我正在其上运行 React。我已经成功构建了我的应用程序，但现在我需要编译我的应用程序以进行生产，但每当我运行 npm run prod 时，它总是失败。我相信这和我的react redux有关。每当我尝试编译生产时，它似乎无法处理这种类型的文件配置。同时 npm run watch 仍然工作得很好。
错误如下:
C:\xampp\htdocs\pro-oms>npm run prod
> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20454e4c4954457f5052494d4560110e140e13" rel="noreferrer noopener nofollow">[email protected]</a> prod C:\xampp\htdocs\pro-oms
> npm run production
> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98c8785809d8cb6999b80848ca9d8c7ddc7da" rel="noreferrer noopener nofollow">[email protected]</a> production C:\xampp\htdocs\pro-oms
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
ERROR Failed to compile with 1 errors 17:32:19
error in ./resources/js/components/app.js
Module parse failed: Unexpected token (41:4)
You may need an appropriate loader to handle this file type.
| const render = messages => {
| ReactDOM.render(
> <Provider store={store}>
| <LanguageProvider messages={messages}>
| <ConnectedRouter history={history}>
@ ./resources/js/app.js 15:0-30
@ multi ./resources/js/app.js ./resources/sass/app.scss
3 assets
ERROR in ./resources/js/components/app.js 41:4
Module parse failed: Unexpected token (41:4)
You may need an appropriate loader to handle this file type.
| const render = messages => {
| ReactDOM.render(
> <Provider store={store}>
| <LanguageProvider messages={messages}>
| <ConnectedRouter history={history}>
@ ./resources/js/app.js 15:0-30
@ multi ./resources/js/app.js ./resources/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187d7674716c7d47686a71757d5829362c362b" rel="noreferrer noopener nofollow">[email protected]</a> production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cf9f2f0f5e8f9c3eceef5f1f9dcadb2a8b2af" rel="noreferrer noopener nofollow">[email protected]</a> production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\KALU KECHUKWU EA\AppData\Roaming\npm-cache\_logs\2020-12-21T16_32_26_115Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0663686a6f72635976746f6b63463728322835" rel="noreferrer noopener nofollow">[email protected]</a> prod: `npm run production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50353e3c3924350f2022393d3510617e647e63" rel="noreferrer noopener nofollow">[email protected]</a> prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\username\AppData\Roaming\npm-cache\_logs\2020-12-21T16_32_26_214Z-debug.log
这是我的package.json:
{
"name": "enlite_prime",
"version": "1.4.3",
"description": "React.js fullstack web template for expert and experienced fullstack developer",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"browserslist": [
"last 2 versions",
"> 1%",
"IE 10"
],
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"@types/googlemaps",
"@types/markerclustererplus",
"autosuggest-highlight",
"chalk",
"compression",
"convert-source-map",
"cross-env",
"dotenv",
"etag",
"express",
"fs",
"ip",
"jsdom",
"minimist",
"mocha",
"moment",
"sanitize.css",
"serve-favicon",
"slick-carousel",
"tunnel-agent"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-export-default-from": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/polyfill": "7.4.3",
"@date-io/date-fns": "^1.3.11",
"@date-io/moment": "1.3.8",
"@material-ui/core": "^4.7.0",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.33",
"@material-ui/pickers": "^3.2.8",
"@types/googlemaps": "^3.38.1",
"@types/markerclustererplus": "^2.1.33",
"acorn": "^6.1.1",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.19.0",
"bourbon": "^5.1.0",
"bourbon-neat": "^3.0.0",
"chalk": "^2.4.1",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "6.6.1",
"cross-env": "5.2.0",
"date-fns": "2.1.0",
"detect-browser": "^3.0.0",
"dotenv": "^6.0.0",
"downshift": "^1.31.12",
"draft-js": "^0.10.5",
"draft-js-inline-toolbar-plugin": "^3.0.0",
"draft-js-plugins-editor": "^2.1.1",
"draftjs-to-html": "^0.8.3",
"draftjs-to-markdown": "^0.5.1",
"express": "4.16.4",
"firebase": "^7.24.0",
"fontfaceobserver": "2.0.13",
"fs": "0.0.1-security",
"history": "4.7.2",
"hoist-non-react-statics": "3.0.1",
"immutable": "3.8.2",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"jsdom": "^13.0.0",
"jss": "^10.0.0",
"jss-rtl": "^0.3.0",
"keycode": "^2.2.0",
"lodash": "^4.17.15",
"lru-memoize": "^1.0.2",
"marked": "^1.2.7",
"minimist": "1.2.0",
"mocha": "^6.1.4",
"moment": "^2.22.2",
"mui-datatables": "^2.13.1",
"prop-types": "15.7.2",
"rcolor": "^1.0.1",
"react": "16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.11",
"react-autosuggest": "^9.3.4",
"react-calendar": "^2.17.4",
"react-clock": "^2.3.0",
"react-countup": "^3.0.3",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^10.2.1",
"react-event-listener": "^0.6.1",
"react-google-maps": "^9.4.5",
"react-helmet": "6.0.0-beta",
"react-intl": "2.8.0",
"react-ionicons": "^2.1.6",
"react-jss": "^10.0.0",
"react-loadable": "5.5.0",
"react-loading-bar": "0.0.7",
"react-markdown": "^3.1.5",
"react-modal": "^3.4.4",
"react-number-format": "^3.3.4",
"react-popper": "^0.10.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.1",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-slick": "^0.23.1",
"react-spring": "^8.0.27",
"react-swipeable-views": "^0.12.13",
"react-syntax-highlighter": "^7.0.0",
"react-text-mask": "^5.3.2",
"recharts": "^1.4.2",
"recompose": "^0.28.2",
"redux": "4.0.1",
"redux-form": "8.2.0",
"redux-immutable": "4.0.0",
"redux-saga": "1.0.2",
"redux-saga-firebase": "^0.15.0",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"serve-favicon": "^2.4.5",
"sinon": "^7.3.2",
"slick-carousel": "^1.8.1",
"tunnel-agent": "^0.6.0",
"warning": "4.0.2"
},
"devDependencies": {
"@babel/cli": "7.4.3",
"@babel/core": "7.4.3",
"@babel/plugin-proposal-class-properties": "7.4.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-transform-modules-commonjs": "7.4.3",
"@babel/plugin-transform-react-constant-elements": "7.2.0",
"@babel/plugin-transform-react-inline-elements": "7.2.0",
"@babel/preset-env": "7.4.3",
"@babel/preset-react": "7.0.0",
"@babel/register": "7.4.0",
"add-asset-html-webpack-plugin": "3.1.1",
"axios": "^0.19",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "^1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"bootstrap": "^4.0.0",
"chai": "^4.2.0",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.2",
"cross-env": "^7.0",
"css-loader": "3.4.2",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "2.17.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-redux-saga": "1.0.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"happypack": "^5.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"imports-loader": "0.8.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lint-staged": "8.1.5",
"lodash": "^4.17.19",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.14.1",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"optimize-css-assets-webpack-plugin": "^5.0.0",
"plop": "2.3.0",
"popper.js": "^1.12",
"postcss-loader": "3.0.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"prismjs": "^1.11.0",
"raw-loader": "2.0.0",
"react-app-polyfill": "0.2.2",
"react-test-renderer": "16.8.6",
"resolve-url-loader": "^3.1.0",
"rimraf": "2.6.3",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"sass-material-colors": "0.0.5",
"shelljs": "^0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.30.0",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3 ",
"webpack-pwa-manifest": "4.0.0",
"whatwg-fetch": "3.0.0"
}
}
这是我的webpack.mix.js:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
output: {
publicPath: '/pro-oms/public/'
}
})
.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
最佳答案
我能够通过将 .babelrc 文件替换为 babel.config.js 文件来解决我的问题。
module.exports = {
presets: [
[
'@babel/preset-env',
{
modules: false,
},
],
'@babel/preset-react',
],
plugins: [
'styled-components',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-export-default-from'
]
};
关于reactjs - Laravel 混合 : "npm run prod" fails but "npm run watch " works fine- React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65396695/