Create-React-App (CRA) 에서 외부 module import 할 수 있게 설정 변경하기

Module 설치

react-app-rewired 설치

React root directory에서 실행해야 합니다.

> npm install react-app-rewired
or
> npm install --save-dev react-app-rewired

customize-cra 설치

마찬가지로 React root directory에서 실행해야 합니다.

> npm install customize-cra
or
> npm install --save-dev customize-cra

Package.json 수정

package.json 을 아래와 같이 수정해줍니다.

react-scripts → react-app-rewired

{
	...
	"scripts" : {
		- "start" : "react-scripts start",
		+ "start" : "react-app-rewired start",
		- "build" : "react-scripts build",
		+ "build" : "react-app-rewired build",
		- "test" : "react-scripts test",
		+ "test" : "react-app-rewired test",
		"eject" : "react-scripts eject"
	}
	...
}

config-overrides.js 작성

webpack config 값을 덮어쓰도록 config-overrides.js 파일을 작성합니다.

const { removeModuleScopePlugin } = require("customize-cra");

// override webpack config
module.exports = function override(config, env) {
    // enable importing from outside src directory
    if (!config.plugins) {
        config.plugins = [];
    }
    removeModuleScopePlugin()(config);

    return config;
};

/src directory 외부의 모듈 import

이제 react directory의 외부에 존재하는 모듈을 import 해봅니다.

...
import defaultURL from "../../../../Common/Module.js";
...

아래와 같은 에러 없이 import 되는 모습을 확인할 수 있습니다!

Module not found: You attempted to import ../../../../Common/Klaytn/Network/NetworkURL.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported