create-react-app as subdirectory

[SamuelTJackson]

trafficstars

Description

I cloned create-react-app into my project. Renamed it to ui. In addition its a subdirectory and the WORKSPACE file is in the parent directory of the ui project. Rebuilding the project with ibazel ends in an error.

🔬 Minimal Reproduction

I changed the followng things: WORKSPACE file

yarn_install(
    # Name this npm so that Bazel Label references look like @npm//package
    name = "npm",
    package_json = "//ui:package.json",
    yarn_lock = "//ui:yarn.lock",
)

package.json

  "scripts": {
    "start": "ibazel run //ui:start",
    "build": "bazel build //ui:build",
    "test": "ibazel test //ui:test",
    "postinstall": "patch-package"
  },

Removing the WORKSPACE file from the ui folder

now running yarn install and yarn start gives the following output:

iBazel [9:33AM]: Starting...

################################################################################
# Did you know iBazel can invoke programs like Gazelle, buildozer, and         #
# other BUILD file generators for you automatically based on bazel output?     #
# Documentation at: https://github.com/bazelbuild/bazel-watcher#output-runner  #
################################################################################

internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'ui/chdir.js'
Require stack:
- internal/preload
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at Module._preloadModules (internal/modules/cjs/loader.js:1125:12)
    at loadPreloadModules (internal/bootstrap/pre_execution.js:443:5)
    at prepareMainThreadExecution (internal/bootstrap/pre_execution.js:62:3)
    at internal/main/run_main_module.js:7:1 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'internal/preload' ]
}

So I changed

react_scripts(
    name = "start",
    args = [
        "--node_options=--require=./$(rootpath chdir.js)",
        "start",
    ],
    data = _RUNTIME_DEPS,
    tags = [
        # This tag instructs ibazel to pipe into stdin a event describing actions.
        # ibazel send EOF to stdin by default and `react-scripts start` will stop when getting EOF in stdin.
        # So use this to prevent EOF.
        "ibazel_notify_changes",
    ],
)

At this line "--node_options=--require=./$(rootpath chdir.js)", I added ./ in front of the `$(rootpath chdir.js)

Now it works without any errors and the react page is shown in the browser. Now changing the text in src/App.tsx from Learn React to Lear React with bazel and saving the file. Ibazel is recognizing the change start building the project again. Now the following error show up:

🔥 Exception or Error

Failed to compile.

undefined
TypeScript error in undefined(undefined,undefined):
Cannot find global type 'Array'.  TS2318

🌍 Your Environment

Operating System:

  
Operating System: Arch Linux
Kernel: Linux 5.8.1-arch1-1
Architecture: x86-64

  

Output of bazel version:

  
Bazelisk version: v1.6.1
Starting local Bazel server and connecting to it...
Build label: 3.0.0
Build target: bazel-out/k8-opt/bin/src/main/java/com/google/devtools/build/lib/bazel/BazelServer_deploy.jar
Build time: Mon Apr 6 12:52:37 2020 (1586177557)
Build timestamp: 1586177557
Build timestamp as int: 1586177557
  

[alexeagle]

TS2318 is a regular typescript error, https://stackoverflow.com/questions/50721103/error-ts2318-cannot-find-global-type-object

so I don't think there's anything Bazel-specific about this - please comment again if that's wrong.

[SamuelTJackson]

Ok but why is this error coming up, after I only change some text? After changing the text ibazel creates an error. But when I shut down ibazel and restart it, it works again. This error only comes up when it recompiles with ibazel.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for 90 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[celentes]

Some more info on the topic, for me this error doesn't end up with TS 2318, it shows as:

Failed to compile ./src/App.tsx
Error: ENOENT: no such file or directory, open '/tmp/bazel_docker_root/f8087e59fd95af1ae29e8fcb7ff1a3dc/execroot/tower/bazel-out/k8-fastbuild/bin/app/start.sh.runfiles/tower/app/src/App.tsx'

Feels like it has to do with runfiles symlinking mechanism, although I have no idea why it then works in non-subdirectory scenario.

[celentes]

Possibly related

[danny-skydio]

I got the same exact set of errors, first one is not being able to find chdir.js so I also added ./ to get a bit further.

Using ibazel, it loaded correctly the first time, but then after I change a file, the same error pops up:

Failed to compile.

undefined
TypeScript error in undefined(undefined,undefined):
Cannot find global type 'Array'.  TS2318

Looking in the console, there's a bunch more (can't find global type Boolean, CallableFunction, etc.). The only couple that have any paths at all look like this:

undefined
TypeScript error in undefined(undefined,undefined):
File '/home/myuser/.cache/bazel/_bazel_myuser/mycachehash/execroot/myrepo/node_modules/typescript/lib/lib.dom.d.ts' not found.  TS6053

For what it's worth, I have a single install list at the root of the repo (and I'm installing to a node_modules there). Could that be problematic? It seems to work fine for build/start without ibazel.

[lovepocky]

same error

iBazel [12:06AM]: Running //packages/create-react-app:start
iBazel [12:06AM]: Notifying of changes
INFO: Invocation ID: bba16f6d-7cd5-43c4-8f76-b23e31980fda
Loading: 
Loading: 0 packages loaded
Analyzing: target //packages/create-react-app:start (0 packages loaded, 0 targets configured)
INFO: Analyzed target //packages/create-react-app:start (0 packages loaded, 0 targets configured).
INFO: Found 1 target...
[0 / 2] [Prepa] BazelWorkspaceStatusAction stable-status.txt
Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest 
React version for linting.
Target //packages/create-react-app:start up-to-date:
  dist/bin/packages/create-react-app/start.sh
  dist/bin/packages/create-react-app/start_loader.js
  dist/bin/packages/create-react-app/start_require_patch.js
INFO: Elapsed time: 1.529s, Critical Path: 0.31s
INFO: 2 processes: 1 remote cache hit, 1 internal.
INFO: Build completed successfully, 2 total actions
INFO: Build completed successfully, 2 total actions
iBazel [12:06AM]: IBAZEL BUILD SUCCESS
Failed to compile.

undefined
TypeScript error in undefined(undefined,undefined):
Cannot find global type 'Array'.  TS2318

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for 90 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[UebelAndre]

This still sounds like an open issue and like it could use some support from someone more familiar with the rules. Maybe it'd be worth trying to setup a create-react-app workspace using typescript? If that's the commonality in the error.

[jizusun]

I also need help 😢

My guess is that the issue is not with Typescript With my GitHub repo, JavaScript application created by cra:

• https://github.com/jizusun/bazel-go-docker/blob/main/frontend-react/BUILD.bazel

❯ make test-react
bazel run //frontend-react:test
INFO: Analyzed target //frontend-react:test (0 packages loaded, 0 targets configured).
INFO: Found 1 target...
Target //frontend-react:test up-to-date:
  bazel-bin/frontend-react/test.sh
  bazel-bin/frontend-react/test_loader.js
  bazel-bin/frontend-react/test_require_patch.js
INFO: Elapsed time: 5.953s, Critical Path: 0.03s
INFO: 1 process: 1 internal.
INFO: Build completed successfully, 1 total action
INFO: Running command line: external/bazel_tools/tools/test/test-setup.sh frontend-react/test.sh '--node_options=--require=frontend-react/chdir.js' test '--watchAll=false' --no-cache --no-
INFO: Build completed successfully, 1 total action
exec ${PAGER:-/usr/bin/less} "$0" || exit 1
Executing tests from //frontend-react:test
-----------------------------------------------------------------------------
Error: Cannot find module 'frontend-react/chdir.js'
Require stack:
- internal/preload
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at Module._preloadModules (internal/modules/cjs/loader.js:1125:12)
    at loadPreloadModules (internal/bootstrap/pre_execution.js:443:5)
    at prepareMainThreadExecution (internal/bootstrap/pre_execution.js:62:3)
    at internal/main/run_main_module.js:7:1
make: *** [test-react] Error 1

while building react works perfectly

❯ make build-react
bazel build //frontend-react:build
INFO: Analyzed target //frontend-react:build (1233 packages loaded, 3786 targets configured).
INFO: Found 1 target...
INFO: From Action frontend-react/build:
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.34 KB  build/static/js/2.f299e225.chunk.js
  1.63 KB   build/static/js/3.4d64feab.chunk.js
  1.17 KB   build/static/js/runtime-main.3e0f1028.js
  570 B     build/static/js/main.df8d3df1.chunk.js
  531 B     build/static/css/main.8c8b27cf.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Target //frontend-react:build up-to-date:
  bazel-bin/frontend-react/build
INFO: Elapsed time: 19.165s, Critical Path: 11.81s
INFO: 4 processes: 3 internal, 1 darwin-sandbox.
INFO: Build completed successfully, 4 total actions

[mr-pascal]

@SamuelTJackson

At this line "--node_options=--require=./$(rootpath chdir.js)", I added ./ in front of the `$(rootpath chdir.js) Now it works without any errors and the react page is shown in the browser.

thanks for pointing out the "fix" with the chdir.js, helped a lot for at least being able to build my CRA.

not sure why, but when I change the App.tsx ibazel recognizes it and rebuild the Build:

Compiled successfully!

You can now view create-react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.184:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

iBazel [4:09PM]: Changed: "/Users/pz/go/src/github.com/abszissex/project-alpha/services/apps/cra/src/App.tsx". Rebuilding...
iBazel [4:09PM]: Running //services/apps/cra:start
iBazel [4:09PM]: Notifying of changes
Loading: 
Loading: 0 packages loaded
Analyzing: target //services/apps/cra:start (0 packages loaded, 0 targets configured)
INFO: Analyzed target //services/apps/cra:start (0 packages loaded, 0 targets configured).
INFO: Found 1 target...
[0 / 2] [Prepa] BazelWorkspaceStatusAction stable-status.txt
Target //services/apps/cra:start up-to-date:
  bazel-bin/services/apps/cra/start.sh
  bazel-bin/services/apps/cra/start_loader.js
  bazel-bin/services/apps/cra/start_require_patch.js
INFO: Elapsed time: 0,775s, Critical Path: 0,12s
INFO: 2 processes: 1 internal, 1 darwin-sandbox.
INFO: Build completed successfully, 2 total actions
INFO: Build completed successfully, 2 total actions
iBazel [4:09PM]: IBAZEL BUILD SUCCESS

So I at least don't get the same error as you do. But even though the app is re-built after refreshing the page I still see the old App. So either it's not really re-built or another thing is not working here 🤔

bazel_version:

Build label: 4.0.0-homebrew
Build target: bazel-out/darwin-opt/bin/src/main/java/com/google/devtools/build/lib/bazel/BazelServer_deploy.jar
Build time: Sat Jan 23 02:12:39 2021 (1611367959)
Build timestamp: 1611367959
Build timestamp as int: 1611367959

Also I am using rules_nodejs-4.0.0, this might already help?

[xnerhu]

For me adding adding ./ before rootpath doesn't work.

[MatthieuCoder]

any updates on this ?

[xc2]

Related reproduction: https://github.com/xc2/GithubIssues/tree/main/bazel-rule_nodejs-craMIssingNodeModules. (Problem 2 Section)

[branks]

Did anyone manage to get this working?

[devniel]

same problem here.

[GeorgeScrivener]

I'm having the same problem. Anybody got a workaround?

[Kruemelmann]

For me adding adding ./ before rootpath doesn't work.

This actually worked for me.

react_scripts(
    name = "start",
    args = [
        "--node_options=--require=./$(rootpath chdir.js)",
        "start",
    ].
 ...

@xnerhu Did you add it like i did?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for 6 months. It will be closed if no further activity occurs in 30 days. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions[bot]]

This issue was automatically closed because it went 30 days without any activity since it was labeled "Can Close?"