admin 管理员组

文章数量: 1086019

I'm trying to use Highcharts in a Rails 5.2 / webpacker application. (I'm new to webpacker and am using it because we've adopted a third-party theme for the application that is built on webpack. That theme is now working fully.) When I include the Highcharts code in the app, I get no charts and instead an error at the console: Uncaught ReferenceError: Highcharts is not defined at HTMLDocument.<anonymous>. Unfortunately, I'm new to webpacker and JS isn't really my thing.

I have followed the instructions on the Highcharts site for installing Highcharts using npm (although my system is using yarn) and everything seems to be correct, apart from this error being generated!

package.json:

{
...
  "devDependencies": {
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "highcharts": "^7.1.2",
    "webpack": "4.32.2",
    "webpack-cli": "3.3.2",
...
  }
}

config/webpack/environment.js:

const { environment } = require('@rails/webpacker');
...
const Highcharts = require("highcharts");

const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    '$': 'jquery',
    'window.$': 'jquery',
    jQuery: "jquery",
    jquery: "jquery",
    "window.$": "jquery",
    "window.jQuery": "jquery",
    Popper: ["popper.js", "default"]
  })
);

environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: '$'
  }, {
    loader: 'expose-loader',
    options: 'jQuery'
  }]
});

module.exports = environment;

app/javascripts/packs/app.js:

const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

import Highcharts from 'highcharts/modules/exporting';

import Rails from 'rails-ujs'
Rails.start()

import "../modules/bootstrap";
import "../modules/feather";
import "../modules/sidebar";
import "../modules/user-agent";
import "../modules/mask";
import "../modules/select2";
import "../modules/validation";
import '../scss/app.scss';

app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="preconnect" href="//fonts.gstatic/" crossorigin>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= render 'layouts/shim' %>
    <%= stylesheet_pack_tag 'app' %>
  </head>

  <body>
    <%= render 'layouts/app_pages' %>
    <%= javascript_pack_tag 'app' %>
  </body>
</html>

page template (essentially direct from the Highcharts "Your first chart" page):

...
<div class="col-12 text-center" id="chart"></div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
      var myChart = Highcharts.chart('chart', {
          chart: {
              type: 'bar'
          },
          title: {
              text: 'Fruit Consumption'
          },
          xAxis: {
              categories: ['Apples', 'Bananas', 'Oranges']
          },
          yAxis: {
              title: {
                  text: 'Fruit eaten'
              }
          },
          series: [{
              name: 'Jane',
              data: [1, 0, 4]
          }, {
              name: 'John',
              data: [5, 7, 3]
          }]
      });
  });
</script>
...

I've tried changing the order in which I import the module (right at the top, right at the end, or in the middle) but to no avail. Webpack is piling the code happily, and I've restarted webpack-dev-server multiple times during the process, to make sure environment.js changes are being run. I've also confirmed that the Highcharts code is in the app.js file emitted by webpack and that it's accessible from the web page (i.e. I can load the app.js file in the Developer Tools in my browser, and searching the file shows code from Highcharts 7.1.2).

I've also tried having the require/import line in app.js formatted as require('highcharts/modules/exporting')(Highcharts); (as indicated in the Highcharts docs) and as import 'highcharts/modules/exporting'; (to match the other import lines in the file), but they both produce the same result - no charts and a Highcharts is not defined error.

Can anyone suggest how to get charts generated successfully by Highcharts on the web page, with no JS errors?

Thanks!

====Edit====

I've tried creating a pletely new Rails app using rails new test --webpack, doing yarn add highcharts and then adding just the lines to get Highcharts installed:

  • setting route and controller to a static page;
  • adding the following to environment.js:
const Highcharts = require("highcharts");

const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    '$': 'jquery',
    'window.$': 'jquery',
    jQuery: "jquery",
    jquery: "jquery",
    "window.$": "jquery",
    "window.jQuery": "jquery"
  })
);
  • adding import Highcharts from 'highcharts/modules/exporting'; to app/javascript/packs/application.js
  • adding template HTML from the Highcharts docs to the application_layout.html page.

And, after doing this, I get exactly the same error. What am I missing?

I'm trying to use Highcharts in a Rails 5.2 / webpacker application. (I'm new to webpacker and am using it because we've adopted a third-party theme for the application that is built on webpack. That theme is now working fully.) When I include the Highcharts code in the app, I get no charts and instead an error at the console: Uncaught ReferenceError: Highcharts is not defined at HTMLDocument.<anonymous>. Unfortunately, I'm new to webpacker and JS isn't really my thing.

I have followed the instructions on the Highcharts site for installing Highcharts using npm (although my system is using yarn) and everything seems to be correct, apart from this error being generated!

