Ionic 2：ReferenceError：未定义 webpackJsonp答案

【问题标题】：Ionic 2: ReferenceError: webpackJsonp is not definedIonic 2：ReferenceError：未定义 webpackJsonp
【发布时间】：2017-12-12 18:40:54
【问题描述】：

我是 Ionic 的新手。我已经用超级模板开始了项目。但是当我尝试在浏览器中运行该应用程序时。它抛出一个错误说：

ReferenceError: webpackJsonp is not defined
    at http://localhost:8100/build/main.js:1:1

我尝试将 vendor.js 放在 index.html 中，但没有奏效。

这是 index.html 文件。我已经删除了 vendor.js，因为它不起作用。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

【问题讨论】：

这主要是因为项目使用了代码拆分，webpack的代码是在main.jschunk之后加载的
您能提供更多信息吗？此错误表示代码尚未加载 webpack 运行时，但根据给定信息无法判断原因。
你删除了 vendor.js 是什么意思？很确定 webpack 的运行时在某处
@thangngoc89 把它放在那里没有用。以前没有。

标签： javascript ionic-framework webpack

【解决方案1】：

我刚遇到这个问题，文件 polyfills/vendor/main 的顺序在我的情况下没有任何关系，但它是 vendor.js 文件的大小。

我确实意识到了这一点，因为它可以在我的本地机器上运行，所以我确实发现 vendor.js 是 5MB，所以我使用 --prod 参数再次构建了应用程序：

ionic cordova build ios --prod

【讨论】：

【解决方案2】：

当我遇到这个错误时，我正在做一个 ReactJs 项目。这可能是 package.json 文件中缺少依赖项的情况，最终以 OP 报告的错误形式冒泡。在我们的例子中，缺少对 omitJs npm 包的引用。当我在 package.json 文件的依赖项部分添加以下行时，它就开始工作了：

"dependencies": {
.....other dependencies
"omit.js": "1.0.0"
}

【讨论】：

【解决方案3】：

离子版本问题兄弟。

检查版本。

npm install -g ionic@v3.0.1
npm install -g ionic@v2.0.1
npm install -g ionic@v1

【讨论】：

【解决方案4】：

npm install -g ionic@v3.0.1

或

yarn add -g ionic@v3.0.1

【讨论】：

【解决方案5】：

当我开始使用 ionic 3 开发旧的 ionic 2 项目时，我遇到了同样的问题。按照这个步骤对我有用。欧普尼src\index.html 放这一行

<script src="build/vendor.js"></script>

之前

<script src="build/main.js"></script>

之后

<script src="build/polyfills.js"></script>

喜欢这个

<!DOCTYPE html>
...
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app>
  </ion-app>
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>
  <script src="build/vendor.js"></script>  <---- here
  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>

</html>

【讨论】：

【解决方案6】：

在< your application directory > /src/index.html的脚本标签内添加vendor.js路径

<script src="build/vendor.js"></script>

同时更改 < your application directory >/src/service-worker.js 文件 - 在 precache 部分中包含 vendor.js：

// pre-cache our key assets
self.toolbox.precache(
    [
      './build/main.js',
      './build/vendor.js',   // <===  Add vendor.js
      './build/main.css',
      './build/polyfills.js',
      'index.html',
      'manifest.json'
    ]
);

【讨论】：

我没有 self.toolbox.precache(...);在 /src/service-worker.js 之前这个关于 vendor.js 的投诉对 index.htm 的更新似乎处理了运行时错误...没有修改 service-worker.js 是什么意思“预缓存这些资产”？是否适用于 PWA 部署以及为 Android 等平台构建？
确保它在这里非常重要，否则它将无法工作
在 index.html 中的 main.js 之前简单添加

【解决方案7】：

这是 Ionic-App-Scripts 的重大变化

https://github.com/ionic-team/ionic-app-scripts/releases/tag/v2.0.0

src/index.html 必须修改为包含一个新的供应商脚本标签。

...
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <script src="cordova.js"></script>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- all code from node_modules directory is here -->
  <script src="build/vendor.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
...

【讨论】：

【解决方案8】：

实际上只是经历了和你一样的事情。我在 /src/index.html 中的 main.js 之前添加了 vendor.js 脚本 - 现在它在本地运行。

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <script src="build/vendor.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

【讨论】：

我做了，但没用。删除了应用程序，现在再次使用空白模板开始项目。
这应该是公认的答案，因为这是错误的原因
@VishalSingh 我怀疑你编辑的是 www 而不是 src 版本
这适用于较新的 android 版本。但是当我在我的 android 4.4.4 上测试时它不起作用。还是一样的错误:(
@Christian：我也有同样的问题。你能在 android 4.4.4 上解决它吗？