Получаю ошибку при запуске приложение на React. Как это исправить?

Question

[MFT]

Здравствуйте! Только начинаю разбираться с react. Ранее содавала приложение, но после переустановки системы не могу запустить его.
Использую команды
npm install
npm start
Получаю на странице ошибки:

App
c:/react_/react-intro/src/App.js:238
235 |
236 |
237 | Y Axis:
> 238 |
| ^ 239 | Open
240 | High
241 | Low
View compiled
▶ 16 stack frames were collapsed.
Module../src/index.js
c:/react_/react-intro/src/index.js:7
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
> 7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
__webpack_require__
c:/react_/react-intro/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
c:/react_/react-intro/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
localhost:3000/static/js/main.chunk.js:711:18
__webpack_require__
c:/react_/react-intro/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
checkDeferredModules
c:/react_/react-intro/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
c:/react_/react-intro/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
localhost:3000/static/js/main.chunk.js:1:75

Comments

[Mesuti]

Полностью удалите папку node_modules и снова напишите npm install

[MFT]

Mesuti, не помогло, ошибки остались те же.

[Denioo]

Попробуйте сначала удалить папку node_modules а затем пропишите.

npm cache clean --force

npm install

npm run start

Еще вопрос вы проект создавали через create-react-app? а после переустановки установили глобально?

[MFT]

Denioo, да, создавала через create-react-app
После установки windows просто в папке проекта выполняла npm install
Больше ничего не делала, при старте (npm start) открывается страница проекта с приведенными в вопросе ошибками. В консоли ошибок нет.
Сейчас попробую, спасибо.

[MFT]

Denioo, не сработало. Ошибки те же.

[Karen2000107]

Можешь показать код?

[MFT]

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Tabs, Tab, Panel } from '@bumaga/tabs' 
import axios from 'axios';
import ApexCharts from 'apexcharts'
import ReactApexChart from 'react-apexcharts'


 var labelFormatter = function (value) {
    var val = Math.abs(value)
    if (val >= 1000000) {
      val = (val / 1000000).toFixed(1) + ' M';
    }
    return val;
  }


  var data = [{
      x: 1994,
      y: 2543763
    },
    {
      x: 1995,
      y: 4486659
    },
    {
      x: 1996,
      y: 7758386
    },
    {
      x: 1997,
      y: 12099221
    },
    {
      x: 1998,
      y: 18850762
    },
    {
      x: 1999,
      y: 28153765
    },
    {
      x: 2000,
      y: 41479495
    },
    {
      x: 2001,
      y: 50229224
    },
    {
      x: 2002,
      y: 66506501
    },
    {
      x: 2003,
      y: 78143598
    },
    {
      x: 2004,
      y: 91332777
    },
    {
      x: 2005,
      y: 103010128
    },
    {
      x: 2006,
      y: 116291681
    },
    {
      x: 2007,
      y: 137322698
    },
    {
      x: 2008,
      y: 157506752
    },
    {
      x: 2009,
      y: 176640381
    },
    {
      x: 2010,
      y: 202320297
    },
    {
      x: 2011,
      y: 223195735
    },
    {
      x: 2012,
      y: 249473624
    },
    {
      x: 2013,
      y: 272842810
    },
    {
      x: 2014,
      y: 295638556
    },
    {
      x: 2015,
      y: 318599615
    },
    {
      x: 2070,
      y: 342497123
    }
  ]
  


       class ApexChart extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
			  
			y_axe:"open",          
            series: [{
              name: "Bitcoin",
              data: data
            }, {
              name: "Etherium",
              data: data.reverse()
            }],
            options: {
              chart: {
                height: 350,
                type: 'line',
                zoom: {
                  enabled: false
                }
              },
              dataLabels: {
                enabled: true
              },
              stroke: {
                curve: 'straight'
              },
              title: {
                text: 'Logarithmic Scale',
                align: 'left'
              },
              xaxis: {
                type: 'datetime',
				  title: {
                  text: 'Time'
                }
              },
              yaxis: {
                type: '',
				  title: {
                  text: 'Time'
                }
              }/*[
                {
                  min: 1000000,
                  max: 500000000,
                  tickAmount: 4,
                  logarithmic: true,
                  seriesName: 'Bitcoin',
                  labels: {
                    formatter: labelFormatter
                  },
				                  title: {
                  text: 'Open'
                }
                },
                {
                  min: 1000000,
                  max: 500000000,
                  opposite: true,
                  tickAmount: 4,
                  seriesName: 'Etherium',
                  labels: {
                    formatter: labelFormatter
                  },
				    title: {
                  text: 'Open'
                }
                }
              ]*/
            },
          
          
          };
        }

      

        render() {
          return (
            <div>
			
			
              <div id="chart">
			  
                <ReactApexChart options={this.state.options} series={this.state.series} type="line" height={350} />
              </div>
              <div id="html-dist"></div>
            </div>
          );
        }
      }


function App() {
	    axios.get('https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=100&api_key=045d4d548b18401b4c3228075a6fda30de3cda3c7efbb79ce3a5552cc0c1668b')
      .then(res => {
        const cryptos = res.data;
        //console.log(cryptos);
		data=res.data.Data.map(e => { return { x: e.time, y: e.open }});
		console.log("data", data);
        //this.setState({cryptos: cryptos});
      })

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.

        </p>
		<Tabs>
    <div>
      <Tab><button>Tab 1</button></Tab>
      <Tab><button>Tab 2</button></Tab>
      <Tab><button>Tab 3</button></Tab>
    </div>

    <Panel>
	<label style={{position:'absolute'}}>
				  Y Axis:
				  <select value={this.state.y_axis}  onChange={this.handleYaxisChange}>
					<option value="Open">Open</option>
					<option value="High">High</option>
					<option value="Low">Low</option>
					<option value="Close">Close</option>
					<option value="All">All</option>
				  </select>
			</label>
	<p><ApexChart/></p></Panel>
    <Panel><p>Panel 2</p></Panel>
    <Panel><p>panel 3</p></Panel>
  </Tabs>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Hello, Curly brackets!
        </a>
      </header>
	    
    </div>
  );
}

export default App;

[Denioo]

MFT, Так попробуйте установить глобально create-react-app возможно из-за него выдает ошибку
npm install -g create-react-app
Потом заново введите npm install

[MFT]

попробовала, ошибки те же.