我找不到解决方案。我正在使用Reactstrap(CSS框架),React,Express和Webpack。
我成功地在index.jsx上导入了App.jsx文件。然后,我尝试使用相同的方法在App.jsx上导入NavbarTemplate.jsx文件。但是,它显示了这样的错误:
./ client / src / components / App.jsx中的错误找不到模块:错误:无法解析“ / Users / oprent1 / v2 / oprent-react / client / src / components”中的“ NavbarTemplate.jsx”@ ./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;
文件夹结构
要在同一文件夹中导入文件,请使用
./nameOfTheFile
代替
nameOfTheFile
所以您的重要声明将是
import NavbarTemplate from './NavbarTemplate.jsx';
如果您的App.jsx和NavbarTemplate.jsx在同一根目录中,请尝试
import NavbarTemplate from './NavbarTemplate';
它应该工作
基本上如此。当您尝试也在cmd中执行某些操作时,它代表父文件夹。因此,当您从同一文件夹导入模块时,执行./NavbarTemplate将解决您的问题
如果使用的是JSX文件扩展名,则需要像下面的代码一样进行导入,
import NavbarTemplate from './NavbarTemplate.jsx';
如果使用的是JS文件扩展名,则需要像下面的代码一样进行导入,
import NavbarTemplate from './NavbarTemplate';