Donate react-cra example from aspect-build/bazel-examples

[alexeagle]

Code comes from https://github.com/aspect-build/bazel-examples/tree/main/react-cra

[duhruh]

hello, I was trying to setup my own bazel mono-repo with the create-react-app example from https://github.com/aspect-build/bazel-examples and came across this comment https://github.com/aspect-build/bazel-examples/issues/269#issuecomment-1739419714 which lead me to this pull request.

So i tried testing this out on my windows machine and got the following error:

> bazel build react:build
INFO: Analyzed target //react:build (2 packages loaded, 66 targets configured).      
INFO: Found 1 target...
ERROR: C:/examples/frontend/react/BUILD.bazel:21:22: ReactScripts react/build failed: (Exit 1): build__js_binary.bat failed: error executing command (from target //react:build) bazel-out\x64_windows-opt-exec-2B5CBBC6\bin\react\build__js_binary.bat build
Creating an optimized production build...       
Failed to compile.

[eslint] 
src\App.js
  Line 11:26:   'React' is not defined  no-undef
  Line 19:23:   'React' is not defined  no-undef
  Line 19:77:   'React' is not defined  no-undef
  Line 19:165:  'React' is not defined  no-undef

Search for the keywords to learn more about each error.

Target //react:build failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 125.746s, Critical Path: 30.03s
INFO: 2 processes: 2 internal.
FAILED: Build did NOT complete successfully

maybe my setup is wrong or something, but was hoping you could point me in the right direction.

[alexeagle]

That's the same failure on this pr. Maybe @gregmagolan can help

[duhruh]

Ah okay sorry about that, if it helps I was looking into this a bit and found that the build command works if I remove all the typescript stuff and just use raw javascript so it would seem that there's an issue with the transpilation step. After that I tried to run the js_run_devserver target bazel run react:start

> bazel run  react:start     
INFO: Analyzed target //react:start (0 packages loaded, 0 targets configured).
INFO: Found 1 target...
Target //react:start up-to-date:
  bazel-bin/react/start.bat
INFO: Elapsed time: 11.651s, Critical Path: 0.01s
INFO: 1 process: 1 internal.
INFO: Build completed successfully, 1 total action
INFO: Running command line: bazel-bin/react/start.bat start

Starting js_run_devserver /react:start
Syncing...
19 files synced in 11 ms
Running './node_modules/.bin/react-scripts start' in C:\Users\someone\AppData\Local\Temp\js_run_devserver-UCP5Yx\_main\react

node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: spawn ./node_modules/.bin/react-scripts ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:285:19)
    at onErrorNT (node:internal/child_process:485:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
    at onErrorNT (node:internal/child_process:485:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn ./node_modules/.bin/react-scripts',
  path: './node_modules/.bin/react-scripts',
  spawnargs: [ 'start' ]
}

I tried adding :

 js_run_devserver(
     name = "start",
     args = ["start"],
-    command = "node_modules/.bin/react-scripts",
+    chdir = package_name(),
+    command = "./node_modules/.bin/react-scripts",
     data = CRA_DEPS,
 )

like in the nextjs example: https://github.com/bazelbuild/examples/blob/main/frontend/next.js/defs.bzl#L158 but that didn't seem to help either.

I tried to also change the prefix of the command to ../node_modules and ../../node_modules like in nextjs but none of those worked either.

I then decided to run the next.js example to see if I can find any difference between the two. Running bazel run next.js:next_dev seemed to also fail for different reasons unrelated to this pr but if you're curious here's the error:

error TS6059: File 'C:/lyqzba65/execroot/_main/bazel-out/x64_windows-fastbuild/bin/next.js/pages/index.tsx' is not under 'rootDir'...

[alexeagle]

@duhruh Could you file an issue about the windows failure on that other example? This PR thread will go away when it's merged.

[duhruh]

@alexeagle i opened https://github.com/bazelbuild/examples/issues/327 to address the js_run_devserver issue.