I'm trying to bundle a React library with Vite and to use it within another React project.
I'm following the Vite documentation, but when I import the bundle, I get an error:
TypeError: Cannot add property lanes, object is not extensible
markUpdateLaneFromFiberToRoot
node_modules/react-dom/cjs/react-dom.development.js:21928
21925 |
21926 | function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
21927 | // Update the source fiber's lanes
> 21928 | sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);
21929 | var alternate = sourceFiber.alternate;
21930 |
21931 | if (alternate !== null) {
Here's the configuration I'm using:
// package.json
{
"name": "uploader",
"version": "1.1.4",
"files": [
"dist"
],
"main": "./dist/uploader.umd.js",
"module": "./dist/uploader.es.js",
"exports": {
".": {
"import": "./dist/uploader.es.js",
"require": "./dist/uploader.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview"
},
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"devDependencies": {
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@vitejs/plugin-react-refresh": "^1.3.1",
"typescript": "^4.3.2",
"vite": "^2.4.4"
}
}
and:
// vite.config.ts
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
const path = require('path');
export default defineConfig({
plugins: [reactRefresh()],
build: {
lib: {
entry: path.resolve(__dirname, 'src/main.tsx'),
name: 'uploader',
},
rollupOptions: {
external: ['react', 'react-dom'],
},
},
});
Any idea on what I'm missing?