[webpack] Cannet find module'babel-eslint'나오고.

오류 개요

다음 환경에서 오류가 발생했습니다.
웹 페이지가 v5로 업데이트되면 토할 것 같습니다.

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-jest": "^23.2.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^0.28.11",
    "eslint": "^5.0.1",
    "eslint-config-airbnb": "17.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.9.1",
    "jest": "^23.2.0",
    "jest-localstorage-mock": "^2.2.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "moment": "^2.22.2"
  }

Error: Cannot find module 'babel-eslint'

에 부족하다고 여겨진babel-eslint를 설치한 후 다음 로그가 이번에 나왔습니다.

gyp ERR! stack Error: `make` failed with exit code: 2

나는 약간 반했다. 단도직입적으로 말하면 웹 페이지의 config에 협조해야 할 것 같다.

미리 이해해야 할 일 / 주석

2020년 말께 출시된 웹팩 v5는 config 설정을 통해 웹팩의 공식 창고를 더욱 떠들썩하게 만들었다.
이 프로젝트의 경우 웹 페이지의 버전이 현재 상태를 유지하기 위해 v4학과이지만 config의 느낌에 맞춰야 합니다.

구체적 해결 방법

패키지-lock을 사용합니다.json、/node_modules/、 ~/.node-gyp/폴더 삭제

$ rm package-lock.json && rm -rf node_modules && rm -rf ~/.node-gyp 재대량 설치 봉인(yarn은$ npm install)

webpack.config.다음은 js 파일의 config 변경

$ yarn upgrade에 babel-eslint 설치(yarn은 $ npm install --save-dev babel-eslint

$ yarn add --dev babel-eslint집행(yarn은$ npm run dev-server

해결✨

Before

webpack.config.js

module.exports = {
  // other configs
  module: {
    {
      test: /\.(js)$/,
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        // eslint options
      },
    }],
  }
}

webpack.config.js

module.exports = {
  // other configs
  module: {
    {
      test: /\.(js)$/,
      exclude: /node_modules/,
      // loader: 'eslint-loader',
      use: [
        {
          loader: "eslint-loader",
          query: {
            name: 'bundle.js'
        }
        }
      ]
      // options: {
      //   // eslint options
      // },
    }],
  }
}

이렇게 하면 오류 로그가 사라지고 컴파일링이 순조롭게 끝난다.
참조 소스

node.js/node-gyp 창고:gyp ERR, 필터!stack Error: $ yarn dev-server failed with exit code: 2 #1694

babel/babel-eslint 창고

웹 팩 공식 문서: Rule.use

웹팩/웹팩 창고: Error: options/query provided without loader.Webpack 2.2.0-rc.3 #3645