ExamplePanel causes error in compile

[rekabuk]

Description I am trying to build my own panel based on "https://github.com/foxglove/create-foxglove-extension/tree/main/examples/panel-settings" I've copied over the code I need and was doing really well, but I am stuck on this compile issue.

I copied the whole of ExamplePanel.tsx into my panel and tried to compile that, but it gives the same error.

• Version: Latest
• Platform: Linux 22-04

Steps To Reproduce

" npm run local-install" generates an error with this line

    setState( produce( (draft) => set(draft, path, value) ) ) ;

Error: build failed: Errors: Error: [tsl] ERROR in /home/andrew/ws_dev/foxglove/myTeleop/src/ExamplePanel.tsx(107,18) TS2349: This expression is not callable. Type 'typeof import("/home/andrew/ws_dev/foxglove/myTeleop/node_modules/immer/dist/immer")' has no call signatures. Error: [tsl] ERROR in /home/andrew/ws_dev/foxglove/myTeleop/src/ExamplePanel.tsx(107,27) TS7006: Parameter 'draft' implicitly has an 'any' type.

Expected Behavior

[foxhubber[bot]]

Internal tracking ticket: FG-4429

[foxymiles]

Can you share your package.json?

[rekabuk]

All I did was clone "create-foxglove-extension", cd to "examples/panel-settings" and run "npm run local-install", so the files should be the same as in git. Should I have performed another step?

Although this morning I am getting a different error completely :-(

$npm run local-install

> foxglove-panel-settings-example@1.1.0 local-install > foxglove-extension install

sh: 1: foxglove-extension: not found

package.json { "name": "create-foxglove-extension", "version": "0.8.4", "publisher": "foxglove", "description": "Create and package Foxglove Studio extensions", "license": "MIT", "keywords": [ "foxglove", "robotics", "ros", "visualization" ], "repository": { "type": "git", "url": "https://github.com/foxglove/create-foxglove-extension.git" }, "main": "dist/index.js", "typings": "dist/index.d.ts", "bin": { "create-foxglove-extension": "dist/bin/create-foxglove-extension.js", "foxglove-extension": "dist/bin/foxglove-extension.js" }, "files": [ "dist", "template", "template/.gitignore", "tsconfig" ], "scripts": { "build": "tsc", "lint:ci": "eslint --report-unused-disable-directives .", "lint": "eslint --report-unused-disable-directives --fix .", "prepack": "yarn build", "prepublishOnly": "yarn lint:ci && yarn test", "test": "jest", "watch": "tsc --watch" }, "engines": { "node": ">= 14" }, "devDependencies": { "@foxglove/eslint-plugin": "^0.21.0", "@types/jest": "^29.4.0", "@types/mkdirp": "^2.0.0", "@types/ncp": "^2", "@types/node": "^18.14.6", "@types/node-fetch": "^2.6.2", "@types/rimraf": "^4.0.5", "@types/tmp": "^0.2.0", "@typescript-eslint/eslint-plugin": "^5.54.1", "@typescript-eslint/parser": "^5.54.1", "css-loader": "6.7.3", "esbuild": "0.17.11", "esbuild-jest": "0.5.0", "eslint": "^8.35.0", "eslint-config-prettier": "^8.7.0", "eslint-plugin-es": "^4.1.0", "eslint-plugin-filenames": "^1.3.2", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jest": "^27.2.1", "eslint-plugin-prettier": "^4.2.1", "jest": "29.5.0", "prettier": "^2.8.4", "style-loader": "3.3.1", "tmp": "0.2.1", "typescript": "4.9.5", "yarn": "1.22.19" }, "dependencies": { "clean-webpack-plugin": "4.0.0", "commander": "10.0.0", "jszip": "3.10.1", "mkdirp": "2.1.5", "ncp": "2.0.0", "node-fetch": "2.6.9", "path-browserify": "1.0.1", "rimraf": "4.3.1", "sanitize-filename": "1.6.3", "ts-loader": "9.4.2", "webpack": "5.75.0" } }

[foxymiles]

You need to run npm install first to install all the npm packages.

[rekabuk]

Hi Miles,

OK – Schoolboy error – sorry to waste your time.

Using “npm init @.*** MyExample” then “npm install” I can then run “npm run local-install” to get the panel into Foxglove.

But if I try the panel-settings example from git, after doing a “npm install” I can successfully build using “npm run build”, but “npm run local-install” fails with this:

@.**@.> local-install foxglove-extension install

Executing prepublish script 'yarn run foxglove:prepublish'... 00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'run' yarn failed with exit code 1

And I get the same error building “foxglove-mushr-extension” from the foxglove extension marketplace.

Best regards Andrew

From: Miles Egan @.> Sent: Thursday, July 27, 2023 1:09 PM To: foxglove/create-foxglove-extension @.> Cc: Baker, Andrew @.>; Author @.> Subject: Re: [foxglove/create-foxglove-extension] ExamplePanel causes error in compile (Issue #112)

[Warning] This email comes from an external source. Be careful of any embedded links and attachments.

You need to run npm install first to install all the npm packages.

— Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https:/github.com/foxglove/create-foxglove-extension/issues/112*issuecomment-1653487284__;Iw!!FxRPhOnl!-rjEEVUYsTX7cxVeoxTv7OT9a-X7g7DA8rZd51sHtZ5CM-mcS3-ik8rV9lC9bvDNrbSMUj44zL4xoxhrnpCUGnt4U6U$, or unsubscribehttps://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/ABPQ52XA5V3PP6ZW7VN6PB3XSJK4XANCNFSM6AAAAAA2XCKFYY__;!!FxRPhOnl!-rjEEVUYsTX7cxVeoxTv7OT9a-X7g7DA8rZd51sHtZ5CM-mcS3-ik8rV9lC9bvDNrbSMUj44zL4xoxhrnpCUMgQPu8g$. You are receiving this because you authored the thread.Message ID: @.***>

[foxymiles]

What do you get for node --version and yarn --version on this machine?

[foxymiles]

It would also be useful to see what you get for npm list --global.

[rekabuk]

./create-foxglove-extension/examples/panel-settings$ yarn --version 0.32+git ./create-foxglove-extension/examples/panel-settings$ node --version v16.20.1 ./create-foxglove-extension/examples/panel-settings$ npm list --global /usr/lib ├── corepack@0.17.0 └── npm@9.8.1

[foxymiles]

That seems like a really old version of yarn. What do you get from which yarn?

[rekabuk]

$ which yarn /usr/bin/yarn

[foxymiles]

I think that very old version of yarn is likely causing problems. What does which npm say?

Try doing this:

npm install --global yarn
hash -r
yarn --version

[rekabuk]

Nothing is ever easy!!!

I had to "rm -r /usr/bin/yrn" as everytime I tried to install I got an error about the path already existing. Having deleting it, the install worked and yarn reports version 1.22.19

"npm run local-install" now also works on the files as checked out of the Git repo.

Thank-you for your time, sorry it wasn't a 'real' bug.

Best Regards Anderw

[foxymiles]

You're welcome! The javascript and npm ecosystem can be difficult to manage sometimes.