0
228
ViewsImporting App into react js results on module error
Im making a simple typescript project, but can't manage to solve the following error:
Compiled with problems: ERROR in ./src/index.tsx 7:0-28 Module not found: Error: Can't resolve './App' in '/Projects/test/src'
Any suggestions??
Here's the files..
Home:
import React from "react"
export const Home = () => {
return (
<>
<div>
<p>Essa é a pagina home</p>
</div>
</>
);
};
export default Home;
App.tsx:
import React from 'react';
import { Home } from './pages/Home';
export function App() {
return (
<Home />
);
};
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { App } from './App';
const ApplicationWrapper = () => {
return (
<App />
);
};
ReactDOM.render(
<React.StrictMode>
<ApplicationWrapper />
</React.StrictMode>,
document.getElementById('main'),
);
FILE STRUCTURE:
·
Juan Pablo Isaza
3 answers
Answer question0
When the code is exported and with a default keyword, that means you only can import by using import Alias from './module'. If you want to import through Object Destructuring, it needs to export a Component or module without using the default keyword.
Last line of Home component.
export { Home };
When it needs to import.
import { Home } from './path-to-component';
·
Juan Pablo Isaza
Report
0
you can export once at Home component like this:
import React from "react"
const Home = () => {
return (
<>
<div>
<p>Essa é a pagina home</p>
</div>
</>
);
};
export default Home;
·
Juan Pablo Isaza
Report
0
Please check, App.tsx file should be in index.tsx folder. ie both files should be in /Projects/test/src folder.
·
Juan Pablo Isaza
Report
Answer question