"Error: @vitejs/plugin-react can't detect preamble. Something is wrong." on empty extension

[dinedal]

Trying to even create a simple "hello world" log in context.tsx doesn't appear to work, throws

Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201

[JoeyDoey]

Apologies & thanks for your patience 🙏

First-run experience should be much better now. Assuming you're using pnpm as your package manager, try running:

pnpm dlx @bedframe/cli make bedframe-project \
  --browsers 'chrome, firefox, safari, brave, opera, edge' \
  --version '0.0.0'  \
  --description 'this is my BED! there are many like it, but this one is... MINE!!!'  \
  --author 'you, you@example.com, https://example.com'  \
  --license MIT  \
  --private  \
  --type popup  \
  --override none  \
  --options embedded  \
  --packageManager pnpm \
  --framework react \
  --language typescript \
  --style tailwind \
  --lintFormat \
  --tests \
  --git \
  --gitHooks \
  --commitLint \
  --changesets \
  --installDeps

The above command will scaffold the project with those configurations. If you'd rather go through the steps one-at-a-time, just run pnpm dlx @bedframe/cli make to get the prompts.

After your project is generated:

cd bedframe-project

Start the Vite dev server for e.g. Chrome extension

pnpm run dev chrome

In Chrome, install extension (Load Unpacked)

dist/chrome # <-- load unpacked