Ionic 2: ReferenceError: webpackJsonp is not defined
JavascriptIonic FrameworkWebpackJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
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>
Solution 2 - Javascript
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>
...
Solution 3 - Javascript
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'
]
);
Solution 4 - Javascript
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>
Solution 5 - Javascript
Ionic version problem bro.
check the version.
npm install -g ionic@v3.0.1
npm install -g ionic@v2.0.1
npm install -g ionic@v1
Solution 6 - Javascript
npm install -g ionic@v3.0.1
or
yarn add -g ionic@v3.0.1
Solution 7 - Javascript
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"
}
Solution 8 - Javascript
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