"TypeError: Cannot add property lanes, object is not extensible" when importing a React library bundled with Vite

Viewed 270

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?

0 Answers
Related