Highcharts: "Highcharts not defined" como ES6 importa (browserify, babel)

Estou usando o webpack ng es6, e a única maneira de fazê-lo funcionar é com

var Highcharts = require('highcharts/highstock');
window.Highcharts = Highcharts;
require('highcharts/modules/exporting')(Highcharts);

Se alguém souber como fazer isso funcionar usando a sintaxe de importação, responda

@ jon-a-nygaard

Obrigado por relatar! Analisaremos isso o mais rápido possível. Enquanto isso, você pode dar uma olhada no webpack com um babel-loader como alternativa.

Olá, @ jon-a-nygaard. Webpack é definitivamente o caminho a seguir. Vamos usar isso no próximo projeto. Este projeto, entretanto, é um pouco maduro demais com um grande número de pacotes personalizados do browserify. Deixe-me saber se você descobrir isso.

OK. @ragefuljoe - o window.Highcharts = Highcharts era o que era necessário. Funciona com esta sintaxe de importação!

import Highcharts from 'highcharts/highstock';
window.Highcharts = Highcharts; //this line did the magic
import 'highcharts-ng';

Devemos fechar isso ou vocês querem vincular a janela.Highcharts dentro do seu código? Acho que isso deve ser adicionado aos documentos principais ou em algum lugar.

@piggyslasher Que bom que a solução alternativa de @ragefuljoe ajudou você. Vou deixar este problema em aberto, para que possamos trabalhar para melhorar o carregamento de Highcharts com importações ES6.

Acho que isso deve ser adicionado aos documentos principais ou em algum lugar.

Na verdade, adicionarei a solução alternativa como uma nota ao artigo Instalar a partir do npm .

isso é legal @piggyslasher. teve sorte ao importar exporting.js com sintaxe de importação?

_atualizar_
aqui estão todas as minhas linhas relacionadas a highcharts, com mapas necessários também:

import Highcharts from 'highcharts/highstock';
window.Highcharts = Highcharts;
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/exporting')(Highcharts);
require('./pages/home-page/world'); //I'm downloading this from example links. any better way?
import 'highcharts-ng';

Existe uma maneira melhor de lidar com os dados específicos do mapa? Por exemplo, estou baixando e incluindo explicitamente o world.js aqui (outra opção é obter o json do back-end, o que eu devo fazer)

Estou tendo exatamente o mesmo problema. Tudo que eu quero fazer no meu projeto é importar 'Highcharts' e pronto. Todas as outras bibliotecas JS principais "simplesmente funcionam" fora da caixa e não consigo entender por que o Highcharts não funciona.

@ jon-a-nygaard @TorsteinHonsi - pode valer a pena olhar como Angular, lodash, underscore, ui-router e a miríade de outras bibliotecas JS expõem sua funcionalidade para browserify / webpack etc e a duplicam em highcharts.

@romiem Obrigado pela dica. No momento, estou trabalhando em uma correção para isso, planejando colocá-lo em nossa próxima versão de manutenção.

Oi,
Estou tendo um problema semelhante com highcharts 4.2.5. Estou seguindo o artigo Use Highcharts para criar gráficos no React .
Se eu usar a sintaxe de importação, que é import Highcharts from 'highcharts' , obtenho o erro Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor .

Quando uso a sintaxe sugerida por @ragefuljoe , funciona! no entanto, isso me faz pensar, que tal usar 'highcharts/highstock vez de 'highcharts' ? bem, funciona com a sintaxe de importação. Qual é a diferença ou pensava-se que funcionava dessa forma e eu estava usando a importação de forma errada?

Aqui está o código completo (funcional):

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Highcharts from 'highcharts/highstock';
class Chart extends Component {
    constructor(props) {
        super(props);
    }
    // When the DOM is ready, create the chart.
    componentDidMount() {
        // Extend Highcharts with modules
        if (this.props.modules) {
            this.props.modules.forEach(function (module) {
                module(Highcharts);
            });
        }
        this.chart = new Highcharts[this.props.type || "Chart"](
            this.props.container, 
            this.props.options
        );
    }
    //Destroy chart before unmount.
    componentWillUnmount() {
        this.chart.destroy();
    }
    //Create the div which the chart will be rendered to.
    render() {
        return React.createElement('div', { id: this.props.container });
    }
}
export default Chart;

