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

【问题标题】：Module not found when import .jsx file导入 .jsx 文件时找不到模块
【发布时间】：2018-02-06 10:00:12
【问题描述】：

我找不到解决方案。我正在使用 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;

文件夹结构

【问题讨论】：

可以分享一下目录结构吗
@hannadrehman .. 我刚刚上传了
我想你得到了答案；）

标签： reactjs webpack-3 reactstrap

【解决方案1】：

要在同一文件夹中导入文件，您必须使用

./nameOfTheFile

代替

nameOfTheFile

所以你的重要陈述是

import NavbarTemplate from './NavbarTemplate.jsx';

【讨论】：

对我来说路径本身是正确的，但我需要在末尾指定“.jsx”扩展名：from './MyComponent -> ./MyComponent.jsx

【解决方案2】：

根据webpack can't find module if file named jsx，如果您不想在导入时添加.jsx，您可以将resolve: { extensions: ['.js', '.jsx'] } 添加到您的webpack.config。

// ...
    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'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
// ...

【讨论】：

【解决方案3】：

如果您的 App.jsx 和 NavbarTemplate.jsx 在同一个根目录中，请尝试

import NavbarTemplate from './NavbarTemplate';

它应该可以工作

【讨论】：

【解决方案4】：

基本上是这样。当您尝试在 cmd 中执行某些操作时也代表父文件夹。因此，当您从同一文件夹导入模块时，执行 ./NavbarTemplate 将解决您的问题

【讨论】：

【解决方案5】：

如果你使用的是 JSX 文件扩展名，你需要像下面的代码一样导入，

import NavbarTemplate from './NavbarTemplate.jsx';

如果你使用的是 JS 文件扩展名，你需要像下面的代码一样导入，

import NavbarTemplate from './NavbarTemplate';

【讨论】：