[Javascript] Uncaught TypeError: (0 , immer__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

 

Uncaught TypeError: (0 , immer__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

 

redux 구현 에서 불변성 편리함을 위해 immer 적용 후 위와 같은 에러가 나타났다.

 

해결방법

import produce from 'immer';

 

import {produce} from 'immer';

아래처럼 중괄호로 감싸주면 된다. 

 

immer 사이트에서도 저렇게 사용하고있어서 혹시나 해서 감싸봤더니 오류가 사라지고 화면랜더링이 정상적으로 작동했다.

 

import React, { useEffect,useState } from 'react'
import axios from 'axios'

문득 중괄호와 그냥 import의 차이가 궁금해져서 구글링을 해봤다. 이따금씩 궁금했던 거긴한데

axios나 그냥 react는 중괄호과 없고 hook들을 가져올때는 중괄호를 써야해서 왜일까 싶었는데 찾아보니 이런 차이점이 있었다.

 

export 방식의 차이

모듈을 불러올 때 받아오는 모듈의 export 방식 차이가 있다고 한다.

export에는 Named와 Default 두가지 방법이 있는데 named export의 경우 여러가지 값을 export할 때 유용하며

default export의 경우 모듈당 딱 하나만 내보낼 수 있어 메인에 해당하는 객체, 함수, 클래스 등을 export 하는것이 좋다.

 

가장 많이 보이는 예시

// export
const a = 1;
const b = 2;

export { a };
export const c = 3;
export default b;

// import
import d, { a, c as e } from './Sample';
console.log(a, d, e) // 1, 2, 3

import의 결과처럼 default로 내보낸 b는 괄호가 없어도 기본적으로 사용할 수 있다.

 

 

 

 

참고:

- https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-import-export-%EC%A0%95%EB%A6%AC#export_%EC%82%AC%EC%9A%A9%EB%B2%95