package.json:

{
...
  "devDependencies": {
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "highcharts": "^7.1.2",
    "webpack": "4.32.2",
    "webpack-cli": "3.3.2",
...
  }
}

config/webpack/environment.js:

const { environment } = require('@rails/webpacker');
...
const Highcharts = require("highcharts");

const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    '$': 'jquery',
    'window.$': 'jquery',
    jQuery: "jquery",
    jquery: "jquery",
    "window.$": "jquery",
    "window.jQuery": "jquery",
    Popper: ["popper.js", "default"]
  })
);

environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: '$'
  }, {
    loader: 'expose-loader',
    options: 'jQuery'
  }]
});

module.exports = environment;

app/javascripts/packs/app.js:

const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

import Highcharts from 'highcharts/modules/exporting';

import Rails from 'rails-ujs'
Rails.start()

import "../modules/bootstrap";
import "../modules/feather";
import "../modules/sidebar";
import "../modules/user-agent";
import "../modules/mask";
import "../modules/select2";
import "../modules/validation";
import '../scss/app.scss';

app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="preconnect" href="//fonts.gstatic./" crossorigin>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= render 'layouts/shim' %>
    <%= stylesheet_pack_tag 'app' %>
  </head>

  <body>
    <%= render 'layouts/app_pages' %>
    <%= javascript_pack_tag 'app' %>
  </body>
</html>

page template (essentially direct from the Highcharts "Your first chart" page):

...
<div class="col-12 text-center" id="chart"></div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
      var myChart = Highcharts.chart('chart', {
          chart: {
              type: 'bar'
          },
          title: {
              text: 'Fruit Consumption'
          },
          xAxis: {
              categories: ['Apples', 'Bananas', 'Oranges']
          },
          yAxis: {
              title: {
                  text: 'Fruit eaten'
              }
          },
          series: [{
              name: 'Jane',
              data: [1, 0, 4]
          }, {
              name: 'John',
              data: [5, 7, 3]
          }]
      });
  });
</script>
...

I've tried changing the order in which I import the module (right at the top, right at the end, or in the middle) but to no avail. Webpack is piling the code happily, and I've restarted webpack-dev-server multiple times during the process, to make sure environment.js changes are being run. I've also confirmed that the Highcharts code is in the app.js file emitted by webpack and that it's accessible from the web page (i.e. I can load the app.js file in the Developer Tools in my browser, and searching the file shows code from Highcharts 7.1.2).

I've also tried having the require/import line in app.js formatted as require('highcharts/modules/exporting')(Highcharts); (as indicated in the Highcharts docs) and as import 'highcharts/modules/exporting'; (to match the other import lines in the file), but they both produce the same result - no charts and a Highcharts is not defined error.

Can anyone suggest how to get charts generated successfully by Highcharts on the web page, with no JS errors?

Thanks!

====Edit====

I've tried creating a pletely new Rails app using rails new test --webpack, doing yarn add highcharts and then adding just the lines to get Highcharts installed:

  • setting route and controller to a static page;
  • adding the following to environment.js:
const Highcharts = require("highcharts");

const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    '$': 'jquery',
    'window.$': 'jquery',
    jQuery: "jquery",
    jquery: "jquery",
    "window.$": "jquery",
    "window.jQuery": "jquery"
  })
);
  • adding import Highcharts from 'highcharts/modules/exporting'; to app/javascript/packs/application.js
  • adding template HTML from the Highcharts docs to the application_layout.html page.

And, after doing this, I get exactly the same error. What am I missing?

  • javascript
  • ruby-on-rails
  • webpack
  • highcharts
  • webpacker
Share Improve this question edited Jul 26, 2019 at 16:21 JohnP asked Jul 26, 2019 at 12:42 JohnPJohnP 1,3097 silver badges25 bronze badges 1
  • Before document.addEventListener('DOMContentLoaded', function () { this line can you change it var highChart = Highcharts.new and then ` var myChart = highChart.chart('chart', { ` – Velusamy Venkatraman Commented Jul 26, 2019 at 13:01
Add a ment  | 

2 Answers 2

Reset to default 8

The answer was adding window.Highcharts = Highcharts; to the application.js file along with the import Highcharts from 'highcharts'; line.

Can you try like this. Because high chart module may not loaded before

var chart = new Highcharts.Chart({
});

本文标签： javascriptFixing quotUncaught ReferenceError Highcharts is not definedquot in Rails appStack Overflow

版权声明：本文标题：javascript - Fixing &quot;Uncaught ReferenceError: Highcharts is not defined&quot; in Rails app - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744092096a2532227.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。