Module not found in React - javascript

I am new to React. I have create new react app using following command.
create-react-app app-name --scripts-version custom-react-scripts-version
Inside src folder of that app i have created 2 new folders say Grid and Title and created files Grid.js and Title.js in respected folder.
Grid.js
import React from 'React';
export default class Grid extends React.Component {
render() {
return (
<div>
<h1>Grid</h1>
</div>
);
}
}
Title.js
import React from 'React';
const Title = () => {
return (
<div>
<h1>Title</h1>
</div>
);
}
export default Title;
Now, i try to import both into App.js file it won't.
import Title from './Title/Title';
import Grid from './Grid/Grid';
It shows following error.
Failed to compile.
./src/Grid/Grid.js
Module not found: D:\ReactAppCSS\node_modules\React\index.js does not match the corresponding path on disk react.
Same for Title.js.
Any help would greatly appreciated.

import React from 'react'
react is the package name!

Related

Rendering React component issues

I'm having trouble rendering. Here is how I set up my files so far. First here is the app.js file:
import React from 'react';
import MainPage from './MainPage';
export class App extends React.Component {
render() {
return (
<div>
<MainPage />
</div>
)
}
}
Here is the second associated file called index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(<App />, document.getElementById('app'));
Lastly in the MainPage component I'm importing this:
import App from "./app";
Is there a reason why this doesn't work with the file structure set as is? I know I can just put the ReacDOM.render in the app.js file as an alternative, but due to unit testing purposes, the file structure has to be similar to this.
You're trying to import the default export of the file app.js with this :
import App from "./app";
But you're using a simple export in you app.js file :
export class App extends React.Component {
So to import this class the syntax is (like in your index.js) :
import { App } from "./App";
Btw in your case you're importing a parent component in the child, you shouldn't do that.
You have already imported App.js and rendering it via ReactDOM. You don't need to import it in MainPage as App is the parent of your MainPage. Currently your import statement in MainPage is wrong. Even if it was correct, you would get into cyclic imports. App -> MainApp -> App -> MainPage and so on.
MainPage should render your usual content. Change MainPage to something:
import React from 'react';
export default class MainPage extends React.Component {
render() {
return (
<div>
<h1>This is Main Page</h1>
</div>
)
}
}
Note default after the export.

How to import a File path in React Js?

I have to import multiple files in my App.js . My folder structure is
/src
/components
layout.js
App.js
index.css
index.js
Here i want to import layout.js file from App.js. My code is
import React from 'react';
import Layout from './components/layout';
class App extends React.Component{
render(){
return (
<div>
<p>Hi</p>
</div>
);
}
}
export default App;
In my code, how to import layout.js file ?
Ideally, your layout is a component which you can simply import into your main. One good pratcise when creating new component is to create a separate folder inside components folder and create index.js. By doing so you can import components like below:
/src
/components
/layout
index.js
App.js
index.css
index.js
import React from 'react';
import Layout from './components/layout';
class App extends React.Component{
render(){
return (
<div>
<p>Hi</p>
<Layout/>
</div>
);
}
}
export default App;
It looks like you imported Layout correctly. If it is not working, perhaps you forgot to export default Layout in layout.js?
You need to use webpack's resolve.extensions to import file paths that don't end in .js

React: Cannot Find module './WebpackMissingModule'

I'm currently giving my first steps on React and I'm having some issues when trying to export components.
My current index.js file is as following:
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
const API_KEY = '...';
//Create a new component. It should output some html
const App = function(){
return <div>
<SearchBar />
</div>;
}
ReactDOM.render(<App />, document.querySelector('.container'));
And my search_bar.js file:
import React from 'react';
const SearchBar = function(){
return <input />;
};
export default SearchBar;
My current file structure may be seen in the following image:
The problem is that I'm not being able to import the SearchBar element. I'm having the error that can be seen on the image:
Cannot Find module './WebpackMissingModule'
Any idea on what may be causing this issue?
I was baffled by this too, but refreshing the browser fixed for me.

import does not work in subfolder

When I use
import React from 'react';
import ReactDOM from 'react-dom';
require('./styles.css');
import App from './components/App';
import Test from './components/Test';
ReactDOM.render(
<App />,
document.getElementById('root')
);
webpack found the Test module however, in app component:
import React from 'react';
import Test from './components/Test';
export class App extends React.Component {
render() {
return (
<div className='container'>
<Test />
</div>
)
}
}
import Test does not work it says:
ERROR in ./src/components/App.js
Module not found: Error: Can't resolve './components/Test'
it works when I use require though
var Test = require('./Test');
You are importing from a wrong directory. From looking at your first code, you have both App and Test in the same components directory. The error comes because your import looks for a components folder inside the components folder. So if you want it to be imported into App, you should be specifying the relative path from your current folder. i.e) ./
Try this in your App class or App.js file
import Test from './Test';

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