javascript - 在 Rails 应用程序中修复 "Uncaught ReferenceError: Highcharts is not defined"-6ren

javascript - 在 Rails 应用程序中修复 "Uncaught ReferenceError: Highcharts is not defined"

转载作者：行者123 更新时间：2023-12-04 16:01:43

25

4

我正在尝试在 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 文件中，并且可以从网页访问(即我可以在浏览器的开发人员工具中加载 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错误。

谁能建议如何让Highcharts在网页上成功生成图表，没有JS错误？

谢谢!

====编辑====

我尝试使用 rails new test --webpack 创建一个全新的 Rails 应用程序, 做 yarn add highcharts然后只添加行来安装 Highcharts:

将路由和 Controller 设置为静态页面；
将以下内容添加到 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 页面。

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

最佳答案

答案是将 window.Highcharts = Highcharts; 与 import Highcharts from 'highcharts'; 行一起添加到 application.js 文件中。

关于javascript - 在 Rails 应用程序中修复 "Uncaught ReferenceError: Highcharts is not defined"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57220324/

25

4

0

文章推荐： url - 来自 URL 的内容分类

文章推荐： nfc - JavaCard 可以模拟 MIFARE Ultralight 或 NTAG NFC 标签吗？

文章推荐： Oracle:分析表与 Gather_Table_Stats 与 Gather_Schema_Stats

c++ - 如何仅将整数从文件读取到也包含字符串的c++程序中？
我有一个包含数字和整数的文件，我只想读取整数，如果它们令人讨厌，请忽略宏，但是我只需要有整数，但是我必须确保还要读取字符串，然后忽略它们我必须在这里修改什么: #include #include
无法将双数正确导入到 C 程序中
我有一个这样格式化的txt文件: MyDepartureTown MyDestinationTown 123.45 Vehicle 12 我正在尝试将数据导入到我的 C 程序中。这是我用来实现这一目标
c++ - 将flex生成的代码放到一个普通的C++程序中
我创建了一个简单的文件，使用 flex，它生成了一个文件 lex.yy.c，现在，我想把它放到 C++ 程序中。 %{ #include %} %% stop printf("Stop co
c++ - 是否可以将一段代码插入到已经存在的 C++ 程序中？
我的一个程序用 c++ 代码生成一个大文件。有没有办法从另一个C++类调用将生成的代码插入其中？这是一个小例子，可以清楚地说明我想要实现的目标。生成的文件示例: FirstClass first
检查输入十六进制消息的第三个位置 --> 在 C 程序中
我需要了解我的程序“检查输入十六进制消息的第三个位置” 程序将采用十六进制值输入消息。例如0x0123456789abcdef 程序将检查输入消息的第三个位置，即 0 现在程序将采用另一条十六进制值的
c - 如何将最终摘要消息放入 yacc 程序中？
当我将输入从输入文件重定向到 yacc 程序时，在它完成解析文件后，我希望 yacc 解析器打印其所做操作的摘要。如果我通过键盘输入内容然后按 Ctrl+D，我希望它执行相同的操作。有办法做到这一点吗
c - 将文本文件加载到 C 程序中
我正在扫描该文件，但它有两种不同的结构。文件: ParisRoubaix "Marco MARCATO" 33 UAD ITA 26 5:43:31 ParisRoubaix "Sam BEWLEY
c - 是否可以将winsock2动态链接到我的c/c++程序中
我想将winsock2.lib 添加到我的程序中，但不希望将其包含到最终的可执行文件中。有什么方法可以让我动态加载与winsock2关联的dll吗？如果没有，是否有任何 dll(Windows 附带)
java - 如何将数据库中的元素检索到 JDBC 程序中
我尝试了一个基本程序来将数据从数据库表检索到java程序中。编译结束后，运行代码时出现异常。控制台中没有显示错误。显示异常消息 import java.sql.*; public class clas
c++ - 将压缩文件嵌入到 C++ 程序中
我想用 C++ 创建一个跨平台安装程序。它可以是任何压缩类型，例如 zip 或 gzip，像普通安装程序一样嵌入程序本身。我不想在不同的平台、linux 和 windows 上创建很多更改。如何跨平台
c - 卡在交互式 openGL 程序中
每次尝试用鼠标输入两个顶点时，我都会崩溃。我最近改变了组织每个形状的方式，以确保新形状与旧形状重叠。这个项目的想法是制作各种交互式 Canvas 。用户可以在直线、三角形和矩形之间进行选择，然后选择
python - 如何使以下文本出现在我的 python 程序中？
我想在我的程序中显示以下文本。当我在 python 中粘贴以下文本时，它会将反斜杠解释为转义序列并弄乱我的 ascii 艺术..任何解决这个问题的想法极客。这是我的文本想出现在我的节目中 _ _
java - 需要帮助将文件加载到 java 程序中
我正在尝试加载名为 Tut16_ReadText.txt 的文件，并使其运行程序以输出其重或轻。我收到了粘贴在下面的错误。我无法抽出时间让这个程序运行。谁能解释一下我必须做什么才能使这个程序正常工作
python - 有没有办法在命令行中将列表输入到 Python 程序中？
我想使用命令行将列表作为参数传递，例如: $python example.py [1,2,3] [4,5,6] 我希望第一个列表 [1,2,3] 成为 first_list，[4,5,6] 成为 se
c# - 在C#程序中，ThePreStub是什么？
在分析 C# 应用程序时，我发现名为“ThePreStub”的系统 (?) 方法中有相当多的 CPU 使用率。这是什么？最佳答案参见:CLR Inside out - The Performanc
java - 如何将斯坦福解析器软件集成到我的 java 程序中？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
python - 如何将我自己的图标添加到 Python 程序中
我正在用 Python 开发一个游戏，想知道如何给它自己的图标。我使用的是 Windows 计算机，没有安装 Python 的额外东西。哦，我也在使用 3.3 版，这甚至可能吗？ P.S 我在 Sta
python - 如何将谷歌地图嵌入到我的 Python 程序中？
我正在使用 tkinter 使用 Python 开发一个项目，该项目将允许对 IP 地址进行地理定位。我有原始转换，我可以获取 IP 地址并知道城市、州、国家、经度、纬度等。我想知道是否有任何方法可以
c - 为什么我的代码突然停在这个 C 程序中？
我编写了一个程序，您可以在其中选择任意数字并将其与任意数字的幂相关联。代码运行正常，直到它到达某个部分，然后我必须输入一个字符以使其移动到代码的下一部分。这就是我的意思: #include int
无法访问特定的内存地址。在 C 程序中
我正在编写“HACKING Art Of Exploitation”一书练习 Convert2.c 第 61 页。这是我的代码。下面是我的问题。 #include void usage(char

首页

博学

6Ren·AI

商城

javascript - 在 Rails 应用程序中修复 "Uncaught ReferenceError: Highcharts is not defined"