尝试运行命令“npm start”时出错

Question

I was building a react project and during the final "npm start" stage, I got many errors: please help me fix this.

C:\\Users\\Intel\\Desktop\\burger-project>npm start

burger-project@0.1.0 start C:\\Users\\Intel\\Desktop\\burger-project
node scripts/start.js

Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into 'this._pluginCompat'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! burger-project@0.1.0 start: node scripts/start.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the burger-project@0.1.0 start 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\\Intel\\AppData\\Roaming\\npm-cache_logs\\2020-09-22T17_01_17_645Z-debug.log

Also, this my package.json file of the project

 {
      "name": "burger-project",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "autoprefixer": "7.1.6",
        "axios": "^0.19.2",
        "babel-core": "6.26.0",
        "babel-eslint": "7.2.3",
        "babel-jest": "^26.3.0",
        "babel-loader": "7.1.2",
        "babel-preset-react-app": "^3.1.2",
        "babel-runtime": "6.26.0",
        "case-sensitive-paths-webpack-plugin": "2.1.1",
        "chalk": "1.1.3",
        "dotenv": "4.0.0",
        "dotenv-expand": "4.2.0",
        "eslint": "4.10.0",
        "eslint-config-react-app": "^2.1.0",
        "eslint-loader": "1.9.0",
        "eslint-plugin-flowtype": "2.39.1",
        "eslint-plugin-import": "2.8.0",
        "eslint-plugin-jsx-a11y": "5.1.1",
        "eslint-plugin-react": "7.4.0",
        "extract-text-webpack-plugin": "3.0.2",
        "file-loader": "1.1.5",
        "fs-extra": "3.0.1",
        "html-webpack-plugin": "2.29.0",
        "jest": "^26.4.2",
        "npm-upgrade": "^2.0.4",
        "object-assign": "4.1.1",
        "postcss-flexbugs-fixes": "3.2.0",
        "postcss-loader": "2.0.8",
        "promise": "8.0.1",
        "prop-types": "^15.7.2",
        "raf": "3.4.0",
        "react": "^16.8.0",
        "react-dev-utils": "^5.0.2",
        "react-dom": "^16.8.0",
        "react-redux": "^7.2.1",
        "react-router-dom": "^5.2.0",
        "redux": "^4.0.5",
        "redux-devtools-extension": "^2.13.8",
        "redux-thunk": "^2.3.0",
        "resolve": "1.6.0",
        "style-loader": "0.19.0",
        "sw-precache-webpack-plugin": "0.11.4",
        "url-loader": "0.6.2",
        "webpack-dev-server": "^3.11.0",
        "webpack-manifest-plugin": "1.3.2",
        "whatwg-fetch": "2.0.3"
      },
      "scripts": {
        "start": "node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js --env=jsdom"
      },
      "jest": {
        "collectCoverageFrom": [
          "src/**/*.{js,jsx,mjs}"
        ],
        "setupFiles": [
          "<rootDir>/config/polyfills.js"
        ],
        "testMatch": [
          "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
          "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
        ],
        "testEnvironment": "node",
        "testURL": "http://localhost",
        "transform": {
          "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
          "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
          "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
        },
        "transformIgnorePatterns": [
          "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
        ],
        "moduleNameMapper": {
          "^react-native$": "react-native-web"
        },
        "moduleFileExtensions": [
          "web.js",
          "js",
          "json",
          "web.jsx",
          "jsx",
          "node",
          "mjs"
        ]
      },
      "babel": {
        "presets": [
          "react-app"
        ]
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "devDependencies": {
        "babel-plugin-add-module-exports": "^1.0.2",
        "css-loader": "^4.2.1",
        "html-webpack-beforehtml-plugin": "^1.0.0",
        "preload-webpack-plugin": "^3.0.0-beta.3",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.12"
      }
    }

this is code of start.js

//'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../config/env');

const fs = require('fs');
const chalk = require('chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {
  choosePort,
  createCompiler,
  prepareProxy,
  prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const config = require('../config/webpack.config.dev');
const createDevServerConfig = require('../config/webpackDevServer.config');

const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `detect()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
  .then(port => {
    if (port == null) {
      // We have not found a port.
      return;
    }
    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
    const appName = require(paths.appPackageJson).name;
    const urls = prepareUrls(protocol, HOST, port);
    // Create a webpack compiler that is configured with custom messages.
    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
    // Load proxy config
    const proxySetting = require(paths.appPackageJson).proxy;
    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
    // Serve webpack assets generated by the compiler over a web sever.
    const serverConfig = createDevServerConfig(
      proxyConfig,
      urls.lanUrlForConfig
    );
    const devServer = new WebpackDevServer(compiler, serverConfig);
    // Launch WebpackDevServer.
    devServer.listen(port, HOST, err => {
      if (err) {
        return console.log(err);
      }
      if (isInteractive) {
        clearConsole();
      }
      console.log(chalk.cyan('Starting the development server...\n'));
      openBrowser(urls.localUrlForBrowser);
    });

    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
      process.on(sig, function() {
        devServer.close();
        process.exit();
      });
    });
  })
  .catch(err => {
    if (err && err.message) {
      console.log(err.message);
    }
    process.exit(1);
  });
 

Answer 1

Probably the best way in your case is to just create a new project using npx create-react-app your-project-name and moving all your files from src to the new project src and also copying all of your dependencies from package.json to the new project package.json.

for more on Create React App