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?
I think you’re going to have better luck with import than require. Additionally, you might find this useful.
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.
That’s not my understanding. I don’t see any mention of require in the README for that module, only import.
+1 subscribing to this
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. 
Look at this, especially the “short-hand declaration” bit.
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.
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"
}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.
Did you get this working? What does your rollup.config.js look like?
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!
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.
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.
I’m having the same problem right now, and the link doesn’t work anymore. Does anyone know what the original solution was?
On a modern project? Please post package.json.
Here’s my package.json
{
"name": "calimacil-ionic",
"private": true,
"version": "1.1.0",
"description": "calimacil-ionic",
"license": "MIT",
"files": [
"dist/"
],
"scripts": {
"build": "stencil build",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watch",
"generate": "stencil generate"
},
"dependencies": {
"@capacitor/android": "^2.1.0",
"@capacitor/cli": "^2.1.0",
"@capacitor/core": "^2.1.0",
"@capacitor/ios": "^2.1.0",
"@ionic-native/ble": "^5.26.0",
"@ionic-native/core": "^5.26.0",
"@ionic/core": "^5.1.1",
"@types/lodash-es": "^4.17.3",
"buffer": "^5.6.0",
"capacitor-firebase-auth": "^0.3.1",
"cordova-plugin-ble-central": "^1.2.5",
"file-saver": "^2.0.2",
"firebase": "^7.13.2",
"lodash-es": "^4.17.15",
"moment": "^2.26.0",
"moment-duration-format": "^2.3.2",
"npm-check": "^5.9.2",
"rollup-plugin-node-polyfills": "^0.2.1",
"rxfire": "^3.12.5",
"rxjs": "^6.5.5",
"save": "^2.4.0",
"super-tiny-wave-decoder": "^0.1.3",
"three": "^0.116.1"
},
"devDependencies": {
"@stencil/core": "^1.13.0",
"@types/lodash": "^4.14.152"
}
}
You have several dependencies in there that I had not previously seen. The most problematic-looking one is “save”. I would definitely try getting rid of that.
My instinct is that your fundamental problem is that you’re trying to use something that is not designed to work in a browser environment, and have ended up shoveling on layers of things (like buffer and rollup-plugin-node-polyfills) in an attempt to placate whatever it is that it’s running under node.js, when it really isn’t.
I tried to remove “save” and “file-saver”, but it didn’t fix the problem. Is there other dependencies that seems suspicious to you?
buffer and rollup-plugin-node-polyfills as mentioned before. It might be worthwhile auditing your code for any use of require, which should help you narrow down whether the problem is directly related to your app code (which should be easier to fix) or is buried in a dependency (harder).