CODEWITHSUNDEEP
javascriptreactjstypescript
PPNFilms
PPNFilms

Reputation: 65

Importing 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:

File Structure

Upvotes: 2

Views: 85

Answers (3)

Muhamad Zolfaghari
Muhamad Zolfaghari

Reputation: 793

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

Upvotes: 1

Phani
Phani

Reputation: 129

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

Upvotes: 0

yusufstawan
yusufstawan

Reputation: 28

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;

Upvotes: 0

Related Questions