bazelbuild / bazelbuild/examples
Vite in Frontend/React not using the right config
- Dominant language
- Starlark
- Stars
- 957
- Forks
- 578
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 1
Description
I think the example in [`frontend/react`](https://github.com/bazelbuild/examples/tree/main/frontend/react) might not work properly. In particular, I don't think `vite` is using the `vite.config.js` that is declared as a data dependency to the [vite tool](https://github.com/bazelbuild/examples/blob/9d6a2e67d29b8b6208d22d70cb22880345bb6803/frontend/react/BUILD.bazel#L58)
## How to Observe
I tried to intentionally break the `vite.config.js` by introducing syntax error.
From the `frontend` folder, running: `JS_BINARY__DEBUG=1 bazel run react:start`
```
Starting js_run_devserver //react:start
+ Syncing 19 files && folders...
+ Syncing 14 non-node_modules files & folders...
Syncing file react/index.html (1.2 KiB)
Syncing file react/package.json (1.3 KiB)
Syncing file react/src/App.css (564 B)
Syncing file react/src/index.css (366 B)
Syncing file react/src/logo.svg (2.6 KiB)
Syncing file react/src/App.js (1.2 KiB)
Syncing file react/src/index.js (657 B)
Syncing file react/src/reportWebVitals.js (743 B)
Syncing file react/public/BUILD.bazel (155 B)
Syncing file react/public/favicon.ico (3.8 KiB)
Syncing file react/public/logo192.png (5.2 KiB)
Syncing file react/public/manifest.json (492 B)
Syncing file react/public/logo512.png (9.4 KiB)
Syncing file react/public/robots.txt (67 B)
+ Syncing 5 other node_modules files
Syncing symlink react/node_modules/@types/react (bazel-out)
Syncing symlink react/node_modules/react (bazel-out)
Syncing symlink react/node_modules/react-dom (bazel-out)
Syncing symlink react/node_modules/vite-plugin-svgr (bazel-out)
Syncing symlink react/node_modules/web-vitals (bazel-out)
19 files synced in 12 ms
```
This shows that `vite.config.js` is not copied to the sandbox. So when the `run_dev_server` runs vite, it uses a default config (because it runs in the sandbox working directory and there's no config). Since my config was broken it should have failed as well.
I'm not sure what's the best way to make it work, I tried to list the `vite.config.js` in the `data` of the `start` target:
```
js_run_devserver(
name = "start",
args = [
"--config",
"vite.config.js",
],
data = RUNTIME_DEPS + ["vite.config.js"],
tool = ":vite",
)
```
When I do this, which then lead to another problem:
```
Starting js_run_devserver //react:start
+ Syncing 20 files && folders...
20 files synced in 11 ms
Running '/home/regb/.cache/bazel/_bazel_regb/62aa5bae3e82accc5fada3ffeff9a29e/execroot/_main/bazel-out/k8-fastbuild/bin/react/start_/start.runfiles/_main/react/vite_/vite --config vite.config.js' in /tmp/js_run_d
evserver-XXXXXXrE5DHZ/_main
failed to load config from /tmp/js_run_devserver-XXXXXXrE5DHZ/_main/react/vite.config.js
error when starting dev server:
Error: Cannot find module 'vitest/config'
Require stack:
- /tmp/js_run_devserver-XXXXXXrE5DHZ/_main/react/vite.config.js
- /home/regb/.cache/bazel/_bazel_regb/62aa5bae3e82accc5fada3ffeff9a29e/execroot/_main/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/vite@3.2.11_at_types_node_18.18.3/node_modules/vite/dist/node/chunks/
dep-3e87c7b2.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
at Module._load (node:internal/modules/cjs/loader:986:27)
at Module.require (node:internal/modules/cjs/loader:1233:19)
at require (node:internal/modules/helpers:179:18)
at Object. (/tmp/js_run_devserver-XXXXXXrE5DHZ/_main/react/vite.config.js:31:21)
at Module._compile (node:internal/modules/cjs/loader:1358:14)
at _require.extensions. [as .js] (file:///home/regb/.cache/bazel/_bazel_regb/62aa5bae3e82accc5fada3ffeff9a29e/execroot/_main/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/vite@3.2.11_at_t
ypes_node_18.18.3/node_modules/vite/dist/node/chunks/dep-3e87c7b2.js:63167:24)
at Module.load (node:internal/modules/cjs/loader:1208:32)
at Module._load (node:internal/modules/cjs/loader:1024:12)
at Module.require (node:internal/modules/cjs/loader:1233:19)
child tool process exited with code 1
```
That shows that this time it sees and picks up the config, but it doesn't have the runtime npm dependencies (e.g. vitest/config), which are also not copied to the sandbox. That can be fixed by moving all the dependencies directly to the `start` target, but I'm wondering if this is the right way to make the example work?
Another possible way to make it work might be to tell `vite` to load the `vite.config.js` that is in the output tree runfiles, I suppose that would work and see the right npm dependencies, however I'm not sure how to make that work in the example.
Contributor guide
Assessment
This issue has not been assessed yet.