Obrigado @ jon-a-nygaard por me informar sobre este tópico.

👍 para suporte aprimorado de Webpack. Tenho feito todos os meus experimentos React / Highsoft no CodePen, mas estarei mudando para um ambiente de nó adequado em breve. Webpack / Import / ES6 é muito bom.

Reagir com MDL e Highstock (teste)

Há alguma notícia sobre a importação "simples" {Highcharts} do módulo "highcharts" em aplicativos typescript / angular 2 com highcharts 5? Só encontrei a documentação sobre "exigir Highcharts" que é sempre um pouco hacky ...

@ jon-a-nygaard

@Skuriles Que tipo de bundler (por exemplo, Webpack, Browserify) você está usando? Aqui está um exemplo de como você pode usar Highcharts com ES6 e Babelify

@ jon-a-nygaard estou usando SystemJs

@Skuriles Aqui está um exemplo de como usei Highcharts com SystemJS . Espero que ajude, se não, por favor me avise.

Vou tentar o mais rápido possível e postar a solução aqui!
Muito obrigado pelo seu exemplo !!

Mudei meu código devido à sua proposta, mas ainda recebo erros de digitação do intellisens e também o compilador gulp-typescript gera erros. Funciona no aplicativo compilado, mas não é satisfatório.

importar Highcharts de 'highcharts / highstock.js "ainda é um módulo desconhecido.

Eu também tentei com o plugin typescript-babel, mas ele lança um compilador para outras coisas.

Finalmente, voltei a carregar o arquivo highstock.js diretamente sem systemjs e apenas declarei Highcharts no arquivo TS para evitar erros de compilação.

Eu espero por um módulo ES6 real, mas por agora podemos viver como ele, já que provavelmente mudaremos para versões pré-compiladas, empacotadas sem systemjs para lançamento!

@ Jon-a-nygaard Não consigo renderizar meu highchart em meu aplicativo recat. Tudo o que estou recebendo é uma tela em branco. Isso é o que estou fazendo para meu gráfico:

import React, {Component, PropTypes} from 'react';
import Highcharts from 'highcharts/highcharts';
import styles from './styles/linechart.css';
import cssModules from 'react-css-modules';
import request from 'axios';
import moment from 'moment';

@cssModules(styles)
class LineChart extends Component {
    constructor(props) {
        super(props);
    }

    static propTypes = {
        modules: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.array
        ]),
        container: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.array,
        ]),
        options: PropTypes.oneOfType([
            PropTypes.object,
            PropTypes.array
        ]),
    };

    highchartsModules() {
        if (this.props.modules) {
            this.props.modules.forEach(function(module) {
                module(Highcharts);
            });
        }
    }

    componentDidMount() {

        const inComing = [];
        const outGoing = [];
        const xAxisData = [];

        request.get('/dashboard/hourly', {
            params: {
                timezone: moment().utcOffset(),
                date:     '2016-07-06'
                // date:     moment(new Date()).format('YYYY-DD-MM')
            }
        }).then(response => {
                response.data.forEach(item => {
                    const flattened = {};
                    const out = {};
                    flattened.name = item.date;
                    flattened.y = item.inCount;
                    out.name = item.date;
                    out.y = item.outCount;
                    xAxisData.push(item.hour);
                    inComing.push(flattened);
                    outGoing.push(flattened);
                });
            });

            console.log('InComing data: ', inComing);
            console.log('OutGoing data: ', outGoing);
            console.log('X Axis data: ', xAxisData);

            const chartOptions = {
                tooltip: {
                    borderRadius:    20,
                    backgroundColor: 'rgba(18, 21, 23, 0.9)',
                    style:           {
                        color: 'white',
                    },
                    shadow: false,
                },
                title: {
                    text: ''
                },
                subTitle: {
                    text: ''
                },
                xAxis: {
                    categories: xAxisData,
                    labels:     {
                        enabled: false
                    },
                    crosshair: {
                        width:     1,
                        dashStyle: 'Dash',
                        color:     'black',
                        snap:      false,
                    },
                    tickInterval: 2
                },
                legend: {
                    enabled: false,
                },
                series: [{
                    name: 'Incoming Calls',
                    data: inComing
                }, {
                    name: 'Outgoing Calls',
                    data: outGoing
                }
            ]
        };

        this.highchartsModules();
        console.log('CHART OPTIONS: ', chartOptions);
        if (typeof window !== 'undefined') {
            this.chart = new Highcharts['Chart'](
                this.props.container,
                chartOptions
            );
        }
    }

    render() {
        const { container } = this.props;
        return (
            // <div styleName="chart">
                <div class="chart" id={container} />
            // </div>
        );
    }
}

