How to ship a vite dev setup as npm package - 'useEffect' is not found?

[peetzweg]

Hey,

Inspired by https://github.com/mattdesl/canvas-sketch, I want to build an editor for scripts drawing on html canvas. I'm building my editor with vite and i really like HMR feature, instant startup time and typescript transpiling. I want to distribute this editor via npm packages.

So that I can use it in another js project like

pnpm install entropretty-editor

vim sketch.ts

pnpm entropretty ./sketch.ts

All works just fine. However just in my monorepo setup.

What I got so far:

• I achieved distributing the workspace as is, with vite.config.ts, tsconfigs and sources.
• I wrote and distribute a cli entropretty with it which starts vite using createServer and the config.
• I pass the given sketch file path along as constant define or environment variable.

But when I use it in a fresh project with the version installed from npm it fails to resolve react and gives me different versions of this error depending on the browser.

[Debug] [vite] connecting... (client, line 495)
[Debug] [vite] connected. (client, line 614)
[Error] SyntaxError: Importing binding name 'useEffect' is not found.

SyntaxError: The requested module 'http://localhost:4242/node_modules/.pnpm/[email protected]/node_modules/react/index.js?v=abd2c501' doesn't provide an export named: 'useRef'

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/[email protected]/node_modules/react/index.js?v=abd2c501' does not provide an export named 'useEffect'

However the requested react module seems to be available at the given locations/uris to me.

Here is my repository I tested it with: https://github.com/peetzweg/sketch-ts

As I'm basically shipping an unbuilt vite app I made most of the devDependencies an actual dependency. This did not resolve the issue.

I'm a bit lost how to resolve this issue. Happy to get any input on this which might bring me closer to my goal or is this overall a stupid idea and there is an easier way to get a local server, transpiling typescript with HMR shipped via npm? :)