React无法解析_在_

Question

我正在努力学习React，我遇到了一个令人恼火的错误。我有一个Header组件和Balance组件，都在同一个 "组件 "文件夹里。即使这些文件的内容理论上是一样的，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>
  );
}

应用程序.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文件，但在运行项目之前没有保存，从而导致错误？

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

Answer 2

实际上你的代码没有任何问题。

看来你的问题在于 babel.

尝试安装再安装 npm install babel-loader.

Answer 3

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

 npm install