heesuna

.tt_article_useless_p_margin > p > span

ERROR in multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
Module not found: Error: Can't resolve 'eslint-loader' in '/Users/xxxxxx/Documents/GitHub/xxxxxxxx/frontend'

패키지 버전을 최신화 하다가 해당 모듈에서 충돌이 생겼다.

package.json 

...
"devDependencies": { 
   ...
   
  "@nuxtjs/eslint-module": "^1.0.0",

   ...
}
...

nuxt.config.js

build: { 
	/* ** You can extend webpack config here */ 
    extend(config, { isDev, isClient }) { 
    	if (isDev && isClient) {
			config.module.rules.push({ 
            	test: /\.(js|vue)$/, 
                loader: 'eslint-loader', 
                exclude: /(node_modules)/, 
                options: { fix: true } 
            }) 
        } 
     }, 
 }

패키지를 설치해보자

npm install 

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: @nuxtjs/eslint-module@3.0.2
npm ERR! node_modules/@nuxtjs/eslint-module
npm ERR!   dev @nuxtjs/eslint-module@"^1.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @nuxtjs/eslint-module@"^1.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: eslint@6.8.0
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^5.0.0 || ^6.0.0" from @nuxtjs/eslint-module@1.2.0
npm ERR!   node_modules/@nuxtjs/eslint-module
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/xxxxx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lhs/.npm/_logs/2021-01-13T01_00_35_327Z-debug.log

애러 내용을 보면 Found: @nuxtjs/eslint-module@3.0.2 이 내용을 볼 수 있다. 

해당 패키지의 버전을 3.0.2로 수정한다.

이제 nuxt 파일을 run 해보자.

npm run dev

빌드가 완료되고 페이지를 접속해보면 아래와 같은 에러 내용을 확인 할 수 있다.

ERROR in multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
Module not found: Error: Can't resolve 'eslint-loader' in '/Users/lhs/Documents/GitHub/xxxxxxxxxx/frontend'

Module not found: Error: Can't resolve 'eslint-loader' in '/Users/xxxxx/Documents/GitHub/xxxxxxxx/frontend'

eslint-loader 모듈을 찾을 수 없다는 내용이다. 

pacakage-lock.json 파일을 1.0.0v / 3.0.2v 버전과 비교해보면

eslint-loader 내용이 빠져있는것을 확인할 수 있다.

해당 사이트를 확인해보니 eslint-loader가 depreected되었다는 내용을 찾아 볼 수 있었다.

그리하여 대체할 패키지로 설치를 진행하였다.

package.json 

...
"devDependencies": { 
   ...
   
  "@nuxtjs/eslint-module": "^1.0.0",
  "eslint-webpack-plugin": "^2.4.1",

   ...
}
...

nuxt.config,js

build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, {
      isDev,
      isClient
    }) {
      if (isDev && isClient) {
        const options = {
          exclude: ['node_modules'],
          extensions: ['js','vue'],
          fix: true
        }
        const EslintPlugin = require('eslint-webpack-plugin')
        config.plugins.push(new EslintPlugin(options))
      }
    },
  },

실행을 해보자

npm install 

npm run dev

port를 3333으로 세팅해두어 

localhost:3333으로 접속하여 정상 페이지가 뜨는걸 확인하였다. 

핵심내용은 eslint-loader가 deprecated가 되어 제외되면서 생긴 문제이다.

대체할 플러그인(eslint-webpack-plugin)을 설치하면서 해결하였다. 

참고 

1. www.npmjs.com/package/eslint-webpack-plugin 

2. github.com/webpack-contrib/eslint-loader