npm error while running the command

[amiabl-programr]

I have tried several times to install the template, but I keep getting this errors-I attached a copy.
2023-03-08T17_02_37_395Z-debug-0.log

[dhavalveera]

Hey @amiabl-programr , I am getting the same error, I am also stuck badly with it, I tried the following commands:

npx create-react-app@3.4.1 my-app --scripts-version=@skyscanner/backpack-react-scripts --template @skyscanner/backpack --use-npm

and

npx create-react-app my-app --scripts-version=@skyscanner/backpack-react-scripts --template @skyscanner/backpack --use-npm

but nothing is working & throwing the same error.

my Nodejs & NPM Version:

npm: 9.5.1
Node.js: 18.16.0

@olliecurtis @donvince - please help us on this

[olliecurtis]

Hey folks

Sorry for the long silence of this notifications hadn't gone off for this so fell massively from the radar. Sorry again.

Could you try running again using:

npx create-react-app visualizer-app --scripts-version=@skyscanner/backpack-react-scripts --template @skyscanner/backpack --use-npm

As this should now work again.

Thanks

[AlexBall03]

Hello @olliecurtis,

I haven’t tried using that command yet, but it seems as though your command looks exactly the same as the other one mentioned above by someone else. The only difference being the name of the project.

Can you please explain why yours would work but not the others? Is it mainly just the fact that the command doesn’t like the way we are naming the project?

I’m trying to do one of the job sims on the website called Forage for Skyscanner, but I keep getting a big NPM error when trying to use CRA. I tried using older versions of CRA, but it didn’t work, I kept getting the same error.

Again I haven’t tried using the command yet, I will when I get a chance. Does it have to be called “visualizer-app” for it to work?

Have a great weekend!

Thank you,
Alex

[sueasueasuea]

Hey folks

Sorry for the long silence of this notifications hadn't gone off for this so fell massively from the radar. Sorry again.

Could you try running again using:

npx create-react-app visualizer-app --scripts-version=@skyscanner/backpack-react-scripts --template @skyscanner/backpack --use-npm

As this should now work again.

Thanks

Doesn't work, Please help.
Thanks.

[AlexBall03]

I am having the same issue as the first person in this thread still, if you look at his bug log that he attached, mine reads very similarly, though my versions of Node and NPM are newer.

NOTE: I just copied and pasted the command that you said to use.

[PDochev]

I have the same issue. Just started the programme on Forage and encountered this problem. Anyone found a fix ?

[SebastianStankiewicz]

Same issue! Anyone found a fix?

[AlexBall03]

No, unfortunately.

[mzs21]

Hi,
I am trying to do an internship on Forage as a Front-End Software Engineer, and I must run the command mentioned in this issue.

@olliecurtis and @donvince can you please help?

[Namnika]

Hi everyone,

I have also had the same issue. And finally yesterday I solved it by doing the following steps:

• I have got the same big error of node-gyp related to a Python issue. Here is the error issue I found in the stack overflow
  https://stackoverflow.com/q/71599040/20035351

• I solved it by reinstalling Python (the latest version), Idk why Python is required for this but when I searched their repo it included python (so maybe due to this)

• so that big npm error was of node-gyp :(

• lastly within this command line npx [email protected] my-app --scripts-version=@skyscanner/backpack-react-scripts --template @skyscanner/backpack --use-npm remove @3.4.1 and if you didn't change the app name still this will work and that's it.

I hope this resolves the issue.

my os env:
win 10 (also in win 11 it will work)
Node: v18.20.2 (approx)
npm: v10.8.2
Python: 3.12.4

(PS: if you have less than those above versions then try to upgrade it, so this issue will resolved)

UPDATE

Now, I am trying to resolve this issue of stylesheets. if anyone faced this please try to reply here!

[AlexBall03]

Awesome, thanks for letting us know!

When I get a chance later today I'll give it a try.

I think I was also having that style sheet error. But I'll let you know exactly what the error is when I try later!

Thank you again!

[mzs21]

@Namnika I tried what you said. Now I get the following errors:
npm error code ENOENT npm error syscall lstat npm error path C:\Users\DELL\AppData\Roaming\npm npm error errno -4058 npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\DELL\AppData\Roaming\npm' npm error enoent This is related to npm not being able to find a file. npm error enoent

Looks like, I have to do more debugging.

[olliecurtis]

Hey folks,

It's probably worth an update here, this package is no longer in active development so changes here aren't up to date with what is actually now available in newer Backpack versions.

This library was created for us to build things at Skyscanner at a time but we haven't been generating new projects recently hence this being outdated.

Its worth also noting too that our developers don't have access to windows machines so if you are trying to run any of these commands on a windows machine there is no guarentee it will work or we can support it unfortunately.

What I would recommend is using newer technologies such as Remix or NextJS as the upstream create-react-app that Backpack React Scripts is on is no longer maintained or supported.

Backpack as a component library is fully supported by the newer technologies mentioned above!

Many Thanks
Ollie

[Namnika]

Hello all, I have successfully published my work to GitHub. and it is working quite though. (for some reason I have make it to private) 😞

Hi @mzs21 , I will suggest you try to debug, if it doesn't then I will look through it. (cause the issue you're facing is something I already faced earlier)

