Javascript 在ReactJS中导入/导出子组件错误

我只想将一个子组件导出并导入到我的rot目录（App.js）中，并在浏览器中呈现出来，但我在终端“未找到模块：错误：无法解析‘文件’或‘目录’”中收到此错误消息。我不明白我打错了什么，也不明白为什么我不能将我的孩子导入App.js

我试图解决这个问题，但没有结果。我一直在我的“App.js”中测试这一点，以获得更明确的名称，但不起作用：

import { ContactsList } from './ContactsList';

我还尝试在“ContactsList.js”中键入此内容，但没有结果：

export default class ContactsList extends React.Component {}

我是一个初学者，所以请原谅我的知识，但我真的很想学习这一点和反应的力量。请帮助我更好的理解

--------App.js---------

---

在ContactsList.js文件中，使用

包装

也在您的网页包配置文件中。你能试着使用加载器：“巴贝尔加载器”而不是加载器：“巴贝尔”（别忘了安装巴贝尔加载器包）

同时删除查询部分，并尝试使用以下设置创建单独的.babelrc文件：

{
    "presets" : [
        "react",
        "es2015"
    ]
}

希望这能解决你的问题

根据es6模块机制，默认模块应为 导入时没有{}

出口式

但我猜您正在尝试在.jsx扩展上使用babel 您正在使用ContactsList.js

只需在中将.jsx更改为.js即可

--webpack.config.js

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test:/\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

希望它能起作用

---

您需要对webpack.config.js文件进行一些更改。第一次替换

    test:/\.jsx?$/,

与

其次，导入如下模块

import ContactsList  from 'path-of-the-file';

---

但是您需要提供实际的路径。为了获得正确的路径，根据我们使用的文本编辑器，有许多插件可用。我正在使用

ok。我是否应该将“预设”放在“模块：”内部，而不是“加载程序：”外部？不，只需删除查询和预设部分。在网页包配置文件的同一级别创建名为“.babelrc”的文件。然后将：{“presets”：[“react”，“es2015”]}放入该.babelrc文件中

import ContactsList  from './ContactsList';

export default class ContactsList extends React.Component {}

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test:/\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

    test:/\.jsx?$/,

    test: /\.(js|jsx)$/,

import ContactsList  from 'path-of-the-file';