Skip to content

Vite in Frontend/React not using the right config #627

@regb

Description

@regb

I think the example in 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

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.<anonymous> (/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.<computed> [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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions