admin管理员组

文章数量:1135241

I'm new to Ionic. I have started project with super template. But when I try to run the app in browser. It throws an error saying:

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

I have tried putting vendor.js in index.html but that has not worked.

Here's the index.html file. I have removed vendor.js as it didn't work.

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

I'm new to Ionic. I have started project with super template. But when I try to run the app in browser. It throws an error saying:

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

I have tried putting vendor.js in index.html but that has not worked.

Here's the index.html file. I have removed vendor.js as it didn't work.

<!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>
Share Improve this question edited Jul 8, 2017 at 16:16 Vishal Singh asked Jul 8, 2017 at 16:09 Vishal SinghVishal Singh 5851 gold badge5 silver badges9 bronze badges 4
  • This is mainly because the project is using code splitting and webpack's code was loaded after main.js chunk – thangngoc89 Commented Jul 8, 2017 at 16:11
  • Can you provide more information? This error means the code hasn't loaded webpack runtime just yet but it's impossible to tell why based on the given information. – Juho Vepsäläinen Commented Jul 8, 2017 at 16:12
  • What do you mean by you've removed vendor.js? Pretty sure webpack's runtime is in there somewhere – thangngoc89 Commented Jul 8, 2017 at 16:23
  • @thangngoc89 putting it in there didn't work. It was not there previously. – Vishal Singh Commented Jul 8, 2017 at 16:31
Add a comment  | 

8 Answers 8

Reset to default 113

Literally just went through the same thing as you are. I added the vendor.js script BEFORE the main.js in /src/index.html - now it runs locally.

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

This is a breaking change in Ionic-App-Scripts

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

src/index.html must be modified to include a new vendor script tag .

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

Add vendor.js path within the script tag in < your application directory > /src/index.html

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

Also make changes in < your application directory >/src/service-worker.js File - Include vendor.js in the precache section:

// 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'
    ]
);

I face the same issue when i started developing old ionic 2 project with ionic 3. follow this steps works for me. opne src\index.html put this line

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

before

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

and after

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

like this

<!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>
npm install -g [email protected]

or

yarn add -g [email protected]

Ionic version problem bro.

check the version.

npm install -g [email protected]
npm install -g [email protected]
npm install -g ionic@v1

I was working on a ReactJs project when I faced this error. This could be a case of missing dependencies from package.json file which eventually bubbles up in the form of error reported by OP. In our case a reference to omitJs npm package was missing. The moment I added below line in dependencies section of package.json file it all started to work:

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

I just have faced this issue, and the order of the files polyfills/vendor/main doesn't anything has to do in my case, but it was the size of the vendor.js file.

I did realize it because it works on my local machine, so, I did find that vendor.js was 5MB, so, I builded again the app using --prod parameter:

ionic cordova build ios --prod

本文标签: javascriptIonic 2 ReferenceError webpackJsonp is not definedStack Overflow