I am using JS, "react": "16.13.0" and "rollup": "^3.6.0" in my component library.
I added this package @uiw/react-color-alpha to import a component and build a new one in my library on top of it.
This is my babel plugin config:
babel({ exclude: 'node_modules/**', babelHelpers: 'bundled', presets: ['@babel/preset-env', '@babel/react'], })
On importing this build file in storybook, I get this error: Failed to compile. Module not found: Can't resolve 'react/jsx-runtime' in ...
I am using "react": "16.13.0" in the storybook project too.
I see that the build file of this package and the rollup output for my component & contains automatic runtime imports:
import { jsx as _jsx } from "react/jsx-runtime";
,which is not supported by react 16.
These are the package versions being used in the component library:
"@babel/core": "^7.20.5", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6",
I tried to include node_modules using the include option yet babel did not transpile the output files using classic import(React.createElement).
Also tried transpiling the output again using getBabelOutputPlugin with { runtime: 'classic' } option explicitly but getting the same result.
This is how I used the plugin:
globbySync('src/components/**/*.js').map((inputFile) => ({ input: inputFile, output: { file: inputFile.replace('src/components', 'dist'), format: 'esm', plugins: [ getBabelOutputPlugin({ presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'classic' }]], }), ], }, ...commonConfig, plugins: commonPlugins, }))
I'd appreciate any help regd. this issue.