[Next.js 에러] The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event 해결

참고

https://blinders.tistory.com/84

 

에러

라우팅 이동한 페이지 CSS 설정을 해주는데 갑자기 아래같은 에러가 떴다.

직역하자면 아래와 같다.

"리소스가 링크 사전 로드를 사용하여 사전 로드되었지만 창의 로드 이벤트 후 몇 초 내에 사용되지 않았습니다.

적절한 'as' 값이 있고 의도적으로 미리 로드되어 있는지 확인하세요."

 

원인

Vue CLI는 일부 리소스를 브라우저가 사전로드하도록 preload 옵션을 자동으로 설정하는데,

preload 옵션으로 로드해오는 리소스가 즉각적으로 사용이 안되니까 이런 에러가 발생한듯하다.

(preload 옵션으로 로드해오는 리소스는 3초내에 실제로 '활용'이 되어야한다고 함)

 

해결

처음엔 webpack 설정파일에서 as 속성값을 style 로 지정해줬는데도 에러가 해결이 안됐다.

그러다 구글링을 해서 다른 방법을 알게 되었는데 HtmlWebpackPlugin 플러그인을 설치하라는 것이었다!

- - -

아래 webpack 버전 확인 명령으로 버전 확인후

webpack --version
// or
npx webpack --version

 

html-webpack-plugin을 사용하는 webpack 버전에 맞게 설치해주고,

// Webpack 버전이 4.x 일 경우
npm i --save-dev html-webpack-plugin@4

// Webpack 버전이 5.x 일 경우
npm i --save-dev html-webpack-plugin

 

webpack 설정파일에 아래와 같이 plugin을 정의해주니 해결됐다.

// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: {
        // 여기에 엔트리 포인트 및 청크 설정
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 번들된 파일의 출력 경로
        filename: "bundle.js", // 번들된 JavaScript 파일 이름
    },
    module: {
        rules: [
            // 여기에 로더 설정
        ],
    },
    plugins: [
        // HtmlWebpackPlugin 플러그인 추가
        new HtmlWebpackPlugin({
            template: "public/index.html", // HTML 템플릿 파일 경로
            filename: "index.html", // 생성될 HTML 파일 이름
            inject: true,
            chunks: ["index"],
        }),
    ],
};