React无法resolve_ in _

Question

我正在尝试学习React，我遇到了一个令人恼火的错误。我有一个Header组件和Balance组件，它们都在相同的'components‘文件夹中。即使两个文件的内容在理论上是相同的，Balance.js也会给我一个错误，但Header.js编译没有任何问题……如果我删除所有对Balance.js的引用，它就能完美地运行。

Failed to compile.

./src/components/Balance.js
Module not found: Can't resolve 'C:\xampp\htdocs\xampp\Projects\expenseTracker\expense-tracker\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\xampp\htdocs\xampp\Projects\expenseTracker\expense-tracker'

Header.js

import React from 'react';

export const Header = (props) => {
  return (
    <h2>
      {props.title}
    </h2>
  );
}

Balance.js

import React from 'react';

export const Balance = (props) => {
  return (
    <h1>
      ${props.bal}
    </h1>
  );
}

App.js

import React from 'react';
import './App.css';
import { Header } from './components/Header';
import { Balance } from './components/Balance';

function App() {
  return (
    <div>
      <Header title={'Expense Tracker'}/>
      <div className="container">
        <Balance bal={'0.00'}/>
      </div>
    </div>
  )
}

export default App;

Answer 1

这应该工作得很好，并且在语法上是正确的。

有没有可能在运行项目之前，您编辑了平衡文件，并且从未保存过它，这会导致错误？

如果不是，您是否正在使用Balance文件中可能未作为依赖项安装的任何库？我知道你在理论上说了同样的话，但只是询问是否有任何可能的库或组件已经从一个库或组件中删除，而不是另一个库或组件。

Answer 2

实际上，您的代码没有任何错误。

看起来你和babel有点问题。

尝试安装/重新安装npm install babel-loader。

Answer 3

删除node_modules和package-lock.json文件并运行

 npm install