javascript - 您可能需要一个额外的加载器来处理这些加载器的结果。TypeError：无法读取未定义的属性“forEach”
问题描述
嘿，我在尝试构建我的应用程序时似乎遇到了这个问题。我不确定发生了什么。但我认为这可能是某种与依赖相关的问题。
我尝试重新安装 node 和 npm 无济于事。我删除了 node_modules，然后删除了 json 锁并进行了新的 npm install 但仍然遇到相同的问题。
节点版本：14.17.0 Npm 版本：6.14.13
这是我的 package.json：
{
"name": "ct-universal-app",
"version": "2.124.0",
"description": "The Culture Trip Universal React App",
"engines": {
"node": "=14.16.1",
"npm": "=6.14.12"
},
"scripts": {
"start": "NODE_ENV=production TCT_ENV=production node server.js",
"prod": "cross-env NODE_ENV=development TCT_ENV=production node server.js",
"dev": "cross-env NODE_ENV=development TCT_ENV=dev node server.js",
"staging": "NODE_ENV=production TCT_ENV=staging node server.js",
"dev-staging": "cross-env NODE_ENV=development TCT_ENV=staging node server.js",
"local": "cross-env NODE_ENV=development TCT_ENV=local node server.js",
"base-prettier": "prettier --ignore-path .gitignore",
"base-eslint": "eslint --ignore-path .gitignore --rule \"no-console: 1\"",
"lint-eslint-config-prettier": "eslint --print-config .eslintrc | eslint-config-prettier-check",
"lintjs": "npm run base-eslint -- --max-warnings 0 \"**/*.js\" \"**/*.ts?(x)\" .circleci .eslintplugin",
"format": "npm run lintfix && npm run prettierWrite",
"lintfix": "npm run base-eslint -- --fix \"**/*.js\" \"**/*.ts?(x)\"",
"prettierWrite": "npm run base-prettier -- --write \"**/*.js\" \"**/*.ts?(x)\"",
"ts-compile-check": "tsc -p tsconfig.json --noEmit",
"build": "next build",
"bundleAnalyze": "cross-env BUNDLE_ANALYZE=true next build",
"test": "cross-env BABEL_ENV=test node --max-old-space-size=4096 --expose-gc node_modules/jest/bin/jest.js --logHeapUsage --verbose --coverage",
"test-dev": "BABEL_ENV=test npx jest --watch",
"lighthouse-test": "npx jest --config='.circleci/jest.config.js'",
"e2e-smoke-desktop-test": "cross-env NODE_ENV=development TCT_ENV=staging BABEL_ENV=e2e-test npx wdio ./tests/config/e2e-test-desktop.conf.js --suite smoke",
"e2e-sanity-desktop-test": "cross-env NODE_ENV=development TCT_ENV=staging BABEL_ENV=e2e-test npx wdio ./tests/config/e2e-test-desktop.conf.js --suite sanity",
"e2e-regression-desktop-test": "cross-env NODE_ENV=development TCT_ENV=staging BABEL_ENV=e2e-test npx wdio ./tests/config/e2e-test-desktop.conf.js --suite regression --suite sanity --suite smoke",
"e2e-smoke-mobile-web-test": "cross-env NODE_ENV=development TCT_ENV=staging BABEL_ENV=e2e-test npx wdio ./tests/config/e2e-test-mobile.conf.js --suite smoke",
"e2e-sanity-mobile-web-test": "cross-env NODE_ENV=development TCT_ENV=staging BABEL_ENV=e2e-test npx wdio ./tests/config/e2e-test-mobile.conf.js --suite sanity",
"e2e-regression-mobile-web-test": "cross-env NODE_ENV=development TCT_ENV=staging BABEL_ENV=e2e-test npx wdio ./tests/config/e2e-test-mobile.conf.js --suite smoke",
"allure": "node_modules/.bin/allure generate ./tests/reports/allure-results -c && allure open || true",
"mock": "nodemon ./mock/index.js localhost 7001 & NODE_ENV=development TCT_ENV=test node server.js",
"ui-test": "NODE_ENV=development TCT_ENV=test BABEL_ENV=e2e-test npx wdio ./tests/config/ui-test.conf.js",
"cy:open": "cypress open"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "branch-naming-check \"^feature/WFE-[0-9]+.*$\" && npm run ts-compile-check && npm run lintjs"
}
},
"lint-staged": {
"*.{js,ts,tsx}": [
"npm run base-eslint -- --fix --max-warnings 0",
"npm run base-prettier -- --write",
"git add"
]
},
"keywords": [],
"author": "Culture Trip (Israel) Ltd.",
"license": "TCT",
"sideEffects": [
"./node_modules/isomorphic-fetch/fetch-bower.js",
"./node_modules/isomorphic-fetch/fetch-npm-browserify.js",
"./node_modules/isomorphic-fetch/fetch-npm-node.js",
"./node_modules/es6-promise/lib/es6-promise.js"
],
"dependencies": {
"@apollo/client": "^3.3.11",
"@babel/plugin-proposal-class-properties": "7.8.3",
"@culture-trip/bookable-ui-module": "^5.1.6",
"@culture-trip/culturetrip-ui": "^32.1.1",
"@culture-trip/experiments-component": "^14.1.10",
"@culture-trip/frontend-utils-module": "2.7.0",
"@culture-trip/header-ui-module": "^8.12.9",
"@culture-trip/jwplayer-module": "^1.7.4",
"@culture-trip/login-signup-module": "2.3.4",
"@culture-trip/tile-ui-module": "^1.11.4",
"@culture-trip/topic-hub-ui-module": "^3.14.5",
"@culture-trip/tracking-ui-module": "^2.2.7",
"@culture-trip/wishlist-ui-module": "^1.7.1",
"body-parser": "1.18.2",
"branch-sdk": "2.49.0",
"columbus-module": "github:culture-trip/columbus-module#v1.9.0",
"compression": "1.7.3",
"cookie-parser": "1.4.3",
"crypto-hash": "^1.3.0",
"datadog-node-utils": "git+ssh://git@github.com/culture-trip/datadog-node-utils.git#v5",
"date-fns": "^2.19.0",
"es6-promise": "4.1.0",
"express": "4.16.4",
"fast-geoip": "^1.1.23",
"graphql": "^15.5.0",
"helmet": "3.21.2",
"intersection-observer": "^0.11.0",
"isomorphic-fetch": "2.2.1",
"jwt-decode": "2.2.0",
"lodash": "^4.17.21",
"mobile-detect": "1.3.6",
"mobx": "5.14.2",
"mobx-react": "6.1.4",
"next": "^10.1.3",
"next-router-events": "1.0.1",
"next-transpile-modules": "2.3.1",
"passport": "0.4.0",
"passport-facebook": "2.1.1",
"passport-google-oauth": "1.0.0",
"react": "^16.14.0",
"react-dfp": "github:nirarazi/react-dfp",
"react-dom": "^16.14.0",
"react-html-parser": "2.0.2",
"react-loading-animation": "1.3.0",
"react-no-ssr": "1.1.0",
"react-swipe": "6.0.4",
"react-visibility-sensor": "5.1.1",
"smoothscroll-polyfill": "0.4.3",
"styled-components": "^5.2.1",
"universal-cookie": "2.0.8",
"uuid": "3.3.2",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"@babel/core": "7.8.6",
"@babel/plugin-proposal-decorators": "7.0.0",
"@babel/plugin-proposal-numeric-separator": "7.8.3",
"@babel/plugin-proposal-object-rest-spread": "7.8.3",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-transform-modules-commonjs": "7.8.3",
"@babel/plugin-transform-runtime": "7.8.3",
"@babel/preset-env": "7.9.0",
"@babel/preset-react": "7.8.3",
"@babel/preset-typescript": "7.8.3",
"@babel/register": "^7.13.8",
"@innocells/branch-naming-check": "1.0.0",
"@testing-library/react": "11.1.0",
"@testing-library/react-hooks": "3.2.1",
"@types/chance": "^1.1.3",
"@types/enzyme": "3.10.5",
"@types/jest": "25.1.3",
"@types/node": "^13.13.45",
"@types/react": "^16.14.5",
"@types/styled-components": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"@wdio/allure-reporter": "5.18.6",
"@wdio/browserstack-service": "^5.22.1",
"@wdio/cli": "5.18.4",
"@wdio/devtools-service": "5.16.16",
"@wdio/dot-reporter": "5.18.6",
"@wdio/junit-reporter": "5.18.6",
"@wdio/local-runner": "5.18.4",
"@wdio/mocha-framework": "5.18.6",
"@wdio/selenium-standalone-service": "5.16.10",
"@wdio/spec-reporter": "5.18.6",
"@wdio/sync": "5.18.6",
"@zeit/next-bundle-analyzer": "0.1.2",
"@zeit/next-css": "1.0.1",
"amphtml-validator": "^1.0.35",
"babel-eslint": "8.2.1",
"babel-jest": "25.1.0",
"babel-loader": "8.0.6",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-styled-components": "^1.12.0",
"babel-runtime": "6.23.0",
"brotli-gzip-webpack-plugin": "0.5.0",
"chai": "^4.3.3",
"chance": "^1.1.7",
"chrome-launcher": "^0.13.4",
"chromedriver": "2.45.0",
"cors": "2.8.5",
"cross-env": "4.0.0",
"cypress": "^7.5.0",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.15.1",
"enzyme-to-json": "3.4.3",
"eslint": "5.9.0",
"eslint-config-prettier": "6.0.0",
"eslint-config-react": "1.1.7",
"eslint-find-rules": "3.3.1",
"eslint-loader": "2.0.0",
"eslint-plugin-babel": "5.1.0",
"eslint-plugin-cypress": "^2.11.3",
"eslint-plugin-local": "1.0.0",
"eslint-plugin-react": "7.10.0",
"eslint-plugin-react-hooks": "2.3.0",
"eslint-plugin-wdio": "5.7.0",
"faker": "4.1.0",
"husky": "^4.2.1",
"ignore-loader": "0.1.2",
"jest": "^26.6.3",
"jest-fetch-mock": "2.1.2",
"jest-styled-components": "^7.0.3",
"lighthouse": "^6.5.0",
"lint-staged": "9.2.1",
"mocha": "6.2.2",
"mock-req-res": "1.0.2",
"nodemon": "^2.0.7",
"prettier": "1.19.0",
"prop-types": "15.7.2",
"react-test-renderer": "16.12.0",
"sinon": "7.2.2",
"style-loader": "0.17.0",
"typescript": "3.8.3",
"wdio-browserstack-reporter": "github:browserstack/wdio-browserstack-reporter#wdio5",
"webdriverio": "5.18.4",
"webpack-bundle-analyzer": "3.3.2"
}
}
配置：
{
"compilerOptions": {
"baseUrl": ".",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"typeRoots": ["node_modules/@types"],
"experimentalDecorators": true
},
"exclude": ["node_modules", "cypress"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}
巴贝尔配置：
const environment = process.env['BABEL_ENV'] || process.env['NODE_ENV'];
const presets = [];
const plugins = [];
if (environment === 'development') {
presets.push('next/babel');
plugins.push(
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
['styled-components', { ssr: true, displayName: true, preprocess: false }]
);
}
if (environment === 'production') {
presets.push([
'next/babel',
{
'preset-env': {
useBuiltIns: 'entry',
modules: false
}
}
]);
plugins.push(
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
['styled-components', { ssr: true, displayName: true, preprocess: false }]
);
}
if (environment === 'test') {
presets.push('@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript');
plugins.push(
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-transform-runtime'],
['@babel/plugin-syntax-dynamic-import'],
['@babel/plugin-proposal-object-rest-spread'],
['styled-components', { ssr: false, displayName: false, preprocess: false }]
);
}
if (environment === 'e2e-test') {
presets.push([
'@babel/preset-env',
{
targets: {
node: 8
}
}
]);
plugins.push(
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }]
);
}
module.exports = { presets, plugins };
解决方案
推荐阅读
- machine-learning - 对倾斜数据进行 ML 模型验证
- javascript - 将接收到的 JSON 打印到表中
- c# - 使用 Fluent API 编写一对一关系
- spring-boot - SpringBoot 2.x Spring 5.x Oauth 2.0 Spring security Bitbucket 集成
- abap - 具有对话框和报告类型程序的程序的事务类型
- jenkins - Jenkins: None of the test reports contained any result
- php - Laravel 5.7 - 访问通知内视图模板
- kotlin - io.micronaut.runtime.Micronaut - 找不到嵌入式容器
- asp.net-web-api - Slack Web API 不更新用户配置文件
- ios - 是否需要付费的苹果开发者 ID 才能从 xcode 测试 iphone 中的应用程序。？