当我将css文件添加到与组件文件相同的文件夹时，我遇到了这个问题。

我的重要陈述是:

import MyComponent from '../MyComponent'

当只有一个文件MyComponent.jsx时，这很好。(我在一个例子中看到了这种格式，并尝试了一下，然后忘记了我已经做到了)

当我添加MyComponent时。将SCSS导入到同一文件夹，则导入失败。也许JavaScript反而加载了.scss文件，所以没有出现错误。

我的结论是:即使只有一个文件，也要指定文件扩展名，以防稍后添加另一个文件。

这是一个在某种程度上必须调试的错误。正如已经说过很多次，不恰当的导入/导出会导致这个错误，但令人惊讶的是，我从我的react-router-dom认证设置中的一个小错误中得到了这个错误，下面是我的情况:

错误的设置:

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

正确设置:

const PrivateRoute = ({ component: Component, token, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

唯一的区别是我在PrivateRoute组件中解构了令牌。顺便说一下，令牌是从localstorage获取的，像这样const token = localstorage . getitem ("authUser");所以如果它不在那里，我知道用户没有验证。这也会导致错误。

在我的例子中，错误发生在试图使用ContextApi时。我错误地使用了:

const MyContext = () => createContext()

但它应该被定义为:

const MyContext = createContext()

我把它贴在这里，以便未来的访客谁被困在这样一个愚蠢的错误将得到帮助，以避免几个小时的头痛，因为这不是由不正确的导入/导出引起的。

就我而言，VS Code让我失望了。

这是我的组件的层次结构:

<HomeScreen> =>  <ProductItemComponent> =>  <BadgeProductComponent>

我错误地导入了ProductItemComponent。事实上，这个组件以前在共享文件夹中，但后来它被移动到主文件夹中。但是当我将文件移动到另一个文件夹时，导入没有更新，保持不变:

../shared/components

同时，组件工作正常，VS Code没有突出显示错误。但是当我添加了一个新的BadgeProductComponent到ProductItemComponent，我有一个渲染错误，并认为问题是在新的BadgeProductComponent，因为当这个组件被删除，一切工作!

更重要的是，如果我通过热键到ProductItemComponent它有。/shared/components地址，然后VS Code重定向到Home文件夹的地址../ Home /components。

通常，检查所有组件级别上所有导入的正确性。

我已经遇到过这个问题了。我的解决方案是:

在文件配置路由:

const routes = [
    { path: '/', title: '', component: Home },
    { path: '*', title: '', component: NotFound }
]

to:

const routes = [
    { path: '/', title: '', component: <Home /> },
    { path: '*', title: '', component: <NotFound /> }
]

我也得到了这个错误。

我用的是:

import BrowserRouter from 'react-router-dom';

费克斯是这样做的:

import {BrowserRouter} from 'react-router-dom';