lovable-widget-core

A small React component you can publish to npm and import into Lovable projects (they use Vite + React + TypeScript).

Install (in Lovable)

Open your project → Terminal and run:

npm install lovable-widget-core

If the name is taken on npm, publish under your own scope (change name in this package’s package.json), then install with that name instead.

Use in a page

Ask Lovable chat to add a route, or create e.g. src/pages/WidgetDemo.tsx:

import { LovableWidget } from "lovable-widget-core";

export default function WidgetDemo() {
  return (
    <div className="p-4">
      <LovableWidget title="My widget" />
    </div>
  );
}

Wire the route in your router (e.g. /widget) the way your app already does for other pages.

Vite / Lovable: “Invalid hook call” or useEffect of null

This package does not bundle React — it uses your app’s react / react-dom. If Vite ends up with two React copies, you’ll see invalid hook call or Cannot read properties of null (reading 'useEffect').

In the Lovable project’s vite.config.ts, ensure a single React is resolved (merge with existing defineConfig):

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    dedupe: ["react", "react-dom"],
  },
  optimizeDeps: {
    include: ["react", "react-dom"],
  },
});

Then restart the dev server (and clear Vite cache if needed: delete node_modules/.vite).

Props

Develop in this monorepo

# from repo root
npm install
npm run dev:widget

Opens the playground on port 5180.

Publish to npm

cd packages/lovable-widget-core
npm run build
npm publish --access public

Use a scoped name like @yourname/lovable-widget if lovable-widget-core is unavailable.

Repo

See the monorepo README for the Connect Lovable app and Chrome extension (Firebase config + copy/paste prompts).