Problem using a NPM Package builded with Rollup - reactjs

Question

I am creating a npm package with react components, providers, and other utilities. The idea is use this npm package in other projects. I configured rollup to create the builds but when I try to use it in another project I got a "React is not defined" error.
Here is my code and the error in detail:
package.json:
{
"name": "myapp",
"version": "0.1.14",
"description": "Npm package.",
"main": "lib/index.cjs.js",
"module": "lib/index.esm.js",
"files": [
"dist",
"README.md"
],
"scripts": {
"start": "react-scripts start",
"build": "npx rollup -c",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#fluentui/react": "8.52.2",
"#rjsf/core": "4.2.0",
"#rjsf/fluent-ui": "4.2.0",
"#types/node": "^17.0.21",
"#types/react": "^17.0.40",
"#types/react-dom": "^17.0.13",
"axios": "^0.25.0",
"office-ui-fabric-core": "^11.0.0",
"react-query": "^3.34.19",
"react-simple-resizer": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0",
"#fluentui/react": "8.52.2"
},
"devDependencies": {
"#babel/cli": "^7.17.0",
"#babel/core": "^7.17.0",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"#fluentui/example-data": "^8.4.0",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^21.0.1",
"#rollup/plugin-node-resolve": "^13.1.3",
"#rollup/plugin-replace": "^4.0.0",
"#rollup/plugin-typescript": "^8.3.1",
"react-scripts": "^5.0.0",
"rollup": "^2.67.1",
"rollup-plugin-import-css": "^3.0.3",
"rollup-plugin-includepaths": "^0.2.4",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
rollup.config.js:
import babel from "#rollup/plugin-babel";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import includePaths from "rollup-plugin-includepaths";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import { terser } from "rollup-plugin-terser";
import pkg from "./package.json";
import typescript from "#rollup/plugin-typescript";
import css from "rollup-plugin-import-css";
import replace from "#rollup/plugin-replace";
const outputs = [
{
file: pkg.main,
format: "umd",
},
{
file: pkg.module,
format: "es",
}
]
const external = [
...Object.keys(pkg.peerDependencies || {})
].map(name => RegExp(`^${name}($|/)`))
const config = outputs.map(({ file, format }) => ({
input: "src/lib/index.js",
output: {
file,
format,
name: "ReactPackage",
globals: {
react: "React",
"react-dom": "ReactDOM",
"#fluentui/react": "FluentUI",
}
},
external,
plugins: [
typescript(),
peerDepsExternal(),
includePaths({
include: {},
paths: ["src/lib"],
external: Object.keys(pkg.dependencies),
extensions: ['.js', '.json', '.html', '.tsx', '.ts']
}),
css(),
babel({
babelHelpers: "bundled",
exclude: "node_modules/**",
configFile: "./babel.config.rollup.js",
}),
resolve({
browser: true
}),
commonjs(),
terser(),
replace({
preventAssignment: true,
'process.env.NODE_ENV': JSON.stringify('production')
})
],
}));
export default config;
Babel:
const pkg = require('./package.json');
module.exports = {
presets: [
[
'#babel/preset-env',
{
modules: false,
targets: pkg.browserslist.production,
},
],
[
'#babel/preset-react',
{
"runtime": "automatic"
}
]
],
ignore: ['node_modules/**'],
};
The provider that I am trying to use but I get an "React is not defined" error:
Provider.ts:
import PContext from "../contexts/pContext";
import { QueryClient, QueryClientProvider } from "react-query";
import React, { useState } from "react";
const queryClient = new QueryClient();
const PProvider = ({ children, url }) => {
const [active, setActive] = useState(null);
return (
<PContext.Provider
value={{
url,
active,
setActive
}}
>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</PContext.Provider>
);
};
export default PProvider;