I'm trying to use AssemblyScript to build a WebAssembly inference engine for a TensorFlow.js model that I have.
I started with essentially the quickstart AssemblyScript app (which works great) and then simply added #tensorflow/tfjs to my dependencies:
$ npm install --save #tensorflow/tfjs
and added an import to assembly/index.ts:
import * as tf from "#tensorflow/tfjs";
Full code here on Github
This results in an error when I build it:
$ npm run asbuild
> test-assemblyscript#1.0.0 asbuild
> npm run asbuild:untouched && npm run asbuild:optimized
> test-assemblyscript#1.0.0 asbuild:untouched
> asc assembly/index.ts --target debug
ERROR TS6054: File '~lib/#tensorflow/tfjs.ts' not found.
import * as tf from "#tensorflow/tfjs";
~~~~~~~~~~~~~~~~~~
in assembly/index.ts(1,21)
FAILURE 1 parse error(s)
Am I misunderstanding the import syntax? I am puzzled why it would be looking in ~lib for this versus node_modules.
If you are sure the module you are trying to import is assemblyscript files, you can import with something like this ./node_modules/#tenderflow/tfjs.
I am not sure if #tensorflow has assembly files built, but I did that on assemblyscript-json for assemblyscript#0.19.8 (0.25.2 doesn't have that problem).
For example
assemblyscript-json has exported assemblyscript files from its package, so I can do this (ref)
import { JSON } from './node_modules/assemblyscript-json/assembly';
export function formatJsonString(jsonString: string): string {
const jsonObj: JSON.Obj = <JSON.Obj>JSON.parse(jsonString);
return jsonObj.stringify();
}
Related
I am using create-hash package (https://github.com/crypto-browserify/createHash) in my code of ionic react application.
I have installed the package using npm install create-hash
I am using the function as following:
const hash = createHash('sha256')
.update("entropyBuffer")
.digest();
However, it throws the following error in the browser:
When I change the algorithm to the following: 'md5', 'rmd160' and 'ripemd160', it works fine. I don't understand what is the problem?
I have looked at the similar queries online but nothing was helpful.
https://github.com/crypto-browserify/cipher-base/issues/11
How to generate a Mnemonic in Angular (with npm package bip39 for Solana)
Referring to the original answer here - Link
patch-package helped me:
npm i patch-package
in the package.json add this line:
"scripts": {
"postinstall": "patch-package",
}
opend the problem file and correct it. In my case:
node_modules/cipher-base/index.js
var Buffer = require('safe-buffer').Buffer
var Transform = require('readable-stream').Transform // replacing instead of "stream"
var StringDecoder = require('string_decoder').StringDecoder
var inherits = require('inherits')
function CipherBase (hashMode) {
...
run the command from a root dir of your project:
npx patch-package cipher-base
it'll create a new folder patches in the root dir and add there this fix. That's all. Commit changes. It'll automaticaly replace code in the node_modules after reinstalling packages
I use vite to build one react environment. When I import GLTFLoader from the module, and vite commandline mentioned that:
Vite Error, /node_modules/.vite/deps/three_examples_jsm_loaders_GLTFLoader.js?v=9d4ee121 optimized info should be defined
Here's my code:
import * as Three from "three"
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
[...]
const gltfLoader = new GLTFLoader()
gltfLoader.setPath('public/')
gltfLoader.load('000.hdr', gltf => {
gltf.scene.scale.set(0.2,0.2,0.2)
scenes.add(gltf.scene)
})
Here's the error message:
For others in the future, YMMV: deleting node_modules and pnpm-lock.yaml solved the issue.
Already solve this question.
When the commandline mentioned vite error, just need to close dev-server, then reload. Vite would clean the cache tmp files in .vite.
this is usually caused by lockfiles or node_modules/.cache/vite (or maybe in your case node_modules/.vite)
I am getting this errorr while taking android build react-native, screenshot provided below
TASK: react-native-doc-viewer compileDebugJavaWithJavac FAILED
package com.facebook.react.views.webview does not exist
https://i.stack.imgur.com/H17A8.png
The deprecated class com.facebook.react.views.webview is not actually being used. It is just a redundant import. Could be fixed by removing the import in node_modules/react-native-doc-viewer/android/src/main/java/com/reactlibrary/RNReactNativeDocViewerModule.java
Remove the ununsed import:
import com.facebook.react.views.webview.ReactWebViewManager;
I'm migrating react-intl to version 3.0, and need to polyfill locale-data for IE. Specifically I want to load a polyfill of locale data for en-US. I can only find #formatjs/intl-relativetimeformat/dist/locale-data/en locale file.
if (!Intl.RelativeTimeFormat) {
// eslint-disable-next-line global-require
require('#formatjs/intl-relativetimeformat/polyfill');
// eslint-disable-next-line global-require
require('#formatjs/intl-relativetimeformat/dist/locale-data/en-US');
}
It leads to this error :
Module not found: Error: Can't resolve '#formatjs/intl-relativetimeformat/dist/locale-data/en-US' in '/xxx/xxx/xxx/xxx/app'
Try the below format in "#formatjs/intl-relativetimeformat": "^7.2.0",
import '#formatjs/intl-pluralrules/polyfill'
import '#formatjs/intl-pluralrules/locale-data/en'
import '#formatjs/intl-pluralrules/locale-data/de'
import '#formatjs/intl-relativetimeformat/polyfill'
import '#formatjs/intl-relativetimeformat/locale-data/en'
import '#formatjs/intl-relativetimeformat/locale-data/de'
and addLocaleData is no removed already as per https://formatjs.io/docs/react-intl/upgrade-guide-3x/#migrate-to-using-native-intl-apis
try to install :
npm i #formatjs/intl-relativetimeformat
I had this same exact issue, when I checked the #formatjs directory inside node_modules/ there was no dist directory #formatjs/intl-relativetimeformat/**dist/**locale-data/en so I removed it from the import and everything worked fine.
I used creat-react-app to initialize some code which I want to share between native and web. In my package.json I have two separate commands for starting for each platform using react-scripts-ts and react-native-scripts-ts:
package.json
...,
"scripts": {
"tsc": "tsc",
"clean": "rimraf artifacts",
"build": "npm run clean && npm run tsc --",
"start-web": "npm run build && react-scripts-ts start",
"start-native": "npm run build && react-native-scripts start",
},
...
(a detailed description on how to do this can be found here https://medium.com/#yannickdot/write-once-run-anywhere-with-create-react-native-app-and-react-native-web-ad40db63eed0)
This great and I can use react-native components on both platforms. The problem I have is when I try to use external packages such as react-routing.
I include both react-router-native and react-router-dom in my package.json. I am trying to achieve what is described in this article (https://medium.com/#yannickdot/hi-jared-2650fbb2eda1) but using typescript not JS, giving me:
routing.native.tsx
export {
NativeRouter as Router, // Rename
Switch,
Route,
Link
} from 'react-router-native'
routing.web.tsx
export {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom'
However, contrary as described in the article, when using typescript, it is not automatically recognized which file should be included. I get the simple error:
src/App.tsx:10:26 - error TS2307: Cannot find module './routing'.
10 import Router from "./routing";
Which makes sense because when I look at the output of the compiler, no module routing exists:
artifacts
| App.js
| routing
| routing.native.js
| routing.web.js
How can I tell the typescript compiler to include all *.native.tsx files when running the start-native command and all *.web.tsx files when running the start-web commmand?
Ideally, this should be possible at compile-time, passing additional parameters into the typescript compiler, which override the tsconfig.json. Example:
tsc --exclude="./**/*.native.tsx"
I know this can be done with a hacked solution, e.g. by writing a script to copy the entire source, deleting all unwanted files, keeping the correct ones, and compiling that copied source folder, but I want to know if there is a more neat way to do this.
Thanks in advance!
A possible solution without using external tools :
1. Create a function to check the platform running
see this question on Stackoverflow
export default function getPlatform(): string {
if (typeof document != 'undefined') {
// I'm on the web!
return 'web';
}
else if (typeof navigator != 'undefined' && navigator.product == 'ReactNative') {
// I'm in react-native
return 'native';
}
else {
// I'm in node js
return 'node';
}
}
2. Create routing/index.ts
import getPlatfrom from '../getPlatform';
const platform = getPlatfrom();
const routing = platform === 'web' ? require('./routing.web') : require('./routing.native');
export const {Router, Switch, Route, Link} = routing;
3. Use the routing
import { Route } from './routing/index';
You may add an interface IRouting and some type casting in routing/index, so that you don't lose type safety and autocompletion ...