Ioni-cli v6.10.1 with v1 App cannot load gulp or run sass task

ionic-v1
1

I just ported and rebuilt my Ionic v1 app on a new mac and have all the latest and greatest versions of Node, NPM, Cordova, and Ionic-cli v6.10.1 etc. I am able to successfully compile my app and deploy it a simulator but when compiling from the CLI I am getting the below issues. Even though my app is still successfully compiling I am getting odd behaviors with iPhoneX/iPhone11 UI layouts where the “safe zones” notch area aren’t working properly. I think the issues might be related but I am not certain.

On my older mac, I am running Ionic cli 5.4.4 with the same GULP versions as below and the gulp files are running properly - and my UI safe zones for iPhoneX/iPhone11 are working fine.

How can I resolve this? Or am I going to have to downgrade the Ionic CLI ?

% ionic cordova build ios
> ionic-v1 build
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
[08:16:10] Cannot run sass task: missing in gulpfile.js
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
> cordova build ios

Here is my env info:

% ionic info

Ionic:
   Ionic CLI         : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework   : ionic1 1.0.0
   @ionic/v1-toolkit : 1.0.22

Cordova:
   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 32 other plugins)

Utility:
   cordova-res : 0.15.1
   native-run  : not installed

System:
   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v14.5.0 (/usr/local/Cellar/node/14.5.0/bin/node)
   npm        : 6.14.5
   OS         : macOS Catalina
   Xcode      : Xcode 11.5 Build version 11E608c

% gulp -v
CLI version: 2.3.0
Local version: 3.9.1
1 Like
2

You my friend are stuck in the past like I was.

You have to migrate from gulp 3 to gulp 4.

There’s plenty of ways describe here: https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node
and here: https://www.sitepoint.com/how-to-migrate-to-gulp-4/

NOTE: dont do the stackoverflow ones. dont mess with node version and etc. migrate to gulp 4.

The main thing is turning whatever you had into .series and .parallel to call your tasks.

That said. I’ve done it in 3 scripts so far but I’m still having the same output as you

ionic serve
> ionic-v1 serve --host=localhost --port=8100 --livereload-port=35729 --dev-port=53703 --engine=browser
[v1] [11:04:47] Cannot load gulp: ReferenceError: primordials is not defined
[v1] [11:04:47] Serving directory www

I’ve tried:

  • to remove the global version of gulp I had installed
  • npm rebuild node-sass --force
  • npm rm gulp-sass and npm i gulp-sass
  • I can run any task just fine, like gulp default

Edit: seems “@ionic/v1-toolkit” still depends on gulp 3.9.1 and uses it when running ionic serve … I will investigate if there’s a version that uses gulp 4.0…

3

I too did this on my mac. I got it working about a day after my original post. My Mac is now on

CLI: 2.3.0
Local Ver: 4.0.2

However on my Windows system:

CLI: 2.3.0
Local Ver: 3.9.1

I pinned things to 3.9.1 on my windows system (for Android deployment) because too many other issues were introduced into my app and I didn’t have time to go mucking around with everything. Very soon I am going to be updating my app to Ionic 4 or 5 and most of these issues will go bye bye. But I got a LOT of code to rewrite. Not looking forward to that!

4

Same! I’m on ionic v1 and I will stick with it for now.

My core app.js is about 500 lines and could be re written but… :man_shrugging:t2:

5

heya, back to this topic again. I found this thread which supposedly pushed a fix for this issue, The new toolkit (Sept 2020) is supposed to have a fix that checks for Gulp 3 formatted gulpfile and if not, then use Gulp 4 format. On a new PC dev machine I just installed all the latest and greatest (except Ionic v1), using toolkit 3.2.15 - but I am still having the issue. Hopefully there is any easy fix for it as I am trying to eliminate as many legacy dependencies as possible.

6

@rodrigograca31 - so I got it to work. You need to update the @ionic/v1-toolkit to higher than 3.2.4 - I am on 3.2.15 now. The new toolkit provides the Gulp 4.0.02 patch. You do have to manually convert the included gulpfile.js to make it compatible, but the changes are minor:

First, add sass to your project: npm install -g sass@latest

Then in gulpfile.js, make these edits:
<= 3.9.1: var sass = require('gulp-sass') ;
4.0+: var sass = require('gulp-sass')(require('sass')) ;

Change any neccesary tasks to reflect the new gulp.series() or gulp.parallel() methods
<= 3.9.1

gulp.task('watch', ['sass'], function() {
  gulp.watch(paths.sass, ['sass']);
});

4.0+

gulp.task('watch', function () {
    //gulp.watch('./app/*.scss', gulp.series('sass'));
    gulp.watch(paths.sass, gulp.series('sass'));
});

Then, in 3.9.1 the following line is defined before the gulp.task functions, but in 4.0+ it is defined after the gulp.task functions
<=3.9.1: gulp.task('default', ['sass']);
4.0+: gulp.task('default', gulp.series('sass','watch'));

I have an Ionic v1 tutorial put together for Mac…going to update it, then put a new one together for Android. Its a constantly evolving document as all the dependencies continually update but Ionic v1 is stuck at Ionic1 1.3.4. As soon as I get both updated/created I will post the links.

7

@rodrigograca31 - ok, i posted a Mac guide and an Android (Windows) guide on how to do a fresh install of everything in both environments. In both are links to the other as well as Gulp 4.0 migration steps.

Hope it helps.