[Next.js] Element type is invalid: expected a string ... but got: object 해결

 

Next.js에서 뜬금없이 위와 같은 오류가 뜬다면 아래 세 가지 조건을 동시에 만족하는지 확인해보자.

 

1. 자신이 svg를 import하여 사용하고 있다.

2. package.json의 "dependencies"나 "devDependencies"에 @svgr/webpack 이 없다.

3. next.config.js가 휑하다.

굉장히 단출한 next.config.js

 

Next.js에서 svg를 정상적으로 import하여 사용하려면 "@svgr/webpack" 라이브러리를 설치하고, next.config.js 에 아래 설정 코드를 넣어야 한다.

/** @type {import('next').NextConfig} */

module.exports = {

  webpack: (config) => {

    config.module.rules.push({

      test: /\.svg$/,

      use: ["@svgr/webpack"],

    });

    return config;

  },

};

 

사용하는 버전이나 package.json에 명시된 type에 따라서,

설정 파일명이 "next.config.js" 일 수도, "~~.mjs"일 수도,
그리고 내용물이 "module.exports =" 일 수도, "const nextConfig = {}; export default nextConfig;" 일 수도 있다.

혹은 현 작성 시점에 알 수 없는 다른 변수 형태일 수 있으나, 중요한 것은 저 오브젝트 안에 위 코드를 채워넣는 것이다.

 

export default 의 경우로 예시를 들자면, 아래와 같다.

/** @type {import('next').NextConfig} */

const nextConfig = {

  webpack: (config) => {

    config.module.rules.push({

      test: /\.svg$/,

      use: ["@svgr/webpack"],

    });

    return config;

  },

};

export default nextConfig;