export default LineChart;

e estou usando este gráfico da seguinte maneira em meu aplicativo:

<LineChart container="chart" type="chart" />

Qualquer ajuda apreciada. Desde já, obrigado.

Até agora eu consegui funcionar.

import Highcharts from "highcharts";

systemjs
mapa:
'highcharts': "npm:highcharts"
pacote:
'highcharts': { main: "highstock", defaultExtension: "js"}

único problema:
o compilador gera erros porque @ types / highharts tem o seguinte problema:
Property 'StockChart' does not exist on type 'Static'.

mas o aplicativo funciona pelo menos

No caso de alguém precisar com Rollup

Eu tenho a seguinte configuração que está funcionando.

Em um arquivo vendor.ts que tenho

import * as _highcharts from 'highcharts/highcharts';
...
export default {
   ...
   _highcharts
};

O que cria um pacote de fornecedores.
Em seguida, em meu app.rollup.js (arquivo de configuração para criar meu pacote de aplicativos).

export default {
    entry: 'src/main.ts',
    dest: 'bundles/app.js',
    format: 'iife',
    sourceMap: true,
    moduleName: 'app',
    plugins: [
        ...
    ],
    external: [
        'highcharts/highcharts'
    ],
    globals: {
        ...
        'highcharts/highcharts': 'vendor._highcharts'
    }
};

E, finalmente, em meu aplicativo, posso usar

import Highcharts from 'highcharts/highcharts';

@ Jon-a-nygaard Infelizmente, seu exemplo não funciona com o compilador de texto digitado. Recebo o erro 'highchart' has no default export .

@Skuriles agradece sua abordagem funciona, mas eu fiz uma simples e clara ..

import 'highcharts';

(além de suas outras sugestões)

Obrigado

Nenhuma das soluções acima funcionou para mim na última versão datilografada para mim, a seguinte funcionou:

import Highcharts from 'highcharts/highcharts.src.js';
import {default as HighchartsMore} from 'highcharts/highcharts-more.src.js';
HighchartsMore(Highcharts);

Para aqueles que trabalham com Highcharts no TypeScript, criei um exemplo simples de uma configuração de trabalho . O que observar neste exemplo é que o carregamento de Highcharts deve ser feito da seguinte forma:

import * as Highcharts from 'highcharts'
import * as HighchartsMore from 'highcharts/highcharts-more.src.js'
HighchartsMore(Highcharts)

A razão pela qual import Highcharts from 'highcharts' não funciona, é que tal sintaxe requer que nossos módulos exportem um padrão, o que não é verdade. Para os interessados, o Typescript tem uma boa documentação sobre várias formas de importação .

Oi Jon, no meu caso está funcionando bem no google chrome e também mostrando os gráficos. Mas esses gráficos não estão chegando no caso do mozilla e também não estão dando nenhum erro no console. Dê-me alguma solução para resolver.

Qualquer um que resolver isso por favor ajude

Olá @ Sandipj38 ,

Não parece um problema com as importações ES6. Você poderia criar um tópico em nosso fórum ou nos enviar um e-mail ( detalhes )? Obrigado!

Olá,
Estou usando o webpack, com react e highcharts. Estou recebendo um erro com

Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor

Já resolvi esse problema e não consegui encontrar uma solução. Eu tentei todas as permutações e combinações possíveis de import / require 'highcharts', 'highcharts / highstock,' highcharts.js 'e agora estou completamente sem opções.

var Chart = React.createClass({ componentDidMount: function () { // Extend Highcharts with modules if (this.props.modules) { this.props.modules.forEach(function (module) { module(Highcharts); }); } // Set container which the chart should render to. this.chart = new Highcharts[this.props.type || "Chart"]( this.props.container, this.props.options ); }, //Destroy chart before unmount. componentWillUnmount: function () { this.chart.destroy(); }, //Create the div which the chart will be rendered to. render: function () { return React.createElement('div', { id: this.props.container }); } }), element2;

Você poderia me ajudar aqui?

@ satishrao84 pode valer a pena olhar em https://github.com/kirjs/react-highcharts , funcionou bem para mim

Consegui fazer Highcharts e Highstock trabalhando com importações ES6 usando webpack com sucesso com um tema também contido no pacote, arquivo js.

Escrevi sobre o problema no repositório highcharts-ng aqui https://github.com/pablojim/highcharts-ng/issues/624

A solução foi importar highcharts / highstock, depois theme, highcharts-ng no meu aplicativo principal e adicionar Highcharts em um pacote global na configuração do webpack e funcionou.

* Nota: Tive que fazer o downgrade para highcharts-ng v1.0.1 porque 1.1.0 inclui Highcharts 5 e força o produto Highcharts a ser usado. Eu precisava de Highstock e reverter para v1.0.1 não inclui dependência de Highcharts, então eu poderia usar Highstock v6 e meu tema em meu pacote sem carregar Highcharts duplo ou triplo no lado do cliente.

EDITAR: consegui fazer a exportação funcionar também com a sintaxe de importação ES6

import Highcharts from "highcharts/highstock";
import "../../js/highcharts.theme";
import "highcharts-ng";
import Exporter from "highcharts/modules/exporting";

// connect exporter to Highcharts bundle global
Exporter(Highcharts);

E em webpack.config configure os Highcharts globais para o tema.

  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
      "window.jQuery": "jquery",
      Highcharts: "highcharts/highstock"
    })
  ]

@ satishrao84 estava recebendo o mesmo erro quando tentei usar um gráfico de alto estoque, mas estava apenas carregando gráficos altos. verifique em seu webpack bundle.js o Highstock JS e veja se ele está sendo empacotado nele ou se Highcharts está. veja meu comentário acima sobre como carregar highstock com importação. Eu tenho highstock e um tema trabalhando com highcharts-ng, mas não consigo fazer o exportador funcionar ainda, embora ele esteja no bundle.js e esteja recebendo Highcharts injetado, o ícone de menu ainda não aparece no meu gráfico.

Este problema agora é considerado encerrado, devido a atualizações feitas no commit 7da7361. Este commit melhora nossa documentação sobre como carregar Highcharts no ES6, que considerei ser o problema recorrente aqui. Também aplicarei essas atualizações a www.highcharts.com/docs .

Com o tempo, esse problema se desenvolveu em uma mistura de muitos problemas diferentes, mas semelhantes, que se tornou um pouco difícil de rastrear. Se alguém estiver enfrentando um problema semelhante a este tópico, crie um novo problema, pois será mais fácil fornecer a ajuda adequada.

Para aqueles que estão aguardando nossos módulos ES6, siga o problema # 7186.

Se houver alguma dúvida sobre este tópico, por favor, deixe-nos um comentário.

Atenciosamente

demorei um pouco para encontrá-lo, mas acabei usando o expor

highcharts de instalação simples
e então
importar 'expor? highcharts! highcharts / highcharts';

O problema com a solução de @ omer123456 é que você obteria um erro

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'expose-loader' instead of 'expose',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Uma maneira que funciona é
em seu js principal

import Highcharts from 'highcharts';
import 'highcharts-ng'

E, em seguida, adicione uma nova regra no webpack.config.js

{
   test: require.resolve('highcharts'),
   use:[{
            loader: 'expose-loader',
            options: 'Highcharts'
   }]
}

Isso também resolve o problema de Cannot read property 'Chart' of null

É mencionado neste tópico, mas é fácil de perder; a última versão do highcharts tem módulos es6 reais que funcionam conforme o esperado:

https://github.com/highcharts/highcharts/issues/7186

Embora pareça que a menção a eles ainda está faltando nos documentos online-