search

teambit / bit

A build system for development of composable software.
https://bit.dev
Other
17.84k stars 924 forks source link

Error Creating react component #8277

Closed LukeHosk closed 5 months ago

LukeHosk commented 9 months ago

Describe the bug

I am trying to follow the guide at NextJs | Bit, and am encountering a 'JavaScript heap out of memory' error trying to add a react environment

after running bit create react react-env --env react-env, it seems to work normally until stopping at '⠈⡙ loading components. Succeeded in 370μs' for a minute or two then outputting an error message.

Steps to Reproduce

  1. Open NextJS project (have tried both in my own project and a new one with npx create-next-app
  2. run bit init --default-scope org-name.scope-name (with own org and scope)
  3. run bit create react react-env --env react-env

Expected Behavior

docs say i should see something along the lines of


learnbit-react.rocket-roster/envs/react-env
  location: rocket-roster/envs/react-env
  env:      teambit.envs/env (set by template)

Screenshots, exceptions and logs

full terminal output with personal information censored:


<Removed For Privacy> nextjs-dashboard-bit % bit init --default-scope <Removed For Privacy>.nextjs-dashboard
successfully initialized a bit workspace.
<Removed For Privacy> nextjs-dashboard-bit % bit create react react-env --env react-env             
⠈⡙ loading components. Succeeded in 370μs
<--- Last few GCs --->

[33846:0x148008000]   149490 ms: Mark-Compact 2010.6 (2081.7) -> 1997.9 (2082.2) MB, 4401.79 / 1.92 ms  (average mu = 0.134, current mu = 0.023) task; scavenge might not succeed
[33846:0x148008000]   153845 ms: Mark-Compact 2011.8 (2082.2) -> 1998.4 (2082.7) MB, 4051.88 / 0.67 ms  (average mu = 0.102, current mu = 0.070) task; scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1047b8bf4 node::Abort() [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
 2: 0x1047b8ddc node::ModifyCodeGenerationFromStrings(v8::Local<v8::Context>, v8::Local<v8::Value>, bool) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
 3: 0x10493cda8 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
 4: 0x104b116e8 v8::internal::Heap::GarbageCollectionReasonToString(v8::internal::GarbageCollectionReason) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
 5: 0x104b1559c v8::internal::Heap::CollectGarbageShared(v8::internal::LocalHeap*, v8::internal::GarbageCollectionReason) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
 6: 0x104b12000 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::internal::GarbageCollectionReason, char const*) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
 7: 0x104b0fd88 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
 8: 0x104b76fd0 v8::internal::MinorGCJob::Task::RunInternal() [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
 9: 0x104819fc4 node::PerIsolatePlatformData::RunForegroundTask(std::__1::unique_ptr<v8::Task, std::__1::default_delete<v8::Task>>) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
10: 0x104818ce0 node::PerIsolatePlatformData::FlushForegroundTasksInternal() [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
11: 0x1051885b4 uv__async_io [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
12: 0x10519a68c uv__io_poll [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
13: 0x105188b78 uv_run [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
14: 0x1046e9754 node::SpinEventLoopInternal(node::Environment*) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
15: 0x1047f88d8 node::NodeMainInstance::Run(node::ExitCode*, node::Environment*) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
16: 0x1047f8674 node::NodeMainInstance::Run() [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
17: 0x104783030 node::Start(int, char**) [/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node]
18: 0x1870750e0 start [/usr/lib/dyld]
/Users/<Removed For Privacy>/bin/bit: line 9: 33846 Abort trap: 6           "/Users/<Removed For Privacy>/.bvm/nodejs/20.10.0/bin/node" "$basedir/../.bvm/links/bit/node_modules/@teambit/bit/bin/bit" "$@"

Specifications

Additional context

Add any other context about the problem here.

GiladShoham commented 9 months ago

how much memory do you have allocated to nodejs process?

LukeHosk commented 9 months ago

I haven't changed any node settings so I would assume the default (which appears to be 512mb according to a quick search)

benjgil commented 9 months ago

Hi there The command should have been bit create react react-env --aspect teambit.react/react-env, with the --aspect flag, not --env - with the --env flag it's very likely the env template is coming from the wrong source and causing the OOM issue.

While i'll have that corrected in the page you were using, we've recently added more direct support for nextjs in bit, please take a look at the docs for that, where you'll also see the correct bit create command for creating the custom env

coreyaus commented 9 months ago

Thanks @benjgil - that's useful to know and great to see all the latest updates!

At the moment that command you shared above fails with the following error:

Bit received an error loading teambit.react/react-env@1.0.34, due to the error: "Cannot find module '@teambit/preview.react-preview'". This is required for the component: unknown

Has there been a recent regression or breaking change? It looks like there have been a number of recent commits to the bit master branch that are failing CI checks - I'm not sure if that's related: https://github.com/teambit/bit/commits/master/

image

Running bit install doesn't help either:

image

Here is the full output when running the command with the --log=error flag:

⢀⠀ ensuring 1 capsule(s) for all envs and aspects for global-scope at /Users/corey/Library/Caches/Bit/capsules/b2c9cbc6dd060ca106a0971b89b406210b261bae teambit.harmony/aspect-loader, Bit received an error loading teambit.react/react-env@1.0.34, due to the error:
"Cannot find module '@teambit/preview.react-preview'".
This is required for the component: unknown
Please use the '--log=error' flag for the full error.
try running "bit install" to fix this issue

    err: {
      "type": "Error",
      "message": "Cannot find module '@teambit/preview.react-preview'\nRequire stack:\n- /Users/corey/Library/Caches/Bit/capsules/b2c9cbc6dd060ca106a0971b89b406210b261bae/teambit.react_react-env@1.0.34/dist/react-env.bit-env.js\n- /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugin.js\n- /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugins.js\n- /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/aspect-loader.main.runtime.js\n- /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/dist/load-bit.js\n- /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/dist/app.js\n- /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/bin/bit",
      "stack":
          Error: Cannot find module '@teambit/preview.react-preview'
          Require stack:
          - /Users/corey/Library/Caches/Bit/capsules/b2c9cbc6dd060ca106a0971b89b406210b261bae/teambit.react_react-env@1.0.34/dist/react-env.bit-env.js
          - /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugin.js
          - /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugins.js
          - /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/aspect-loader.main.runtime.js
          - /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/dist/load-bit.js
          - /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/dist/app.js
          - /Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/bin/bit
              at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
              at Module._load (node:internal/modules/cjs/loader:985:27)
              at module.constructor.require (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/dist/hook-require.js:27:31)
              at require (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/toolbox.performance.v8-cache/dist/v8-compile-cache.js:39:28)
              at _preview (/Users/corey/Library/Caches/Bit/capsules/b2c9cbc6dd060ca106a0971b89b406210b261bae/teambit.react_react-env@1.0.34/dist/react-env.bit-env.js:43:16)
              at new ReactEnv (/Users/corey/Library/Caches/Bit/capsules/b2c9cbc6dd060ca106a0971b89b406210b261bae/teambit.react_react-env@1.0.34/dist/react-env.bit-env.js:153:47)
              at Object.<anonymous> (/Users/corey/Library/Caches/Bit/capsules/b2c9cbc6dd060ca106a0971b89b406210b261bae/teambit.react_react-env@1.0.34/dist/react-env.bit-env.js:335:34)
              at Module._compile (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/toolbox.performance.v8-cache/dist/v8-compile-cache.js:64:36)
              at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
              at Module.load (node:internal/modules/cjs/loader:1207:32)
              at Module._load (node:internal/modules/cjs/loader:1023:12)
              at module.constructor.require (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/dist/hook-require.js:27:31)
              at require (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/toolbox.performance.v8-cache/dist/v8-compile-cache.js:39:28)
              at Plugin.require (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugin.js:29:22)
              at Plugin.register (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugin.js:24:35)
              at Plugins.registerPluginWithTryCatch (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugins.js:96:21)
      "code": "MODULE_NOT_FOUND",
      "requireStack": [
        "/Users/corey/Library/Caches/Bit/capsules/b2c9cbc6dd060ca106a0971b89b406210b261bae/teambit.react_react-env@1.0.34/dist/react-env.bit-env.js",
        "/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugin.js",
        "/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/plugins.js",
        "/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/aspect-loader.main.runtime.js",
        "/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/dist/load-bit.js",
        "/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/dist/app.js",
        "/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/bit/bin/bit"
      ]
got an error from command create: BitError: Bit received an error loading teambit.react/react-env@1.0.34, due to the error:
"Cannot find module '@teambit/preview.react-preview'".
This is required for the component: unknown
Please use the '--log=error' flag for the full error.
try running "bit install" to fix this issue

    err: {
      "type": "BitError",
      "message": "Bit received an error loading \u001b[36mteambit.react/react-env@1.0.34\u001b[39m, due to the error:\n\"Cannot find module '@teambit/preview.react-preview'\".\nThis is required for the component: \u001b[36munknown\u001b[39m\nPlease use the \u001b[36m'--log=error'\u001b[39m flag for the full error.\ntry running \u001b[36m\"bit install\"\u001b[39m to fix this issue\n",
      "stack":
          BitError: Bit received an error loading teambit.react/react-env@1.0.34, due to the error:
          "Cannot find module '@teambit/preview.react-preview'".
          This is required for the component: unknown
          Please use the '--log=error' flag for the full error.
          try running "bit install" to fix this issue

              at AspectLoaderMain.loadExtensionsByManifests (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/aspect-loader.main.runtime.js:736:47)
              at async AspectLoaderMain.loadAspectsFromGlobalScope (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/aspect-loader/dist/aspect-loader.main.runtime.js:584:7)
              at async GeneratorMain.getGlobalGeneratorEnvs (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/generator/dist/generator.main.runtime.js:326:9)
              at async GeneratorMain.listEnvComponentTemplates (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/generator/dist/generator.main.runtime.js:552:23)
              at async GeneratorMain.getComponentTemplate (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/generator/dist/generator.main.runtime.js:291:21)
              at async GeneratorMain.generateComponentTemplate (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/generator/dist/generator.main.runtime.js:428:28)
              at async CreateCmd.report (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/generator/dist/create.cmd.js:55:21)
              at async CommandRunner.runReportHandler (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/cli/dist/command-runner.js:157:20)
              at async CommandRunner.runCommand (/Users/corey/.bvm/versions/1.5.29/bit-1.5.29/node_modules/@teambit/cli/dist/command-runner.js:98:16)
      "isUserError": true,
      "name": "BitError"
    }
Bit received an error loading teambit.react/react-env@1.0.34, due to the error:
"Cannot find module '@teambit/preview.react-preview'".
This is required for the component: unknown
Please use the '--log=error' flag for the full error.
try running "bit install" to fix this issue

[*] the command "create" has been terminated with an error code 1

Thanks for your help with this, and happy new year!

coreyaus commented 8 months ago

UPDATE:

It looks like some packages were moved around by the Bit team so the command that worked for me to create a React environment used the bitdev.react scope instead of the teambit.react scope:

bit create react-env envs/react --aspect bitdev.react/react-env

Does that look right to you @benjgil? If so it looks like it should be updated in the docs at https://bit.dev/docs, e.g. on this page and in the related blog posts: https://bit.dev/docs/react-env/set-up-your-env

benjgil commented 8 months ago

Hi @coreyaus Yep that should definitely be updated in the docs (we've been moving a lot of scopes around recently, still catching up with the docs), though the command should still have worked fine with the previous scope.

There was an old bug in older versions of bit, which can still affect you until you run the command bit capsule delete -a so that any older capsules that could have the dependencies issue are removed and then bit will re-create them.

I have a feeling this only worked with the newer bitdev env as you hadnt tried to use it in the past, so it wasnt affected by the bug.

Anyway, glad this is now resolved for you, we'll update the docs and if you come across something similar in future you'll know that the capsule deletion might help.

Please feel free to close this issue if this is all resolved now :)