[rc0] Uncaught ReferenceError: require is not defined


#1

After updating to rc0, I’m getting “require is not defined”. This is in the transpiled and combined main.js file. See here:

I thought at first that I would need to create my own rollup.config file and implement rollup-plugin-node-resolve and rollup-plugin-commonjs so that require statements would work. But I can see that these plugins are already part of the rollup.config of ionic-app-scripts.

I’m sure It’s user error here, what am I doing wrong? Any ideas?


#2

I think you’re going to have better luck with import than require. Additionally, you might find this useful.


#3

Thanks for the response. I am using a half dozen libraries that do not yet support ES2015 modules, and previous to the migration to rollup, they all worked great. Are you suggesting I will have to find a workaround for every module? The whole point of using rollup-plugin-commonjs is to allow require statements – with the known caveat that you won’t get effective tree shaking for commonjs modules.


#4

That’s not my understanding. I don’t see any mention of require in the README for that module, only import.


#5

+1 subscribing to this


#6

You make a good point. So, i changed my import of a library i’m using called humanize-duration, which is not an ES2015 module.

It was:

var humanizeDuration = require('humanize-duration');

changed to:

import * as humanizeDuration from "humanize-duration";

also tried

import humanizeDuration from "humanize-duration";

I even tried a custom rollup.config file where I specified the namedExports like so:

module.exports = {
	sourceMap: true,
	format: 'iife',
	dest: 'main.js',
	plugins: [
		ngTemplate(),
		builtins(),
		commonjs({
			namedExports: {
				'node_modules/humanize-duration/humanize-duration.js': [ 'humanizeDuration' ],
				'node_modules/crypto-js/index.js': [ 'CryptoJS' ]
			}
		}),
		nodeResolve({
			module: true,
			jsnext: true,
			main: true,
			browser: true,
			extensions: ['.js']
		}),
		globals(),
		json()
	]

};

and yet when I do an ionic serve I get a typescript compilation error:

[11:07:26]  Error: src/pipes/time.pipe.ts(6,35): error TS2307: Cannot find module 'humanize-duration'.

    at Socket.<anonymous> (/Users/jasonwaters/Development/BlossomApp/node_modules/@ionic/app-scripts/dist/tsc.js:72:33)
    at emitOne (events.js:90:13)
    at Socket.emit (events.js:182:7)
    at readableAddChunk (_stream_readable.js:153:18)
    at Socket.Readable.push (_stream_readable.js:111:10)
    at Pipe.onread (net.js:534:20)

Now I am in the depths of the ionic-app-scripts source code to see what it’s doing…

All my commonJS dependencies stopped working with this update, and unless I can sort it out, I’ll have to stick with the last beta. :frowning:


#7

Look at this, especially the “short-hand declaration” bit.


#10

I changed the couple of require to import in my ts files in src/ folder.
But still I am getting this error, only in Device. In browser its all working fine.

I added the libraries in src/declaration.d.ts as follows:

declare module '*';
declare module 'moment';
declare module 'ng2-translate';
declare module 'firebase';
declare module 'angular-fire2';
declare module 'localforage';

But still the same!

Ionic Info:

Your system information:

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.34
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.2.6
Xcode version: Xcode 8.0 Build version 8A218a

Appreciate any help.


#11

Still couldn’t fix the issue.
Here is my package.json

Any help pls.

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "config": {
    "ionic_rollup": "./scripts/rollup.config.js"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21",
    "angularfire2": "2.0.0-beta.5",
    "firebase": "3.4.1",
    "localforage": "1.4.3",
    "moment": "2.15.1",
    "ng2-translate": "3.1.0",
    "@types/localforage": "0.0.31",
    "ng2-progress-bar": "0.0.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^0.0.36",
    "typescript": "^2.0.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "gr: An Ionic project"
}

#12

Removed all external dependencies from firebase, ng2-translate, progress bar, etc.,
and it’s now working in device.

Will now install them back one by one to find the exact problem.


#13

Did you get this working? What does your rollup.config.js look like?


#14

I revert to default rollup config.
But I guess, its been replaced with webpack in recent release.

Anyways, I didn’t do translation and put it on hold!


#15

Thankfully the ionic team switched to webpack as the default. Just delete your rollup.config.js and dereference it from your package.json file. webpack worked for me without babysitting it.


#16

The only way I could get this working in the most recent build is by deleting node_modules/firebase folder under node_modules/angularfire2

Now I have a problem in a different project getting jquery and signalr working. This is such a pain.I am going to have to do some convincing that native isn’t the way to go after spending a few days just trying to figure out imports.