에러 메시지
ERROR in ./node_modules/@toss/react/esm/components/ClickArea/ClickArea.mjs 5:0-40 Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/surim/Desktop/for-test/node_modules/@toss/react/esm/components/ClickArea' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. ERROR in ./node_modules/@toss/react/esm/components/HiddenHeading/HiddenHeading.mjs 3:0-40 Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/surim/Desktop/for-test/node_modules/@toss/react/esm/components/HiddenHeading' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. ERROR in ./node_modules/@toss/react/esm/components/OpenGraph/OpenGraph.mjs 2:0-46 Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/surim/Desktop/for-test/node_modules/@toss/react/esm/components/OpenGraph' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. ERROR in ./node_modules/@toss/react/esm/utils/Style.mjs 2:0-56 Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/surim/Desktop/for-test/node_modules/@toss/react/esm/utils' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. ERROR in ./node_modules/@toss/react/esm/utils/convertNewlineToJSX.mjs 2:0-46 Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/surim/Desktop/for-test/node_modules/@toss/react/esm/utils' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. webpack compiled with 5 errors
- Create-React-App 환경, react-app-rewired 환경에 @toss/react 패키지를 설치하고 사용하면 위 에러가 발생한다.
- react 17.0.2 버전인데 에러 발생!
원인
- CRA를 기반으로 작성된 프로젝트, react-scripts에서 webpack5버전을 이용
- Webpack5에서는 모듈을 더 엄격하게 처리한다. Webpack5에서는 ESM 모듈에서 경로의 확장자를 명시적으로 제공해야 한다.
해결 방법
// config-overrides.js function webpackConfig(config) { config.resolve.alias['react/jsx-runtime'] = 'react/jsx-runtime.js' return config }
- react-app-rewired를 통해 webpack의 alias로 특정 모듈의 경로를 직접 지정
레퍼런스
Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5
