daeronhing
Reputation: 11
Compilation error using @tensorflow/tfjs-node in Scratch3 development
I am working on building an extension for Scratch3 to do machine learning using tensorflow.js. I forked out a repo from here. When I try to start, it ran into compilation error.
Environment details:
- Ubuntu-22.04 on WSL2
- node version v21.7.1
- yarn version 1.22.22
- npm version 10.5.0
Detailed steps are as follows:
- cd scratch-vm && yarn add @tensorflow/tfjs-node
- yarn install && yarn link
- cd ../scratch-gui && yarn link scratch-vm && yarn install
- Add this line in scratch-vm/src/extensions/scratch3_video_sensing/index.js
const tf = require('@tensorflow/tfjs-node') - export NODE_OPTIONS=--openssl-legacy-provider
- cd to scratch_gui
- yarn start
This is my package.json in scratch-vm:
{
"name": "scratch-vm",
"version": "0.2.0",
"description": "Virtual Machine for Scratch 3.0",
"author": "Massachusetts Institute of Technology",
"license": "BSD-3-Clause",
"homepage": "https://github.com/LLK/scratch-vm#readme",
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/LLK/scratch-vm.git"
},
"main": "./dist/node/scratch-vm.js",
"browser": "./src/index.js",
"scripts": {
"build": "npm run docs && webpack --progress --colors --bail",
"coverage": "tap ./test/{unit,integration}/*.js --coverage --coverage-report=lcov",
"deploy": "touch playground/.nojekyll && gh-pages -t -d playground -m \"Build for $(git log --pretty=format:%H -n1)\"",
"docs": "jsdoc -c .jsdoc.json",
"i18n:src": "mkdirp translations/core && format-message extract --out-file translations/core/en.json src/extensions/**/index.js",
"i18n:push": "tx-push-src scratch-editor extensions translations/core/en.json",
"lint": "eslint . && format-message lint src/**/*.js",
"prepublish": "in-publish && npm run build || not-in-publish",
"start": "webpack-dev-server",
"tap": "tap ./test/{unit,integration}/*.js",
"tap:unit": "tap ./test/unit/*.js",
"tap:integration": "tap ./test/integration/*.js",
"test": "npm run lint && npm run docs && npm run tap",
"watch": "webpack --progress --colors --watch",
"version": "json -f package.json -I -e \"this.repository.sha = '$(git log -n1 --pretty=format:%H)'\""
},
"dependencies": {
"@tensorflow/tfjs-node": "^4.17.0",
"@vernier/godirect": "1.5.0",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link-http": "^1.5.15",
"arraybuffer-loader": "^1.0.6",
"atob": "2.1.2",
"btoa": "1.2.1",
"canvas-toBlob": "1.0.0",
"decode-html": "2.0.0",
"diff-match-patch": "1.0.4",
"format-message": "6.2.1",
"graphql": "^14.5.3",
"graphql-tag": "^2.10.1",
"htmlparser2": "3.10.0",
"immutable": "3.8.1",
"jszip": "^3.1.5",
"minilog": "3.1.0",
"nets": "3.2.0",
"scratch-parser": "5.0.0",
"scratch-sb1-converter": "0.2.7",
"scratch-translate-extension-languages": "0.0.20190416132834",
"socket.io-client": "2.0.4",
"sweetalert": "^2.1.2",
"text-encoding": "0.7.0",
"worker-loader": "^1.1.1"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"adm-zip": "0.4.11",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.5.4",
"docdash": "^1.0.0",
"eslint": "^5.3.0",
"eslint-config-scratch": "^5.0.0",
"expose-loader": "0.7.5",
"file-loader": "^2.0.0",
"format-message-cli": "6.2.0",
"gh-pages": "^1.2.0",
"in-publish": "^2.0.0",
"jsdoc": "^3.5.5",
"json": "^10.0.0",
"lodash.defaultsdeep": "4.6.1",
"pngjs": "^3.3.2",
"scratch-audio": "^0.1.0-prerelease.20200528195344",
"scratch-blocks": "^0.1.0-prerelease.20200804140007",
"scratch-l10n": "^3.1.20181129221712",
"scratch-render": "^0.1.0-prerelease.20200806013734",
"scratch-storage": "^1.1.0",
"scratch-svg-renderer": "^0.2.0-prerelease.20200610220938",
"script-loader": "0.7.2",
"stats.js": "^0.17.0",
"tap": "^12.0.1",
"tiny-worker": "^2.1.1",
"uglifyjs-webpack-plugin": "1.2.7",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
This is my package.json in scratch-gui:
{
"name": "scratch-gui",
"version": "0.1.0",
"description": "GraphicaL User Interface for creating and running Scratch 3.0 projects",
"main": "./dist/scratch-gui.js",
"scripts": {
"build": "npm run clean && webpack --progress --colors --bail",
"clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
"deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
"prune": "./prune-gh-pages.sh",
"i18n:push": "tx-push-src scratch-editor interface translations/en.json",
"i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/ && npm run i18n:push",
"start": "webpack-dev-server",
"test": "npm run test:lint && npm run test:unit && npm run build && npm run test:integration",
"test:integration": "jest --runInBand test[\\\\/]integration",
"test:lint": "eslint . --ext .js,.jsx",
"test:unit": "jest test[\\\\/]unit",
"test:smoke": "jest --runInBand test[\\\\/]smoke",
"watch": "webpack --progress --colors --watch"
},
"author": "Massachusetts Institute of Technology",
"license": "BSD-3-Clause",
"homepage": "https://github.com/LLK/scratch-gui#readme",
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/LLK/scratch-gui.git"
},
"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-async-to-generator": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"arraybuffer-loader": "^1.0.6",
"autoprefixer": "^9.0.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.4",
"base64-loader": "1.0.0",
"bowser": "1.9.4",
"chromedriver": "76.0.0",
"classnames": "2.2.6",
"computed-style-to-inline-style": "3.0.0",
"copy-webpack-plugin": "^4.5.1",
"core-js": "2.5.7",
"css-loader": "^1.0.0",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16": "1.3.0",
"es6-object-assign": "1.1.0",
"eslint": "^5.0.1",
"eslint-config-scratch": "^5.0.0",
"eslint-import-resolver-webpack": "^0.11.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^22.14.1",
"eslint-plugin-react": "^7.21.5",
"file-loader": "2.0.0",
"get-float-time-domain-data": "0.1.0",
"get-user-media-promise": "1.1.4",
"gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
"html-webpack-plugin": "^3.2.0",
"immutable": "3.8.2",
"intl": "1.2.5",
"jest": "^21.0.0",
"js-base64": "2.4.9",
"keymirror": "0.1.1",
"lodash.bindall": "4.4.0",
"lodash.debounce": "4.0.8",
"lodash.defaultsdeep": "4.6.0",
"lodash.isequal": "4.5.0",
"lodash.omit": "4.5.0",
"lodash.pick": "4.4.0",
"lodash.throttle": "4.0.1",
"minilog": "3.1.0",
"mkdirp": "^0.5.1",
"omggif": "1.0.9",
"papaparse": "4.6.2",
"postcss-import": "^12.0.0",
"postcss-loader": "^3.0.0",
"postcss-simple-vars": "^5.0.1",
"prop-types": "^15.5.10",
"query-string": "^5.1.1",
"raf": "^3.4.0",
"raw-loader": "^0.5.1",
"react": "16.2.0",
"react-contextmenu": "2.9.4",
"react-dom": "16.2.0",
"react-draggable": "3.0.5",
"react-ga": "2.5.3",
"react-intl": "2.9.0",
"react-modal": "3.9.1",
"react-popover": "0.5.10",
"react-redux": "5.0.7",
"react-responsive": "5.0.0",
"react-style-proptype": "3.2.2",
"react-tabs": "2.3.0",
"react-test-renderer": "16.2.0",
"react-tooltip": "3.8.0",
"react-virtualized": "9.20.1",
"redux": "3.7.2",
"redux-mock-store": "^1.2.3",
"redux-throttle": "0.1.1",
"rimraf": "^2.6.1",
"scratch-audio": "0.1.0-prerelease.20190114210212",
"scratch-blocks": "0.1.0-prerelease.1568071968",
"scratch-l10n": "3.5.20190827223456",
"scratch-paint": "0.2.0-prerelease.20190822205009",
"scratch-render": "0.1.0-prerelease.20190904212449",
"scratch-storage": "1.3.2",
"scratch-svg-renderer": "0.2.0-prerelease.20201019174008",
"scratch-vm": "0.2.0-prerelease.20190822194548",
"selenium-webdriver": "3.6.0",
"startaudiocontext": "1.2.1",
"style-loader": "^0.23.0",
"svg-to-image": "1.1.3",
"text-encoding": "0.7.0",
"to-style": "1.3.3",
"uglifyjs-webpack-plugin": "^1.2.5",
"wav-encoder": "1.3.0",
"web-audio-test-api": "^0.5.2",
"webpack": "^4.44.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.3",
"xhr": "2.5.0"
},
"jest": {
"setupFiles": [
"raf/polyfill",
"<rootDir>/test/helpers/enzyme-setup.js"
],
"testPathIgnorePatterns": [
"src/test.js"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
}
}
}
These are the error messages:
Error_1
Error_2
Error_3
Tried solutions:
- Use 'webpack-node-externals' in scratch-vm/webpack.config.js
- Remove node_modules and yarn.lock from both scratch-vm and scratch-gui then run yarn install again
- cd into scratch-vm/node_modules/@tensorflow/tfjs-node and run npm install
- Remove this line from index.js
const tf = require('@tensorflow/tfjs-node')
1, 2 and 3 didn't change anything.
When I do 4, compilation is successful when I do yarn start in scratch-gui folder. However, I cannot use functions and methods like tf.node.decodePng().
Upvotes: 1
Views: 35
Answers (0)
Related Questions
- How can the default node version be set using NVM?
- Node / Express: EADDRINUSE, Address already in use - how can I stop the process using the port?
- How do I resolve "Cannot find module" error using Node.js?
- I am getting errors when deploying to Vercel. Can anyone help me with the my issues below?
- TensorFlow not found using pip
- npm install is failing at [email protected] install
- TypeError: (0 , _schemaUtils.default) is not a function
- error Option "--entry-file" is missing. Run CLI with --verbose flag for more details
- react-scripts babel scripts error running with yarn on local react application