Import funktioniert nicht in Unterordner

Question

Wenn ich

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 das Testmodul jedoch gefunden, in App-Komponente:

import React from 'react'; 
import Test from './components/Test'; 

export class App extends React.Component { 
    render() { 
    return (
     <div className='container'> 
     <Test /> 
    </div> 
    ) 
    } 
} 

Import-Test funktioniert es nicht sagt: ERROR in ./ src/components/App.js Modul nicht gefunden: Fehler: './components/Test' kann nicht aufgelöst werden

es funktioniert, wenn ich require obwohl

var Test = require('./Test'); 

Answer 1

Sie importieren aus einem falschen Verzeichnis. Wenn Sie sich Ihren ersten Code anschauen, haben Sie sowohl App als auch Test im selben Verzeichnis components. Der Fehler tritt auf, weil Ihr Import nach einem Ordner components in dem Ordner components sucht. Wenn Sie also möchten, dass es in App importiert wird, sollten Sie den relativen Pfad von Ihrem aktuellen Ordner angeben. d.h) ./

Versuchen Sie dies in Ihrer App-Klasse oder App.js Datei

import Test from './Test';