导入.jsx文件时找不到模块

我找不到解决方案。我正在使用Reactstrap（CSS框架），React，Express和Webpack。导入.jsx文件时找不到模块

我成功导入了index.jsx上的App.jsx文件。然后，我尝试通过使用相同的方式导入App.jsx上的NavbarTemplate.jsx文件。但是，它显示如下错误：

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

我的配置有什么问题？我已经提供了与此相关的以下几个文件：

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;

文件夹结构

来源

2017-08-29 Rido

你能分享目录结构 –

@hannadrehman ..我刚刚上传它 – Rido

我想你已经得到了答案;） –

要在同一个文件夹导入文件，你必须使用

./nameOfTheFile

而不是

nameOfTheFile

所以，你的重要讲话是

import NavbarTemplate from './NavbarTemplate.jsx';

来源

2017-08-29 04:53:38 Miguel

如果您App.jsx和NavbarTemplate.jsx都在相同的根目录，然后只是尝试

import NavbarTemplate from './NavbarTemplate';

它应该工作

来源

2017-08-29 04:58:42 bpsourav

基本上是

。代表父级文件夹，当你尝试在cmd中做某些事情。因此，做./NavbarTemplate将解决你的问题，因为你是从同一个文件夹导入模块

来源

2017-08-29 05:08:51

导入.jsx文件时找不到模块

回答

相关问题