This is maybe stupid question, but I am new and this problem took me a couple of hours :/. I am trying to import component like this:
import * as test from "../../../../common/containers/sidebar/Sidebar";
and file where I write this line is located in :
src/pages/example/containers/example.
above path of 'Sidebar' is correct but react gives me 'Sidebar' is not defined.
I found some kind of similar questions but it didn't help me so please if anyone has anny suggestions write below, huge thanks! and one more thing is this correct way to import files like this - I mean '../../../../' <- this looks like little weird for me.
You can add rootDir option to your jest config. And then just import components as from the global path.
For example if root is your src folder. Just import pages/example/containers/example
Related
I have an import statement getting all images from a folder for each object in an array. It looks like this:
const gallery = import(../../assets/images/${project.folder}/*);
I keep getting errors saying cannot find module in './project.folder/*'. The file path is correct, and it's looping through each folder it needs to. But it seems the * isn't giving me all files in the folder as I thought it would.
Can someone explain this to me? How might I get all files from each folder this way? This seemed by far the driest method possible.
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});
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.
I know there are several questions about this, but I can't seem to find any that solves my issue, then I ask, why isn't this working?
I've tried:
import Row from '../Row';
import Row from './src/components/Row';
import Row from 'Row';
import Row from '../../components/Row';
So, here is my project file structure:
src
components
MainList
Row
screens
etc.
So I'm trying to import Row into MainList.js, without any success, the error which changes with each path I enter on the import goes:
Unable to resolve "../Row" from "src\components\MainList.js"
Thank you very much.
PS: I should clarify I'm exporting Row with
export default Row;
MainList.js is staying at the same directory with Row.js. Hence the correct syntax should be:
import Row from './Row';
Since I noticed that you're trial and error, just a side note:
.. means going back one level from the directory of your current file.
./ is referring to the same directory
Your file is in the same directory you can import like this :
import Row from './Row'
In my webpack config file, i have multiple entry points:-
entry: {
bundle: "./src/index1.js",
rUI: "./other/src/js/ui/index2.js"
},
In index1.js file, all imports are getting resolved, but in index2.js which looks like following
import someModule from "./components/SomeModule/SomeModule";
export default SomeModule;
it's not able to resolve someModule (though the relative path is correct and file exits) and gives error - Cannot find module "./components/SomeModule/SomeModule" on browser console...
However, if I bring the entire contents of someModule.js, there is no issues.. which means that there is some problem with path. Not able to figure out why...
Any help is highly appreciated.
Not really a way to solve your problem, but if you are having trouble with import paths, I'd recommend having a look to something like babel-root-import pluging.
It has saved me so many headaches.
I solved it. Though the same code worked using require instead of import. But to make the same code work, I had to add additional preset - es2015 and react. Something like
"babel?presets[]=es2015,presets[]=react,presets[]=stage-0,plugins[]=transform-object-rest-spread"