Importing a non-image file in ReactJS is not working - reactjs

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.

Related

Dynamically import images in ReactJS with variables

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.

rollup package splitting / code splitting

I am working on a components library (such as material-ui). I am using rollup for compiling.
For the moment I can generate a single package, and to import a component such as a button, I can do it like that :
import { Button } from "package-name";
Can I modify the rollup configuration to generate a separate package or chunk for each component.
In other word, can I split the big-size package in separate small-size packages (one for each component)
and use them in a way similar to this:
import { Button } from "package-name/Button";
I start looking to the Code Splitting...
But I am wandring if there is a known best practice to have this result?
Is there a specific way to write the rollup.config file ?

Where to place a static file to be able to reference it?

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});

Referencing functions in a git repository

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?

Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\React\react' error with React import correct

I am getting the below error on a page that is stopping it being rendered and after checking other similar errors I have double checked the import is correct and the node_modules react index file is installed.
What else could be causing this? I have had linting issues yesterday out of nowhere that I thought had fixed themselves.
The file this refers to should be node_modules/React/react.indexjs but on my system is node_modules/react.index.js. I haven't changed this myself so i'm not sure where it has come from. I have also removed any code that was added to this file which could of been causing it.
Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\React\react'
This happens when you import react like this
import React from "React"
notice the capital R
instead, you should do :
import React from "react"
( with a small r )
This happens due to case sensitivity. Check if the file name is exactly the same in the same case.
Eg:
Cannot find file: 'CheckBox.js'
Check if the filename is exactly CheckBox.js not Checkbox.js
try creating the index.js in the src folder, i'm sure you created it outside the src folder.

Resources