question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

npx @betterer/cli init fails for fresh Angular project

See original GitHub issue

Describe the bug Running npx @betterer/cli init in an Angular project fails.

To Reproduce

  1. Create new angular project: npx @angular/cli new betterer-angular-test --defaults

  2. Move in the newly created project cd betterer-angular-test

  3. Run the init command: npx @betterer/cli init

This fails and produces the following error:

C:\Sandboxes\Experiments\betterer-angular-test>npx @betterer/cli init
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

  ERROR  Cannot read properties of null (reading 'useCallback')

 C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/@betterer/cli/node_modules/react/cjs/react.developme
 nt.js:1641:21

 1638: }
 1639: function useCallback(callback, deps) {
 1640:   var dispatcher = resolveDispatcher();
 1641:   return dispatcher.useCallback(callback, deps);
 1642: }
 1643: function useMemo(create, deps) {
 1644:   var dispatcher = resolveDispatcher();

 -useCallbac (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/@betterer/cli/node_modules/react/cjs/re
            act.development.js:1641:21)
 - Init (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/@betterer/cli/dist/init/init.js:10:55)
 -renderWithHoo (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/react-reconciler/cjs/react-reconcile
  s            r.development.js:6412:18)
 -mountIndeterminateComp (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/react-reconciler/cjs/react-
  nent                  reconciler.development.js:9238:13)
 -beginWork (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/react-reconciler/cjs/react-reconciler.de
           velopment.js:10476:16)
 -Object.invokeGuardedCallb (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/react-reconciler/cjs/rea
  ckProd                   ct-reconciler.development.js:12101:10)
 -invokeGuardedCallb (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/react-reconciler/cjs/react-reco
  ck                nciler.development.js:12292:31)
 -beginWork$ (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/react-reconciler/cjs/react-reconciler.d
            evelopment.js:16531:7)
 -performUnitOfWo (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/react-reconciler/cjs/react-reconci
  k              ler.development.js:15340:12)
 -workLoopSyn (C:/Users/xxx/AppData/Local/npm-cache/_npx/050c53b43837086b/node_modules/react-reconciler/cjs/react-reconciler.
             development.js:15268:5)

Expected behavior It should not throw an exception, and initialize betterer without issues.

Versions (please complete the following information):

  • OS: Windows 10
  • Betterer Version: 5.1.7
  • Node Version: 16.14.0
  • Angular Version: 13.3.0

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
yharaskrikcommented, May 4, 2022

Note putting this in your resolutions in package.json fixes the issue (if using yarn)

"resolutions": {
        "@betterer/cli/react": "^16",
        "@betterer/logger/react": "^16",
        "@betterer/reporter/react": "^16",
        "@betterer/tasks/react": "^16",
        "@betterer/cli/react-dom": "^16",
        "@betterer/logger/react-dom": "^16",
        "@betterer/reporter/react-dom": "^16",
        "@betterer/tasks/react-dom": "^16"
    },
0reactions
phenomnomnominalcommented, May 12, 2022

I’m pretty sure this is fixed in 5.3.4, but would love confirmation!

Read more comments on GitHub >

github_iconTop Results From Across the Web

npx gts init breaks Angular 9 project · Issue #482 - GitHub
Background: An existing Angular 9 Project, with following basic stack: Angular CLI: 9.1.1. Node: 12.6.0. OS: linux x64. Angular: 9.1.1
Read more >
Initializing angular project fails - Stack Overflow
I had the same problem after making a fresh project using npm install -g @angular/cli ng new <projectname>.
Read more >
ng new - Angular
Option Description Value Type Default Value ‑‑commit Initial git repository commit information. boolean true ‑‑directory The directory name to create the workspace in. string ‑‑force Force...
Read more >
Be proactive when you join an Angular project - Tim Deschryver
Tips to help improve the shape of an older Angular codebase. ... To add Betterer run the init command: ... npx @betterer/cli init....
Read more >
How to Build a Native App from Angular Projects with Capacitor
If you already got your Angular app you don't need to start a new one, ... --save-dev # Setup the Capacitor config npx...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found