Modul nicht gefunden beim Import .JSX-Datei

Question

Ich kann die Lösung nicht finden. Ich verwende Reactstrap (CSS-Framework), React, Express und Webpack.

Ich war erfolgreich, App.jsx Datei auf index.jsx zu importieren. Dann habe ich versucht, NavbarTemplate.jsx Datei auf App.jsx zu importieren, indem Sie die gleiche Methode verwenden. Aber es zeigte Fehler wie folgt:

ERROR in ./client/src/components/App.jsx Module not found: Error: Can't resolve 'NavbarTemplate.jsx' in '/Users/oprent1/v2/oprent-react/client/src/components' @ ./client/src/components/App.jsx 11:22-51 @ ./client/src/index.jsx

Was ist falsch mit meiner Konfiguration? Ich habe mehrere Dateien zur Verfügung gestellt, die unten in folgendem Zusammenhang:

webpack.config.js

const path = require('path'); 

module.exports = { 
    entry: path.join(__dirname, '/client/src/index.jsx'), 
    output: { 
    path: path.join(__dirname, '/client/dist/js'), 
    filename: 'app.js', 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: path.join(__dirname, '/client/src'), 
     // loader: 'babel', 
     loader: 'babel-loader', 
     query: { 
      presets: ["react", "es2015"], 
      plugins: ["transform-class-properties"] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style-loader!css-loader' 
     } 
    ], 
    }, 
    watch: true 
}; 

index.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Bootstrap from 'bootstrap/dist/css/bootstrap.css'; 
import App from './components/App.jsx'; //SUCCESS when imported 

ReactDOM.render(
    <App />, 
    document.getElementById('react-app') 
); 

App.jsx

import React from 'react'; 
import NavbarTemplate from 'NavbarTemplate.jsx'; //ERROR when imported 

const App = (props) => { 
    return (
    <div> 
     <NavbarTemplate /> 
    </div> 
); 
}; 

export default App; 

NavbarTemplate.jsx

import React, { PropTypes } from 'react'; 
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap'; 

class NavbarTemplate extends React.Component { 

    constructor(props) { 
    super(props); 

    this.toggleNavbar = this.toggleNavbar.bind(this); 
    this.state = { 
     collapsed: true 
    }; 
    } 

    toggleNavbar() { 
    this.setState({ 
     collapsed: !this.state.collapsed 
    }); 
    } 

    render() { 
    return (
     <div> 
     <Navbar color="faded" light> 
      <NavbarToggler onClick={this.toggleNavbar} /> 
      <Collapse className="navbar-toggleable-md" isOpen={!this.state.collapsed}> 
      <NavbarBrand href="/">reactstrap</NavbarBrand> 
      <Nav navbar> 
       <NavItem> 
       <NavLink href="/components/">Components</NavLink> 
       </NavItem> 
       <NavItem> 
       <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink> 
       </NavItem> 
      </Nav> 
      </Collapse> 
     </Navbar> 
     </div> 
    ); 
    } 
} 

export default NavbarTemplate; 

Ordnerstruktur

Answer 1

Um Dateien im selben Ordner importieren Sie

./nameOfTheFile 

verwenden, statt

nameOfTheFile 

So Ihre wichtige Aussage wäre

import NavbarTemplate from './NavbarTemplate.jsx'; 

Answer 2

wenn Ihr App.jsx und NavbarTemplate.jsx im gleichen Stammverzeichnis sind dann nur versuchen,

import NavbarTemplate from './NavbarTemplate'; 

sollte es funktionieren

Answer 3

so grundsätzlich. stellt den übergeordneten Ordner dar, wenn Sie versuchen, etwas in cmd auch zu tun.so machen ./NavbarTemplate wird Ihr Problem lösen, wie Sie Modul aus dem gleichen Ordner importieren