TypeError: Невозможно прочитать свойство 'nodeName' со значением NULL

Question

Я пытаюсь запустить небольшую диаграмму для тестирования Highchart в рамках проекта, созданного в visual studio, и я сталкиваюсь с

TypeError: Невозможно прочитать свойство 'nodeName' со значением null a.Chart.getArgs L: / Google Drive / Открытая работа в университете / Год три Модули / TM4 / АНАЛИТИКА / ReactApp / ReactApp / ClientApp / node_modules / Highcharts / highcharts.js: 266 сообщение об ошибке.

Проект находится в React и имеет следующие зависимости

"bootstrap": "^3.3.7",
"highcharts": "^7.1.1",
"highcharts-react-official": "^2.1.3",
"react": "16.4.0",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.0.0",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"rimraf": "^2.6.2"

До сих пор я пытался создать новый реактивный проект и скопировать в него этот компонент после установки зависимостей, в которых я опустил загрузчик и маршрутизатор реакции. Это отобразило график, как и ожидалось, так что теперь я знаю, что компонент работает как задумано.

Затем я попытался переустановить Highchart и отреагировать Highcharts в исходном проекте, но безуспешно.

Я просмотрел ряд других сообщений о переполнении стека и обнаружил похожие ошибки, однако не смог найти решения в этих вопросах.

import React from 'react';
import { Component } from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { renderToString } from 'react-dom/server';



export default class Hichart extends Component {

    render(){
        return (<div>
            <HighchartsReact highcharts={Highcharts} options={{
                title: {
                    text: 'My chart'
                },
                series: [{
                    data: [1, 2, 3]
                }]
            }} /></div > );
    }
}

Я ожидал, что будет отображен график, вместо этого я получил длинное сообщение об ошибке, в котором выделены части файла highchart.js.

× TypeError: Невозможно прочитать свойство 'nodeName' со значением null a.Chart.getArgs L: / Google Drive / Открытая работа в университете / Год три Модули / TM4 / АНАЛИТИКА / ReactApp / ReactApp / ClientApp / node_modules / Highcharts / highcharts.js: 266

Answer 1

Попробуйте этот рефакторинг.

"import {render} from 'response-dom';"используется при рендеринге всего приложения React в элементе html.

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { renderToString } from 'react-dom/server';


class HichartComponent extends React.Component {
  
  render(){
    const options = {
      title: {
        text: 'My chart'
      },
      series: [{
        data: [1, 2, 3]
      }]
    }
    
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
        />
      </div>
    );
  }
}

export default HichartComponent;