Issue with import statement file paths - javascript

When I attempt to import my SearchBar component into App.js, it says that the module cannot be resolved.
I've been trying to figure this out for days so I assume I must be making a some kind of syntax error.
I've tried just using an export statement on the class declaration line for the SearchBar component class and then importing it into App.js using: Import { SearchBar } from './Components/SearchBar/Searchbar;'
Here is the code for SearchBar.js:
import React from 'react';
import './SearchBar.css';
class SearchBar extends React.Component {
render() {
return(<JSX Elmements>)
}
}
export default SearchBar;
Here is the import statement in App.js:
import SearchBar from './Components/SearchBar/SearchBar';
And this is the file structure:
SRC/
- App.js
- App.css
- Components/
- SearchBar/
- SearchBar.js
- SearchBar.css
This is the error message I get:
./src/App.js
Module not found: Can't resolve './Components/Searchbar/SearchBar' in '/home/runner/src'


The first SearchBar (directory) in your import has a lowercase b.
In your directory structure they are all CamelCase.
So it should be
import SearchBar from './Components/SearchBar/SearchBar';
here was the typo -------------------------------------------^

Related

exporting a javascript class component using typescript

When trying to run npm run rollup from my code i am getting the following issue
Could not resolve './Login' from dist/esm/components/jiraUI/Login/index.d.ts
my structure is the following
Login > index.ts
export { default } from "./Login";
Login.js
import React, { Component, Fragment } from "react";
class Login extends Component {
.....
}

How to import self-made component into index.js in React

I'm learning react and i'm stuck on how to import a self-made component.
So I made this into src/components/Part/Part.jsx
And in my index.js file I import this like that import { Part } from './components/Part/Part.jsx';
const Part = (props) =>{
return (
<p>{props.part + " " + props.exec}</p>
)
}
export default Part

In your import statement remove curly brackets. It will work then. :)
Update this:
import { Part } from './components/Part/Part.jsx';
To:
import Part from './components/Part/Part.jsx';
For better understanding read named exports and default exports here:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

If your folder structure like -
src
|_components
|__Part
|__Part.jsx
|__index.js
And want to export the Part.jsx from index.js then you can write this line into the index.js file.
// At src/components/Part/index.js file
export {default} from './Part.jsx';
And now you can import the Part component from anywhere like-
import Part from 'path/to/components/Part';
Update: You can follow the structure this allows you to import the component like import Part from './components/Part' instead of import Part from './components/Part/Part.jsx'.

'React' must be in scope when using JSX react/react-in-jsx-scope when trying to do it from a index file?

I am trying to aggregate all imports at one location and then export it for other components to use
I have a src/car folder with car.js and index.js inside it
code inside index.js is as below
import React from 'react';
import ReactDOM from 'react-dom';
export {React, ReactDOM}
code inside car.js is as below
import * as Wfmimport from './index';
export class Car extends Wfmimport.React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
my src/index.js has following code
import React from 'react';
import ReactDOM from 'react-dom';
import * as name from './car/car'
import './index.css';
ReactDOM.render(<name.Car />, document.getElementById('root'));
when I run the code, I get error "'React' must be in scope when using JSX react/react-in-jsx-scope when trying to do it from a index file"
can anyone help me what is that wrong which I am doing?
My goal is to reduce import statements and hence I am trying the above way

get React' must be in scope when using JSX error when import component

I am writing this code and import React and Component in app/js file and also try to import app.js to index.js. but I get this error ' 'React' must be in scope when using JSX in index.js
app.js :
import React ,{Component} from 'react';
class App extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h1>Hello Ashkan</h1>
</div>
);
}
}
export default App;
index.js
import ReactDOM from 'react-dom';
import App from './app'
ReactDOM.render(<App/>,document.getElementById('root'));
I got this error
./src/index.js
Line 6:'React' must be in scope when using JSX react/react-in-jsx-scope

You are using JSX in here (<App />):
ReactDOM.render(<App/>,document.getElementById('root'));
Whenever you use JSX React should be in scope.

React unable to import component -- module not found

I just started with React.js and I am unable to import component.
I have this structure as followed by this tutorial (YouTube link) :
-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js
This is my index.js:
import React from 'react';
import { render } from 'react-dom';
import { MyCompontent } from "./components/MyCompontent";
class App extends React.Component {
render() {
return (
<div>
<h1>Foo</h1>
<MyCompontent/>
</div>
);
}
}
render(<App />, window.document.getElementById('app'));
This is MyComponent.js:
import React from "react";
export class MyCompontent extends React.Component {
render(){
return(
<div>MyCompontent</div>
);
}
}
I am using this webpack file (GitHub link).
However, when I run this, my module fails to load.
I get this error in the browser console:
Error: Cannot find module "./components/MyCompontent"
[WDS] Hot Module Replacement enabled. bundle.js:631:11
[WDS] Errors while compiling. bundle.js:631:11
./src/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app
resolve file
/home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist
/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist
resolve directory
/home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file)
/home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file)
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]
# ./src/app/index.js 11:20-56 bundle.js:669:5
Can't figure out what went wrong here.

For anyone coming here without a typo, and is using Webpack, be sure to check for a clause like this:
resolve: {
extensions: [".jsx", ".js"]
},
in your webpack.config.js.
This tells your transpiler to resolve statements like:
import Setup from './components/Setup'
to
import Setup from './components/Setup.jsx'
This way you don't need the extension.

You have a typo in your import. You're requesting MyCompontent. Change to:
import MyComponent from "./components/MyComponent";
And all typos as well.

You can try to import MyCompontent from "./components/MyCompontent.js"
like this
import MyCompontent from "./components/MyCompontent.js";

You have written that the filename is MyComponent.js.
Thus, your import should look like
import { MyCompontent } from './components/MyComponent.js'

The problem for me was that import line was not generated correctly. I have this scenario:
--src
----elements
-----myCustomText.tsx
this is myCustomText.tsx file:
export interface Props {
text: string;
}
const MyCustomText = ({ text }: Props) => (
<Text>{text}</Text>
);
export default MyCustomText
And the generated import was this:
import MyCustomText from '../../elements/MyCustomText';
and I changed it to this:
import MyCustomText from '../../elements/myCustomText'
I don't know why the generated import line was generated automatically wrong.

I found myself here without a typo and without a webpack issue.
The solution for me was to restart the typescript server via VS Code.

I just had this issue, no type or webpack config issues.
What fixed it was changing the import from relative to the app root directory to relative to the file:
import MyComponent from "src/components/MyComponent";
to
import MyComponent from "../components/MyComponent";
If you're getting this from Visual Studio Code auto-importing via the shortest route, you can change it so it imports relatively. By going here:
menu File → Preferences → Settings → User Settings,
"typescript.preferences.importModuleSpecifier": "relative"

export 'Component' (imported as 'Component') was not found in 'react'
if you find your self stuck with this error simply go to mini-create-react-context, and go to cjs, and go to index.js and add "React" example: you will find this (Component) solution (React.Component) only if you extends to React.Component in you pages
Note: I have only used this on VS Code

Categories