jszip is not a constructor !!!

jszip is not a constructor

react-scripts 를 5로 업데이트하고 발생하는 문제. 사용하는 라이브러리에서 발생하는 문제인데, 원인을 파악해 보니 이렇다.

tempa-xlsx의 xlsx.js

...
var _fs, jszip;
if(typeof JSZip !== 'undefined') jszip = JSZip;
if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
        if(has_buf && typeof jszip === 'undefined') jszip = require('js'+'zip');
        if(typeof jszip === 'undefined') jszip = require('./js'+'zip').JSZip;
        _fs = require('f'+'s');
    }
}
...

해당 라이브러리에 위치 ./jszip.js 에 jszip 을 내장하여 사용하고 있는데 해당 파일을 참조할 수 없어서 발생하는 문제였다

 

해결방법

webpack config 를 업데이트 해줘야하는데, react-app-rewired 를 사용하고 있으니, 이걸 이용하여 업데이트해보자

2023.10.26 - [개발/React] - React Scripts 4.x -> 5.x 마이그레이션

React Scripts 4.x -> 5.x 마이그레이션

 

config-overrides.js 

const webpack = require("webpack");

module.exports = function override(config, env) {
	...
    const plugins = config.plugins || [];
    ...
    plugins.push(new webpack.ProvidePlugin({ JSZip: "jszip" }));
...

webpack config의 plugins 에 ProvidePlugin 으로 JSZip 을 추가해준다.

 

 

해결됨