[Bug]: Running yarn install in web-extension fails

[simaofreitas]

Preflight Checklist

• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

web-extension

Version

2.0.0 alpha 11

Expected Behavior

I would be able to run yarn install followed by the build for a browser and it should work.

Actual Behavior

When running yarn install in the web-extension folder it results in the following error:

[4/4] 🔨  Building fresh packages...
success Saved lockfile.
$ npm run pack:chrome && npm run pack:firefox

> @rrweb/[email protected] pack:chrome
> cross-env TARGET_BROWSER=chrome ZIP=true vite build

vite v3.1.8 building for production...

[vite-plugin-web-extension]
  Building HTML Pages in Multi-Page Mode:
    • src/popup/popup.html
    • src/options/index.html
    • src/pages/index.html
  Building in Lib Mode:
    • src/background/index.ts
    • src/content/index.ts
    • src/content/inject.ts

[vite-plugin-web-extension] Building HTML Pages in Multi-Page Mode
transforming (1) popup/popup.htmlBrowserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
✓ 115 modules transformed.
Zip packing - "dist/chrome" folder :
  - "dist/chrome" folder does not exist!
[commonjs--resolver] Failed to resolve entry for package "rrweb-player". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "rrweb-player". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///Users/simaofreitas/Code/rrweb/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:34841:11)
    at resolvePackageEntry (file:///Users/simaofreitas/Code/rrweb/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:34838:5)
    at tryNodeResolve (file:///Users/simaofreitas/Code/rrweb/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:34584:20)
    at Object.resolveId (file:///Users/simaofreitas/Code/rrweb/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:34357:28)
    at file:///Users/simaofreitas/Code/rrweb/node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:22710:40
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
npm ERR! Lifecycle script `pack:chrome` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @rrweb/[email protected]
npm ERR!   at location: /Users/simaofreitas/Code/rrweb/packages/web-extension
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command

Steps to Reproduce

• Run yarn install in the root directory
• Run yarn install in the web-extension directory
• see the error above

Testcase Gist URL

No response

Additional Information

Node 18

[maddyonline]

+1

[eoghanmurray]

We've updated to a vite build process in the last week, would you be able to try again and report back here?

[kirankunigiri]

I also ran into this issue and figured out the fix. After running yarn install, you also need to make sure to run yarn dev in the root repository so that each package will get a dist folder. Now you can run yarn dev:chrome and it started working for me.

The root README says to run this command, but the README for the web-extension leave this out, so maybe it should be added.

[charlie632]

As everything is inside a yarn monorepo, it tries to import the rrweb-player module from the monorepo. I assume you haven't built any other packages inside the monorepo. You need to build the other deps or isolate the web-extension. One quick workaround is to rename the package.json at the root to something else to "break" the monorepo, and then running the commands inside the web-extension README.

[eoghanmurray]

Could someone put together a PR to update the docs? Or is there something we can modify in the build process so that extra steps are not needed?