Javascript 从React中的另一个JSX文件导入JSX文件

我是一个新的反应，目前正在玩一个PoC，看看它是否满足我们的需要。似乎每当我尝试将React组件从另一个包导入到我的应用程序组件时，都会出现此错误

../myawesomeapp-ui/components/Checkout/Footer/Footer.jsx 21:8
Module parse failed: Unexpected token (21:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|     return (
>         <div id="checkout__footer">
|             <div className="checkout__footer_back-to-shop">
|                 <p>...</p>

这是导致“@myawesomeapp/ui”中出现错误的页脚组件示例：

从“React”导入React；
从“文件加载器”导入PaymentLogos@amorelie/util/assets/images/payment.png'；
导出默认签出器=（）=>{
返回(
...
)
};

这是我试图渲染的组件：

import React from 'react';

import { CheckoutFooter } from '@myawesomeapp/ui/components';


function App() {
    return (
        <div id="myawesomeapp__checkout">
            <CheckoutFooter />
        </div>
    );
}

export default App;

从“React”导入React；
从'@myawesomeapp/ui/components'导入{CheckoutFooter}；
函数App（）{
返回(
);
}
导出默认应用程序；

---

尝试将jsx组件导入其他jsx组件时是否存在某种问题，或者我只是做错了什么？

很抱歉没有使用我的眼睛。您可能希望在网页包中安装并使用这些预设

---

如果您使用默认导出，请在导入过程中删除

{}

是否为babel安装了react插件，

babel/preset react

，其中包括用于理解jsx的语法插件？是的，我有“@babel/preset react”：“7.0.0”在我的devdependances中，我发现奇怪的是，它可以很好地渲染应用程序组件，它只是在导入的组件上抛出错误。是的，我尝试了各种方法。总是出现同样的错误：/I我想我已经把它缩小到与App.jsx文件中的import语句有关。如果我把它去掉，它就会变好。如果我不尝试在应用程序组件中呈现它们，它仍然会抛出错误，因此这肯定是这个import语句的一个问题。你确定Babel正确地传输了你的代码吗？导入/导出是es2015的一项功能：您可以在此处发布您的网页包文件吗？@FrankWaalkens OP的网页包文件是问题中的第二个代码块是的，我在问题中包含了我的网页包配置。经过几次测试后，我意识到如果我将组件移动到该包中，并使用相对路径引用它，它就会工作。通过别名引用它似乎有问题。这似乎没有多大意义，因为它所做的只是将一个符号链接添加到node_modules目录，所以它应该与通过相对路径导入它相同您使用NPM link创建了一个符号链接？如果没有，你也可以试试。

import React from 'react';
import PaymentLogos from 'file-loader!@amorelie/util/assets/images/payment.png';

export default CheckoutFooter = () => {
    return (
        <div id="checkout__footer">
            <div className="checkout__footer_back-to-shop">
                ...
            </div>
        </div>
    )
};

import React from 'react';

import { CheckoutFooter } from '@myawesomeapp/ui/components';


function App() {
    return (
        <div id="myawesomeapp__checkout">
            <CheckoutFooter />
        </div>
    );
}

export default App;