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的“您的第一张图表”页面上）：

...
<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文件中，并且可以从网页上访问（即，我可以在浏览器的Developer Tools中加载app.js文件，然后搜索该文件，代码来自Highcharts 7.1.2）。

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

任何人都可以建议如何在Web上成功获得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;和import Highcharts from 'highcharts';行一起添加到application.js文件中。

在Rails应用中修复“未捕获的ReferenceError：未定义Highcharts”

2 个答案: