Add a feature - Item View, Quickstart ReactJS-- Unable to proceed (Exception encountered)

Kodfaristo · November 16, 2023, 7:52am

Attempted to create a Feature but encountered an error while executing this command:

npx @mondaydotcomorg/monday-cli@latest scaffold run ./ quickstart-react -t item-view-10114722

CLI execution and console output (results):

npx @mondaydotcomorg/monday-cli@latest scaffold run ./ quickstart-react -t item-view-10114722

Starting scaffolding process
Repository was downloaded successfully
Copying the directory
Started injecting data to .env file
Finished injecting data to .env file
Installing packages. It can take a few moments
Node modules were installed successfully
Running the project

monday-react-quickstart-app@0.0.1 start
npm run stop && concurrently “npm run server” “npm run expose”

monday-react-quickstart-app@0.0.1 stop
kill-port 8301 && kill-port 4049 && kill-port 4040

0 process was killed

0 process was killed

0 process was killed

[0]

[0] > monday-react-quickstart-app@0.0.1 server
[0] > react-scripts start
[0]

[1]
[1] > monday-react-quickstart-app@0.0.1 expose
[1] > mtunnel -p 8301
[1]

[1] [15:24:20.574] WARN: retrying connection to the server (attempt 1)…

[1] [15:24:21.587] WARN: retrying connection to the server (attempt 2)…

[1]
[15:24:22.592] WARN: retrying connection to the server (attempt 3)…

[1] [15:24:23.597] WARN: retrying connection to the server (attempt 4)…

[0]
Browserslist: caniuse-lite is outdated. Please run:
[0] npx update-browserslist-db@latest
[0] Why you should do it regularly: GitHub - browserslist/update-db: CLI tool to update caniuse-lite to refresh target browsers from Browserslist config

[1] [15:24:24.601] WARN: retrying connection to the server (attempt 5)…

[0]
(node:10157) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: ‘onAfterSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.
[0] (Use node --trace-deprecation ... to show where the warning was created)

[0] (node:10157) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.

[1] [15:24:25.605] WARN: retrying connection to the server (attempt 6)…

[0]
Starting the development server…
[0]

[1]
[15:24:26.610] WARN: retrying connection to the server (attempt 7)…

[1]
[15:24:27.614] WARN: retrying connection to the server (attempt 8)…

[1] [15:24:28.619] WARN: retrying connection to the server (attempt 9)…

[1] [15:24:29.625] WARN: retrying connection to the server (attempt 10)…

[1] [15:24:30.630] WARN: retrying connection to the server (attempt 11)…

[0]
Compiled successfully!

[0]
[0] You can now view monday-react-quickstart-app in the browser.
[0]
[0] Local: http://localhost:8301

[0] On Your Network: http://192.168.254.103:8301

[0]

[0] Note that the development build is not optimized.

[0]
To create a production build, use npm run build.

[0]

[0] webpack compiled successfully

[1] [15:24:31.636] WARN: retrying connection to the server (attempt 12)…

[1] [15:24:32.641] WARN: retrying connection to the server (attempt 13)…

[1]
[15:24:33.646] WARN: retrying connection to the server (attempt 14)…

[1] [15:24:34.651] WARN: retrying connection to the server (attempt 15)…

[1]
[15:24:35.654] WARN: retrying connection to the server (attempt 16)…

[1] [15:24:36.657] WARN: retrying connection to the server (attempt 17)…

[1] [15:24:37.663] WARN: retrying connection to the server (attempt 18)…

[1] [15:24:38.668] WARN: retrying connection to the server (attempt 19)…

[1] [15:24:39.672] WARN: retrying connection to the server (attempt 20)…

[1] [15:24:40.677] WARN: retrying connection to the server (attempt 21)…

[1]
[15:24:41.681] WARN: retrying connection to the server (attempt 22)…

[1] [15:24:42.687] WARN: retrying connection to the server (attempt 23)…

[1] [15:24:43.692] WARN: retrying connection to the server (attempt 24)…

[1] [15:24:44.697] WARN: retrying connection to the server (attempt 25)…

Encountered the same problem with the other Quickstart Features.

How can we fix this?

Matias.Monday · November 16, 2023, 10:21am

Hello there @Kodfaristo,

Our monday tunnel is experiencing some issues.

I recommend changing from using the monday tunnel to using ngrok so you can start working.

Basically, you would just need to install it, and then in your package.json file, you can change this:

"start": "npm run stop && concurrently \"npm run server\" \"npm run expose\"",
"build": "react-scripts build",
"expose": "mtunnel -p 8301"

To this:

"start": "npm run stop && concurrently \"npm run server\" \"npm run expose\"",
"build": "react-scripts build",
"expose": "ngrok http 8301"

Then if you want to know your URL for ngrok, you just go to your browser and put http://localhost:4040/inspect/http and you should be able to see it.

If that does not work, you can try using the port 3000 instead of 8301.

If that does not work, please send us an email to appsupport@monday.com and we will take a look.

Cheers,
Matias

Kodfaristo · November 17, 2023, 2:27am

Hey Matias,

Thanks for the reply.

I’ve modified the package.json file to include:
“start”: “npm run stop && concurrently "npm run server" "npm run expose"”,
“build”: “react-scripts build”,
“expose”: “ngrok http 8301”

I’ve included the above directives to the package.json file, saved it and re-executed this command:

npx @mondaydotcomorg/monday-cli@latest scaffold run ./ quickstart-react -t item-view-10114722

but I’m still getting the same error message.

Even after editing package.json, I noticed the console log is still running mtunnel upon execution of the above line.

[0] > monday-react-quickstart-app@0.0.1 server
[0] > react-scripts start
[0]

[1]
[1] > monday-react-quickstart-app@0.0.1 expose
[1] > mtunnel -p 8301
[1]

[1]
[10:22:05.606] WARN: retrying connection to the server (attempt 1)…

I’m sure the directive is saved, here are the first few lines of package.json from cat at cli:

quickstart-react % cat package.json
{
“name”: “monday-react-quickstart-app”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “npm run stop && concurrently "npm run server" "npm run expose"”,
“build”: “react-scripts build”,
“expose”: “ngrok http 8301”
“server”: “react-scripts start”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”,
“stop”: “kill-port 8301 && kill-port 4049 && kill-port 4040”
},

What am I doing wrong?

Matias.Monday · November 19, 2023, 10:54am

Hello again @Kodfaristo,

After you change the package-json file you do not have to run “npx @mondaydotcomorg/monday-cli@latest scaffold run ./ quickstart-react -t item-view-10114722” again. If you do that, the monday tunnel will replace ngrok again.

After you change the package-json file, you need to open your terminal again and run “npm run start” and that should allow you to use ngrok.

Please let me know how that goes!

Cheers,
Matias

Kodfaristo · November 23, 2023, 4:55am

I did execute “npm run start” and it does seem to call Ngrok from the console logs, however it stopped at this message “webpack compiled successfully”, nothing follows.

Opening localhost:8301 results to this page:

Matias.Monday · November 23, 2023, 3:01pm

Hello again @Kodfaristo,

If you open http://localhost:4040/inspect/http, do you see an ngrok URL?

Kodfaristo · November 24, 2023, 3:37am

Hi Matias,

yes, I can open that and there is a Ngrok url

Matias.Monday · November 26, 2023, 3:43pm

Hello again @Kodfaristo,

It looks to me like you might need an account for ngrok. But it looks like ngrok works well for you. You need to use that URL instead of localhost:8301.

If you do not succeed, please send us an email at appsupport@monday.com and we will help you there.

Cheers,
Matias

Kodfaristo · November 26, 2023, 11:43pm

I’ve been playing around with the Quickstart Integrations and Ngrok works OK there without an Ngrok account (albeit need to renew tunnel regularly) so I wonder what’s going on with the React quickstart part.

Still, I created Ngrok account.

But the problem persists.

Kodfaristo · November 27, 2023, 8:12am

This workaround works though:
Instead of wating for the output from “npm run start” which is hanging,
I started Ngrok from another CLI session - “Ngrok http 8031”,
then copied the resulting URL into the Custom URL field in the Board View Setup.

I was able to proceed from here.

Now able to upload the sample React code (build) to my Monday test account.

I think I can now continue building the rest of the React code.

Matias.Monday · November 27, 2023, 2:45pm

Hello again @Kodfaristo,

I am glad you could make this work

Add a feature - Item View, Quickstart ReactJS-- Unable to proceed (Exception encountered)

Become part of our community groups

Can't find what you're looking for?

Can't find
what you need?

Add a feature - Item View, Quickstart ReactJS-- Unable to proceed (Exception encountered)

Become part of our community groups

Can't find what you're looking for?

Can't findwhat you need?

Can't find
what you need?