作为一个快速的补充。我也遇到了同样的问题，当Webpack编译我的测试时，应用程序运行良好。当我将我的组件导入到测试文件中时，我在其中一个导入中使用了错误的大小写，这导致了同样的错误。

import myComponent from '../../src/components/myComponent'

应该是

import myComponent from '../../src/components/MyComponent'

注意，导入名称myComponent依赖于myComponent文件中导出的名称。

在我的例子中，我只是在我的一个子模块的import- declaration中缺少了一个分号。

通过改变这个修正:

import Splash from './Splash'

:

import Splash from './Splash';

如果你得到这个错误，这可能是因为你导入链接使用

import {Link} from 'react-router'

相反，使用它可能会更好

import { Link } from 'react-router-dom'
                      ^--------------^

我相信这是react路由器版本4的一个要求

React Native最新版本0.50及以上也有类似问题。

对我来说，这是一种区别:

import App from './app'

and

import App from './app/index.js'

(后者解决了这个问题)。我花了好几个小时才发现这个奇怪的，很难注意到的细微差别:(

我也得到了这个错误。错误是由试图像这样导出一个组件引起的…

export default Component();

而不是这样…

export default Component;

我的理解是，通过在组件的末尾添加“()”，我实际上是在调用函数，而不仅仅是引用它。

我在上面的答案中没有看到这一点，但可能错过了。我希望它能帮助一些人，节省一些时间。我花了很长时间才找到这个错误的根源!

问题可能在于使用SVG作为组件。

import { ReactComponent as HeaderLogo } from "../../assets/logoHeader.svg";
    
    const Header = () => {
        return (
            <div>
                <HeaderLogo />
            </div>
        );
    };

你可以这样显示一张图片:

import HeaderLogo from "../../assets/logoHeader.svg";

const Header = () => {
    return (
        <div>
            <img src={HeaderLogo} alt="React Logo" />
        </div>
    );
};