오류해결: TypeError: Failed to parse URL from ~~

작성일 :

Failed to compile.

./src/assets/javascript/javascriptBasics.jpg TypeError: Failed to parse URL from /Users/Project/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.wasm

이 오류는 주로 이미지 파일이나 Webpack 설정과 관련된 문제에서 발생할 수 있습니다. 아래 몇 가지 해결 방법을 시도해 볼 수 있습니다.

1. 이미지 파일 경로 확인

이미지 파일 경로가 올바른지 확인하십시오. 경로가 잘못되었거나 파일이 해당 경로에 존재하지 않는 경우 오류가 발생할 수 있습니다.

2. 파일 이름 및 확장자 확인

파일 이름이나 확장자가 올바른지 확인하십시오. javascriptBasics.jpg 파일이 존재하는지 확인합니다.

3. Webpack 설정 확인

Webpack 설정 파일을 확인하여 이미지 파일 로더가 제대로 설정되었는지 확인하십시오. next.config.js 파일에서 이미지 파일 로더를 설정할 수 있습니다.

javascript
// next.config.js
module.exports = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(jpe?g|png|gif|svg)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[path][name].[ext]",
          },
        },
      ],
    });

    return config;
  },
};

4. Node Modules 및 캐시 정리

다음 명령어를 사용하여 node_modules 폴더와 캐시를 정리하고 다시 설치합니다.

bash
rm -rf node_modules
rm -rf .next
yarn install # 또는 npm install
yarn build # 또는 npm run build

5. 최신 버전으로 업데이트

Next.js 및 관련 패키지들을 최신 버전으로 업데이트합니다.

bash
yarn upgrade next # 또는 npm update next

6. 이미지 최적화 도구 비활성화

Next.js가 기본적으로 사용하는 이미지 최적화 도구인 squoosh에서 문제가 발생하는 것 같으니, 해당 도구를 비활성화하는 것도 한 가지 방법입니다.

javascript
// next.config.js
module.exports = {
  images: {
    disableStaticImages: true,
  },
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(jpe?g|png|gif|svg)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[path][name].[ext]",
          },
        },
      ],
    });

    return config;
  },
};

위의 방법을 차례로 시도하여 오류를 해결해 보세요. 만약 문제가 지속된다면, 발생한 구체적인 오류 메시지와 현재 사용 중인 Next.js 설정 파일을 공유해 주시면 더 자세한 도움을 드릴 수 있습니다.