Fixing "Uncaught ReferenceError: Highcharts is not defined" in Rails app

Question

我正在尝试在 Rails 5.2 / webpacker 应用程序中使用 Highcharts。（我是 webpacker 的新手，正在使用它，因为我们已经为基于 webpack 构建的应用程序采用了第三方主题。该主题现在可以正常工作。）当我在应用程序中包含 Highcharts 代码时，我得到没有图表，而是控制台出现错误：Uncaught ReferenceError: Highcharts is not defined at HTMLDocument.<anonymous>。不幸的是，我是 webpacker 的新手，JS 不是我的菜。

我已经按照 Highcharts 站点上的说明使用 npm 安装 Highcharts（尽管我的系统使用的是 yarn），除了会生成此错误之外，一切似乎都是正确的！

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.com/" 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>

页面模板（基本上直接来自 Highcharts "Your first chart" 页面）：

...
<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>
...

我试过更改导入模块的顺序（在顶部、在末尾或在中间），但无济于事。 Webpack 正在愉快地编译代码，我在这个过程中多次重启了 webpack-dev-server，以确保 environment.js 更改正在运行。我还确认 Highcharts 代码在 webpack 发出的 app.js 文件中，并且可以从网页访问它（即我可以在浏览器的开发人员工具中加载 app.js 文件，并且搜索文件显示代码来自 Highcharts 7.1.2).

我还尝试将 app.js 中的 require/import 行格式化为 require('highcharts/modules/exporting')(Highcharts);（如 Highcharts 文档中所示）和 import 'highcharts/modules/exporting';（以匹配文件中的其他 import 行），但它们都产生相同的结果 - 没有图表和 Highcharts is not defined 错误。

任何人都可以建议如何让 Highcharts 在网页上成功生成图表，没有 JS 错误？

谢谢！

====编辑====

我尝试使用 rails new test --webpack 创建一个全新的 Rails 应用程序，执行 yarn add highcharts 然后仅添加行以安装 Highcharts：

将路由和控制器设置为静态页面；
将以下内容添加到 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"
  })
);

将 import Highcharts from 'highcharts/modules/exporting'; 添加到 app/javascript/packs/application.js
正在将 Highcharts 文档中的模板 HTML 添加到 application_layout.html 页面。

而且，在这样做之后，我得到了完全相同的错误。我错过了什么？

Answer 1

你能不能这样试试。因为之前可能没有加载高图模块

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

Answer 2

答案是将 window.Highcharts = Highcharts; 添加到 application.js 文件以及 import Highcharts from 'highcharts'; 行。

Fixing "Uncaught ReferenceError: Highcharts is not defined" in Rails app

Fixing "Uncaught ReferenceError: Highcharts is not defined" in Rails app

javascript

ruby-on-rails

webpack

highcharts

webpacker