vmsg requires a URL link to a .wasm file that it requires in order to work. Their sample code (which does work) looks as follows:
import React, { Component } from 'react';
import vmsg from 'vmsg';
const test = new vmsg.Recorder({wasmURL: "https://unpkg.com/vmsg#0.3.0/vmsg.wasm"});
But I would like to have that file refer to a directory in my app rather than this external URL and I'm not certain:
Where I should place this file (assets/public/node_modules folder)?
What I would do to make this work (do I do an import or do I reference it directly somehow)?
I've tried placing the file in my assets folder and changing the line of code to many things along the lines of:
const test = new vmsg.Recorder({wasmURL: '../../assets/vmsg.wasm'});
But nothing seems to be working, which, after some reading, makes sense. But I'm still not sure what the right way to add a file like this should be instead.
I've seen some people run into something like this specifically when trying to import photo assets. One solution that I've found to work for that is to include .default at the end.
const test = new vsmg.Recorder({wasmURL: require('../../assets/vmsg.wasm').default});
Related
I'm creating a game with sprays but I can't put all the sprays in the same folder because at least 50/ 100 and more are comming and I want to import all the images from a folder, the problem is that the name is variable.
Example :
import * as JhonImgs from "../images/Jhon/"
import * as JhonImgs from "../images/Lucas/"
Or something like that. All the images have the same extension, .png.
The problem is require.context() doesn't allow me use variables. And I can't call one by one, or use a cdn server.
Thanks.
Let's say I have a couple translation files like so:
import English from "./lang/compiled-en.json";
import Spanish from "./lang/compiled-es.json";
and so on for all the languages we plan to support. These are imported directly into the component they are used, and our app as a whole is split into chunks with webpack that may contain many components and thus, many strings.
It would be ideal to only be importing the languages.json file I need depending on the user's locale, and not import all of them while having to check the locale and using only one.
I tried a super naive stab at it here, but it certainly does it work:
Helper function existing in another directory:
export async function loadLocaleData(locale: string, path: string ) {
switch (locale) {
case "en-US":
return await import(path + "/lang/en-compiled.json");
case "pt-BR":
return await import(path + "/lang/pt-br-compiled.json");
default:
return await import(path + "/lang/en-compiled/en.json");
}
}
I was thinking that importing this helper function into my components that need translations would look in their own directory for the translation file. But even when I have that path hardcoded to specify exactly where the translation file is, I still get errors.
The above may be implemented into a component like so:
const localeContext = useContext(LocaleContext);
const messages = loadLocaleData(
localeContext.locale,
"packages/components/Preferences/Billing"
);
And then I'd ideally pass just that message into my IntlProvider that wraps this individual component.
This definitely isn't working. Is there a way to make it work? I know what I want to do, I'm just not sure how possible it is.
You can use dynamic imports like you are trying, but you need to use absolute paths. Otherwise your bundler (Webpack) won't actually know where to find them.
Alternatively, store your language files in your public/ directory and use the public path to it. Webpack won't touch those files (besides index.html) and might be your best option here.
I have some git libraries I am using for my app and using vscode. But I am a little unclear on how to reference these libraries and if I have to be specific in the 'from' part of not.
For example, my code below is something I copied from someone else code, and is at the top of my App.js file.
import {
Board,
BoardView,
} from 'cm-board';
Does vscode go search all subdirectories to find cm-board? Or, should I be using this instead:
import {
Board,
BoardView,
} from '../node-modules/cm-board';
And if I reference cm-board, does that also give me access to all files below cm-board too or do I have to import each one of those individually?
I have an ICM profile that I wish to import into a certain file. I need this because I need to fetch the contents of the file into a Uint8Array (array buffer). However, I can't get the file to import.
I've tried
import file from './tester.icm';
import { file } from './tester.icm';
const file = require('./tester.icm');
I would expect it to work like importing an image:
import logo from './logo.png';
However, this approach does not work.
This is a new question since it deals with a binary format, not a simple text file.
The import statement that you are using is done by Webpack and not by React. Webpack can not import all file types by default, for some file types you will need to configure your own loader. You can have a look at the docs for more information.
I have a project that I've been working on, and I need to import an existing form that someone else has created. The file name of the form I need to import is Form2.vb. However, there is already a Form2.vb in my current project. How do I add the other Form2.vb file in VS without replacing the Form2.vb that's already in my project?
Don't leave your files with the default name like FormN.vb. Rename the existing file to match its function. Once you do that, you could import the other form without a naming conflict. Once you import it, give it a good name that matches its function.