我是React的新手，但我遇到了一些问题。我在项目中添加了一个新组件，作为"react-customized-progressbar"。我有以下黄色的文件。这些是我创建的文件。

问题指向
Error in ./src/example1.js 6：0 - 73没有找到模块：错误：无法解析"C：\Alex Maricoiu\Projects\React projects\project1\src"中的. "/CircularProgressBarContainer "无法编译。CircularProgressBarContainer. tsx具有以下代码：

import React, {FunctionComponent} from "react";
import ICustomIndicatorProperties from './IProgressBarProperties';
import ProgressBar from 'react-customizable-progressbar'

const CustomProgressIndicator : FunctionComponent<ICustomIndicatorProperties> = ({value, title}) => {
    return (
      <div className="text-and-value" style={{width: "29em"}}>
      <div className="title-text">{title}</div>
      <div className="custom-progress-bar">
      <ProgressBar
            radius={100}
            progress={value}
            strokeWidth={18}
            strokeColor="#5d9cec"
            strokeLinecap="square"
            trackStrokeWidth={18}
        >
           <div className="indicator">
                <div>{value}%</div>
            </div>
        </ProgressBar>
  </div>
  </div>
    )
};

export default CustomProgressIndicator;

Example1.js:

import {useState} from 'react';
import {CustomProgressIndicator} from './CircularProgressBarContainer';

function Button(props) {
    return (
      <button onClick={props.onClickFunc}>
        Increment by 1
      </button>
    );
  }
  
  function Display(props){
    // eslint-disable-next-line no-undef
    const [counter, setCounter] = useState(0);
    const incrementValue = () => setCounter(counter+1);
    return (
    <div> 
        <Button onClickFunc={incrementValue}/>
        <b> Current value is:  {counter}</b>
        <CustomProgressIndicator 
            value={counter}
            title ='Indicator Exercise 1'
         />
    </div>
    )
  }
  
  
  function App(props){
    return (
    <div>
      <Display />
    </div>
    )
  }
  
  export default App;

接口文件具有（IProgressBarProperties. tsx）：

interface ICustomIndicatorProperties {
    title: string;
    value: number;
}

export default ICustomIndicatorProperties;

和Main. js：

import './Main.css';
import Example1 from './example1';
import { Component } from 'react';

class App extends Component {
  render(){
    return (
        <>
            <div className='header'>Alex React Examples</div><div className='content'>
            <h3>Example #1</h3>
            <div id='example1Node'>
              <Example1 />
            </div>
          </div>
         </>
      );
    }
  }
  
  export default App;

Index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import MainApp from './Main';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MainApp />
  </React.StrictMode>
);

package.json:

{
  "name": "project1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-customizable-progressbar": "^1.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我使用的是Node.js 19.3.0。我试图从浏览器控制台找到问题所在，但我被卡住了。我试图删除node_modules并在终端中再次运行此命令：npm安装。如果我删除了对文件的引用，其中是进度条的应用程序正在工作，但与失败的错误提到。有什么办法可以找到解决该错误？
先谢谢你
我使用的是Node.js 19.3.0。我试图从浏览器控制台找到问题所在，但我被卡住了。我试图删除node_modules并在终端中再次运行此命令：npm安装。如果我删除了对文件的引用，其中是进度条的应用程序正在工作，但与失败的错误提到。有什么办法可以找到解决该错误？