Example of building a React app

[alexeagle]

Start from latest create-react-app and then wrap the supplied build system with Bazel using rules_js.

[alexeagle]

Started this here: https://github.com/aspect-build/bazel-examples/tree/react/react/create-react-app

Failing with

Creating an optimized production build...
Failed to compile.

SyntaxError: /shared/cache/bazel/user_base/0665ff20446a8ec57f994c91843cbe67/execroot/__main__/bazel-out/k8-fastbuild/bin/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:3):
   7 | const root = ReactDOM.createRoot(document.getElementById('root'));
   8 | root.render(
>  9 |   <React.StrictMode>
     |   ^
  10 |     <App />
  11 |   </React.StrictMode>
  12 | );

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

[alexeagle]

FYI @gregmagolan I upgraded to the 1.0.0 and still fails like this:

/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-opt-exec-2B5CBBC6/bin/build__js_binary.sh.runfiles/__main__/node_modules/.aspect_rules_js/[email protected]_qtbnez4q7bzoc4eqybg3efzzxe/node_modules/react-scripts/scripts/build.js:19
  throw err;
  ^

RpcRemoteError: ENOENT: no such file or directory, realpath '/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-fastbuild/bin/node_modules/react'
    at enoent (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/external/aspect_rules_js/js/private/node-patches/fs.js:752:15)
    at guardedRealPathSync (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/external/aspect_rules_js/js/private/node-patches/fs.js:651:23)
    at Object.fs.realpathSync (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/external/aspect_rules_js/js/private/node-patches/fs.js:181:20)
    at getRealPath (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-opt-exec-2B5CBBC6/bin/build__js_binary.sh.runfiles/__main__/node_modules/.aspect_rules_js/[email protected]_rvmon6ehd2r54ktaosvxv4i2y4/node_modules/fork-ts-checker-webpack-plugin/lib/typescript-reporter/file-system/RealFileSystem.js:73:100)
    at Object.realPath (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-opt-exec-2B5CBBC6/bin/build__js_binary.sh.runfiles/__main__/node_modules/.aspect_rules_js/[email protected]_rvmon6ehd2r54ktaosvxv4i2y4/node_modules/fork-ts-checker-webpack-plugin/lib/typescript-reporter/file-system/RealFileSystem.js:153:20)
    at Object.readStats (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-opt-exec-2B5CBBC6/bin/build__js_binary.sh.runfiles/__main__/node_modules/.aspect_rules_js/[email protected]_rvmon6ehd2r54ktaosvxv4i2y4/node_modules/fork-ts-checker-webpack-plugin/lib/typescript-reporter/file-system/PassiveFileSystem.js:59:45)
    at Object.directoryExists (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-opt-exec-2B5CBBC6/bin/build__js_binary.sh.runfiles/__main__/node_modules/.aspect_rules_js/[email protected]_rvmon6ehd2r54ktaosvxv4i2y4/node_modules/fork-ts-checker-webpack-plugin/lib/typescript-reporter/reporter/ControlledTypeScriptSystem.js:147:58)
    at Object.directoryProbablyExists (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/[email protected]/node_modules/typescript/lib/typescript.js:19354:46)
    at getPackageJsonInfo (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/[email protected]/node_modules/typescript/lib/typescript.js:43797:34)
    at loadModuleFromSpecificNodeModulesDirectory (/shared/cache/bazel/user_base/94b49c00ba73c41eeaf34473af5ccd8a/sandbox/linux-sandbox/10/execroot/__main__/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/[email protected]/node_modules/typescript/lib/typescript.js:44337:27)

[alexeagle]

Note, this one does work for me https://github.com/heartless-clown/bazel_aspect_rules_js_react/blob/ejected/app/react-app/BUILD.bazel#L111-L112 though I think we'd want to review how that's done before cloning to our own examples.

[alexeagle]

Thanks Greg for getting it green