Hi @olliecurtis , I am enthusiasts to contribute to this project if you allow. I hope you read my last comment in my last solved issue.

Thank you.

PS: I am working in windows 10(also work in 11), in which cra template works well! But surely, I will try at my best to solve all issues.

[AlexBall03]

I'm glad it still worked for you! I'm going to try myself later

[AlexBall03]

@Namnika, I updated my Python version to v3.12.4, and it still gives me the GYP error along with some warnings of things that are deprecated.

I downloaded the recent stable release. Should I download the most recent pre-release (ex. Python v3.13)?

[AlexBall03]

Actually let me try something, I forgot I have something called Anaconda which might not have the latest version lol

[AlexBall03]

Never mind it didn't work.

[AlexBall03]

2024-08-06T18_14_36_118Z-debug-0.log

This is the error log that I am still getting even though I updated Python to v3.12.4 (the stable release)

[Namnika]

Hi @AlexBall03 , which os are you using?
Sorry for the late reply.
actually anaconda doesn't need for this problem. if you have installed Python (latest version) then it is enough.

I have python (3.12.4), so maybe you should download this version.

When you have done all the above things, there should be an error of node-gyp if it doesn't resolve then still your folder will be downloaded. (check in your drives.)

[AlexBall03]

Hello @Namnika,

My OS is Windows 11.

Yeah I realize Anaconda isn't needed. But because I have it, I wasn't sure if it was set to using an older version of Python. Playing around with it though didn't change anything though.

Yeah I'll try checking the folder to see if that exists in there or not.

[Namnika]

Hi, @AlexBall03, If you get a folder, try to do npm start. The node-gyp error still exists there, as I mentioned in my answer, node-gyp error will not remove any more, cause I tried to install it twice it was there as-is :(
BUT, this cra-template works fine without hassle.
So, it's better to leave it there!

[shreyareddyedulakanti]

Hi all,

I successfully finished my task for this assignment. There were many things to do on this because most of them were either deprecated or were moved to another repository.

Initially, I removed the version in the command as mentioned by @dhavalveera then I removed the node_modules folder which comes with the repository, and installed it again.

Later I installed npm install @skyscanner/backpack-web --save
and also npm install sass --save

We need to make a lot of changes since the bpk has been moved to @skyscanner/backpack-web like changing the paths when importing in index from 'bpk-stylesheets/base' to '@skyscanner/backpack-web/bpk-stylesheets/base' and more..

Later I had to make a few changes in the code and also we don't need to install the calendar again it is already present in the @skyscanner/backpack-web and you can find the usage from the calendar component in backpack documentation.

For the test case, we need to make a few changes and update it to the latest react code.

Hope this helps. 😃

[AreeshImran]

Hi all,

I successfully finished my task for this assignment. There were many things to do on this because most of them were either deprecated or were moved to another repository.

Initially, I removed the version in the command as mentioned by @dhavalveera then I removed the node_modules folder which comes with the repository, and installed it again.

Later I installed npm install @skyscanner/backpack-web --save and also npm install sass --save

We need to make a lot of changes since the bpk has been moved to @skyscanner/backpack-web like changing the paths when importing in index from 'bpk-stylesheets/base' to '@skyscanner/backpack-web/bpk-stylesheets/base' and more..

Later I had to make a few changes in the code and also we don't need to install the calendar again it is already present in the @skyscanner/backpack-web and you can find the usage from the calendar component in backpack documentation.

For the test case, we need to make a few changes and update it to the latest react code.

Hope this helps. 😃

Hey this helped a lot! I just have a compile error with 18 errors (e.g ERROR in ./node_modules/@skyscanner/backpack-web/bpk-component-button/src/BpkButton.js) and I wanted to ask how did you fix that?

It gives me multiple errors saying "Module build failed (from ./node_modules/babel-loader/lib/index.js)"

[shreyareddyedulakanti]

@AreeshImran
Can you post a picture here so that I can review it?

And did you make these changes?

1. We must change the import paths for bpk-stylesheets in index.js because bpk-stylesheets are now under the backpack-web package.
   import '@skyscanner/backpack-web/bpk-stylesheets/base';
   import '@skyscanner/backpack-web/bpk-stylesheets/base.css';
   import '@skyscanner/backpack-web/bpk-stylesheets/font';
   import '@skyscanner/backpack-web/bpk-stylesheets/font.css';

2. Then run npm start you will still get an error like @import '~bpk-mixins';. Update this one @import '@skyscanner/backpack-web/bpk-mixins'; in App.scss.

3. Regarding the rest of the errors it was resolved in another ticket putting that ticket (Error: Undefined variable after importing @skyscanner/backpack-web/bpk-mixins backpack#3575) and also mentioning it here:
   Update this one padding: $bpk-spacing-lg * 2; to padding: bpk-spacing-lg() * 2;
   There will be other errors similar to this: remove $ and add() to the end.