Importing App into react js results on module error

Question

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:

Muhamad Zolfaghari · Accepted Answer · 2022-07-11 07:27:41Z

1

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';

answered Jul 11, 2022 at 7:27

Muhamad Zolfaghari

8239 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yusufstawan · Accepted Answer · 2022-07-11 03:39:09Z

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;

answered Jul 11, 2022 at 3:39

yusufstawan

287 bronze badges

1 Comment

PPNFilms Over a year ago

I removed the other export, applied ur suggestion but still have the same problem.

Phani · Accepted Answer · 2022-07-11 03:48:32Z

0

Please check, App.tsx file should be in index.tsx folder. ie both files should be in /Projects/test/src folder.

answered Jul 11, 2022 at 3:48

Phani

1291 silver badge3 bronze badges

3 Comments

PPNFilms Over a year ago

Both are already placed inside src folder :/ I update the thread with another print of my files structure

Phani Over a year ago

Can you check once replacing <App /> in index.tsx file with <div>test</div>. If it is working then issue in imports, otherwise there is issue in the app configuration.

PPNFilms Over a year ago

It worked! But I couldn't manage to solve the import issue..

Collectives™ on Stack Overflow

Importing App into react js results on module error

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related