Mini StackBlitz (or similar) demo request about backpack HOT 6 CLOSED

Hi @olliecurtis,

Would you or one of your team members have a moment to look at the errors?

Thanks in advance!

BR
Alex

from backpack.

Hello @alex-schernbeck,

Thank you for reaching out to us regarding this! So for utilising Backpack, you will need to tie this with a build tool in order to bring all these things together which we have run tests with to check compatibility, such as Remix, NextJS or our homegrown tool Backpack React Scripts which has a handy getting started guide to setup a React app and then have Backpack compilation built in.

Sadly I can't setup a StackBlitz as we are not familiar with this tool and have no idea of compatibility or usage with it, however the Backpack React Scripts link above has a great getting started guide which will have all the build tooling needed.

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

# start your app development like you normally would with `create-react-app`
cd my-app
npm start

Hope this helps and please comment back if you need more assistance or running into more issues, happy to help

Thanks
Ollie

from backpack.

Hi @olliecurtis,

Thank you very much for your quick reply and help! Unfortunately I was ill, so I can only reply today.

I tried to execute your instructions, but the script unfortunately aborts with the following error:
9277 error gyp ERR! find VS
9277 error gyp ERR! find VS msvs_version not set from command line or npm config
9277 error gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
9277 error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
9277 error gyp ERR! find VS looking for Visual Studio 2015
9277 error gyp ERR! find VS - not found
9277 error gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
9277 error gyp ERR! find VS
9277 error gyp ERR! find VS **************************************************************
9277 error gyp ERR! find VS You need to install the latest version of Visual Studio
9277 error gyp ERR! find VS including the "Desktop development with C++" workload.
9277 error gyp ERR! find VS For more information consult the documentation at:
9277 error gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
9277 error gyp ERR! find VS **************************************************************
9277 error gyp ERR! find VS
9277 error gyp ERR! configure error
9277 error gyp ERR! stack Error: Could not find any Visual Studio installation to use
9277 error gyp ERR! stack at VisualStudioFinder.fail (C:\MAMP\htdocs{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
9277 error gyp ERR! stack at C:\MAMP\htdocs{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-gyp\lib\find-visualstudio.js:75:16
9277 error gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\MAMP\htdocs{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-gyp\lib\find-visualstudio.js:363:14)
9277 error gyp ERR! stack at C:\MAMP\htdocs{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-gyp\lib\find-visualstudio.js:71:14
9277 error gyp ERR! stack at C:\MAMP\htdocs{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-gyp\lib\find-visualstudio.js:384:16
9277 error gyp ERR! stack at C:\MAMP\htdocs{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-gyp\lib\util.js:54:7
9277 error gyp ERR! stack at C:\MAMP\htdocs{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-gyp\lib\util.js:33:16
9277 error gyp ERR! stack at ChildProcess.exithandler (node:child_process:430:5)
9277 error gyp ERR! stack at ChildProcess.emit (node:events:514:28)
9277 error gyp ERR! stack at maybeClose (node:internal/child_process:1105:16)
9277 error gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:305:5)
9277 error gyp ERR! System Windows_NT 10.0.19045
9277 error gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\MAMP\htdocs\{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
9277 error gyp ERR! cwd C:\MAMP\htdocs{{TESTPROJECT}}\SANDBOX\SKYSCANNER\my-app\node_modules\node-sass
9277 error gyp ERR! node -v v20.9.0
9277 error gyp ERR! node-gyp -v v8.4.1
9277 error gyp ERR! not ok
9277 error Build failed with error code: 1
9278 verbose exit 1
9279 timing npm Completed in 111502ms
9280 verbose unfinished npm timer reify 1699957725456
9281 verbose unfinished npm timer reify:build 1699957796544
9282 verbose unfinished npm timer build 1699957796552
9283 verbose unfinished npm timer build:deps 1699957796554
9284 verbose unfinished npm timer build:run:postinstall 1699957804096
9285 verbose unfinished npm timer build:run:postinstall:node_modules/node-sass 1699957804585
9286 verbose code 1
9287 error A complete log of this run can be found in: C:\Users{{USERNAME}}\AppData\Local\npm-cache_logs\2023-11-14T10_28_44_994Z-debug-0.log

I have used the following versions and tools:
VS Code
Version: 1.84.0 (user setup)
$ nvm -v
1.1.11
$ node -v
v20.9.0
$ npm -v
10.1.0
$ python --version
Python 3.12.0

Do you know where the error could be?

Many thanks in advance!

Thanks
Alex

from backpack.

Hey @alex-schernbeck

Sorry for the delay, looking at that error it's not something we are familiar with seeing with the VSCode error.

I do notice that your python version is up on the latest, would you be able to downgrade to 3.9 and give it a try? As I know that node-gyp bundled with node-sass isn't happy on newer versions.

It's worth noting too I noticed you look to be developing on windows which can also be an issue with tooling compatibility too, unfortunately our support is limited when it comes to Windows as we don't develop on this platform and use MacOS for development here so support is limited/untested

Let me know how that goes
Ollie

from backpack.

It might also be worth bumping down your node version too to test and this is our current aligned version of 18 as per our docs, so it could be that Node is playing a factor here with node-sass compatibility

Something we are working on removing out of Backpack too!

from backpack.

Stale: Closing due to no updates

from backpack.