如何解决命令 yarn run build 抛出错误
当我尝试使用 yarn run build 构建我的项目时，我收到了我的代码中不存在的错误，我的代码很干净，它在我的本地工作正常。我已经被困了两个星期来解决这个问题，请帮我解决这个问题。这是我得到的错误
节点版本：v10.15.3
webpack: 4.30.0 这是我的 package.json
{
"name": "xxxx","version": "1.8.0","description": "React website tempate with focus on perfomance and design","private": true,"engines": {
"npm": ">=5","node": ">=8.15.1"
},"author": "dandelion Pro Team","license": "Envato Regular License","scripts": {
"analyze:clean": "rimraf stats.json","preanalyze": "npm run analyze:clean","analyze": "node ./internals/scripts/analyze.js","extract-intl": "node ./internals/scripts/extract-intl.js","npmcheckversion": "node ./internals/scripts/npmcheckversion.js","preinstall": "npm run npmcheckversion","postinstall": "npm run build:dll","prebuild": "npm run build:clean","build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout","build:clean": "rimraf ./build","build:dll": "node ./internals/scripts/dependencies.js","start": "cross-env NODE_ENV=development node server","start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server","start:production": "npm run test && npm run build && npm run start:prod","start:prod": "cross-env NODE_ENV=production node server","presetup": "npm i chalk shelljs","setup": "node ./internals/scripts/setup.js","postsetup": "npm run build:dll","clean": "shjs ./internals/scripts/clean.js","clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean","generate": "plop --plopfile internals/generators/index.js","lint": "npm run lint:js && npm run lint:css","lint:css": "stylelint app/**/*.js","lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts","lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix","lint:js": "npm run lint:eslint -- . ","lint:staged": "lint-staged","coveralls": "cat ./coverage/lcov.info | coveralls","prettify": "prettier --write"
},"browserslist": [
"last 1 version","> 1%","maintained node versions","not dead"
],"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-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.9","@material-ui/icons": "^4.5.1","@material-ui/lab": "^4.0.0-alpha.33","@material-ui/pickers": "^3.2.10","@react-pdf/renderer": "^1.6.13","@types/googlemaps": "^3.38.1","@types/markerclustererplus": "^2.1.33","acorn": "^6.1.1","autoprefixer": "^9.0.0","autosuggest-highlight": "^3.1.1","axios": "^0.21.1","babel-polyfill": "6.26.0","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","bourbon": "^5.1.0","bourbon-neat": "^3.0.0","caniuse-lite": "^1.0.30001223","chalk": "^2.4.2","chart.js": "^2.7.3","classnames": "^2.2.6","compression": "1.7.4","connected-react-router": "6.6.1","country-language": "^0.1.7","country-state-city": "^1.0.5","cross-env": "5.2.0","date-fns": "2.1.0","detect-browser": "^4.0.0","dotenv": "^6.0.0","downshift": "^1.31.12","draft-js": "^0.11.7","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","emailjs-com": "^2.6.4","express": "4.16.4","file-saver": "^2.0.2","fontfaceobserver": "2.1.0","formik": "^2.1.4","geo-reverse": "^1.0.12","google-libphonenumber": "^3.2.13","history": "4.9.0","hoist-non-react-statics": "3.3.0","html2canvas": "^1.0.0-rc.7","immer": "3.0.0","immutable": "3.8.2","interactjs": "^1.10.11","intl": "1.2.5","invariant": "2.2.4","ip": "1.1.5","jspdf": "^2.3.1","jss": "^10.0.0","jss-rtl": "^0.3.0","jwt-decode": "^3.1.2","keycode": "^2.2.0","leaflet": "^1.7.1","leaflet-control-geocoder": "^1.13.0","lodash": "^4.17.15","material-table": "^1.69.0","material-ui-color-picker": "^3.5.1","material-ui-pickers": "^2.2.4","minimist": "^1.2.5","moment": "^2.29.1","moment-weekday-calc": "^1.1.4","mui-datatables": "^2.13.1","net": "^1.0.2","nuxeo": "^3.17.0","profile-picture": "git+https://github.com/dsalvagni/react-profile-picture.git","prop-types": "15.7.2","rcolor": "^1.0.1","react": "16.8.6","react-anchor-link-smooth-scroll": "^1.0.11","react-animated-slider": "^2.0.0","react-autosuggest": "^9.3.4","react-big-calendar": "^0.19.1","react-calendar": "^2.17.4","react-chartjs-2": "^2.7.4","react-charts": "^1.0.10","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-html5video": "^2.5.1","react-image-lightBox": "^5.1.1","react-images": "^1.1.7","react-intl": "2.8.0","react-ionicons": "^2.1.6","react-jss": "^10.0.0","react-leaflet": "^2.7.0","react-loadable": "^5.5.0","react-markdown": "^4.1.0","react-modal": "^3.4.4","react-notifications-component": "^2.4.0","react-number-format": "^3.3.4","react-papaparse": "^3.8.0","react-pdf": "^5.0.0","react-pdf-print": "^0.2.0","react-player": "^2.9.0","react-popper": "^0.10.4","react-print-components": "^1.0.4","react-redux": "^7.0.2","react-router-dom": "^5.0.1","react-scroll-parallax": "^1.3.5","react-scrollspy": "^3.3.5","react-select": "^3.0.4","react-slick": "^0.23.1","react-swipeable-views": "^0.13.9","react-Syntax-Highlighter": "^7.0.0","react-text-mask": "^5.3.2","react-trello": "^1.33.0","react-ultimate-pagination": "^1.2.0","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","reselect": "4.0.0","sanitize.css": "8.0.0","serve-favicon": "^2.4.5","slick-carousel": "^1.8.1","tunnel-agent": "^0.6.0","video-react": "^0.14.1","warning": "4.0.2","xlsx": "^0.16.6"
},"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.3","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","babel-preset-es2015": "^6.24.1","circular-dependency-plugin": "5.0.2","compare-versions": "3.4.0","compression-webpack-plugin": "3.0.0","coveralls": "3.0.3","css-loader": "2.1.1","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.2","eslint-plugin-jsx-a11y": "6.2.1","eslint-plugin-prettier": "3.0.1","eslint-plugin-react": "7.12.4","eslint-plugin-react-hooks": "1.6.0","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": "4","http-proxy-middleware": "0.19.1","imports-loader": "0.8.0","lint-staged": "8.1.5","ngrok": "3.1.1","node-plop": "0.18.0","node-sass": "^4.12.0","null-loader": "0.1.1","offline-plugin": "5.0.6","optimize-css-assets-webpack-plugin": "5.0.1","plop": "2.3.0","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","react-testing-library": "6.1.2","react-to-print": "^2.12.3","rimraf": "2.6.3","sass-loader": "^7.1.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.4.1","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.3.0","whatwg-fetch": "3.0.0"
}
}
这是我的 webpack 结构
最后这是我对 webpack.base.babel.js 的内容
/**
* COMMON WEBPACK CONfigURATION
*/
const path = require('path');
const webpack = require('webpack');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
module.exports = options => ({
mode: options.mode,entry: options.entry,output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(),'build'),publicPath: '/',},options.output,),// Merge with env dependent settings
optimization: options.optimization,module: {
rules: [
/*
disabled eslint by default.
You can enable it to maintain and keep clean your code.
NOTE: By enable eslint running app process at beginning will slower
*/
/* {
enforce: 'pre',test: /\.js?$/,exclude: [/node_modules/],loader: 'eslint-loader',options: {
quiet: true,}
},*/
{
test: /\.jsx?$/,// Transform all .js and .jsx files required somewhere with Babel
exclude: /node_modules/,use: {
loader: 'happypack/loader?id=js',options: options.babelQuery,{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders,see https://webpack.js.org/loaders/#styling
test: /\.css$/,exclude: /node_modules/,use: ['style-loader','css-loader'],{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,include: /node_modules/,{
test: /\.(eot|otf|ttf|woff|woff2)$/,use: 'file-loader',{
test: /\.(scss)$/,use: [{
loader: 'style-loader'
},{
loader: 'css-loader',options:
{
sourceMap: false,importLoaders: 2,modules: true,localIdentName: '[local]__[hash:base64:5]'
}
},{
loader: 'postcss-loader',options: {
sourceMap: false
}
},{
loader: 'sass-loader',options: {
outputStyle: 'expanded',sourceMap: false
}
}],{
test: /\.md$/,use: 'raw-loader'
},{
test: /\.(jpg|png|gif|svg)$/,use: [
{
loader: 'url-loader',options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,/*
disabled image compression by default,due error in windows 10 because libpng not available.
The libpng avaible on Linux and Mac system only.
NOTE: To enable this,first you need to install image-webpack-loader.
npm install -i image-webpack-loader --save
*/
// {
// loader: 'image-webpack-loader',// options: {
// mozjpeg: {
// enabled: false,// // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// // Try enabling it in your environment by switching the config to:
// // enabled: true,// // progressive: true,// },// gifsicle: {
// interlaced: false,// optipng: {
// optimizationLevel: 7,// pngquant: {
// quality: '65-90',// speed: 4,// },// },],{
test: /\.html$/,use: 'html-loader',{
test: /\.(mp4|webm)$/,use: {
loader: 'url-loader',options: {
limit: 10000,node: {
fs: 'empty'
},plugins: options.plugins.concat([
// Always expose NODE_ENV to webpack,in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; Terser will automatically
// drop any unreachable code.
new HappyPack({
id: 'js',threadPool: happyThreadPool,loaders: ['babel-loader?cacheDirectory=true']
}),new webpack.EnvironmentPlugin({
NODE_ENV: 'development',}),new webpack.ContextReplacementPlugin(/^\.\/locale$/,context => {
if (!/\/moment\//.test(context.context)) { return; }
// context needs to be modified in place
Object.assign(context,{
// include only CJK
regExp: /^\.\/(ja|ko|zh)/,// point to the locale data folder relative to moment's src/lib/locale
request: '../../locale'
});
})
]),resolve: {
modules: ['node_modules','app'],extensions: ['.js','.jsx','.react.js'],mainFields: ['browser','jsnext:main','main'],alias: {
'dan-components': path.resolve(__dirname,'../../app/components/'),'dan-actions': path.resolve(__dirname,'../../app/actions/'),'dan-redux': path.resolve(__dirname,'../../app/redux/'),'dan-styles': path.resolve(__dirname,'../../app/styles/components/'),'dan-api': path.resolve(__dirname,'../../app/api/'),'dan-images': path.resolve(__dirname,'../../public/images/'),'dan-vendor': path.resolve(__dirname,'../../node_modules/'),}
},devtool: options.devtool,target: 'web',// Make web variables accessible to webpack,e.g. window
performance: options.performance || {},});
非常感谢 stackoverflow
解决方法
我添加了两个缺少“横向管理”和“横向翻译”的文件夹，过去我只有：['app']。过去的加载器只加载应用程序文件夹
env: {
production: {
// only: ['app'],only: ['app','transversal-administration','transversal-translation'],plugins: [
'lodash','transform-react-remove-prop-types','@babel/plugin-transform-react-inline-elements','@babel/plugin-transform-react-constant-elements',],},版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。