Question

以下是我的导入代码： -

var ReactDOM = require('react-dom');
import Header from '../src/components/Header';
import MortgageCalculator from '../src/components/MortgageCalculator'
import Employees from '../src/components/Emp'
import Employee from '../src/components/Employee'
class App extends React.Component {
    render(){
        return (

           <div>
               <Header title="React WbPack"/>
               <MortgageCalculator principal="200000" years="30" rate="5"/>

               <Employee/>
           </div>

        );
    }
}

从＆＃39; ../ src / components / Employee＆＃39;导入员工是我的.jsx文件   相同的路线，但错误即将来临＆＃34;无法导入＆＃34;。可能是什么   问题？

我的webpack.config.js是： -

  module.exports = {
    entry: './src/app-client.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
}

Answer 1

尝试使用如果组件是默认导出的，则import Employee from '../src/components/Employee.jsx';如果默认情况下未导出，则使用import { Employee } from '../src/components/Employee.jsx'

Answer 2

它开始作为我的配置文件更改为： -

module.exports = {
    entry: './src/app-client.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    }, resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,  // Match both .js and .jsx
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
};

无法导入.jsx文件

2 个答案: