Cannot `ionic generate tabs`: TypeError: Cannot read property 'replace' of undefined

Hi, @Sujan12

I am having the same problem as @cjacobm on Windows 10 x64.

I have node v.8.2.1 and npm 5.3.0. Installed cordova and ionic this morning (26 July 2017) using

npm install -g cordova ionic

so all packages should be up to date?

I took exactly the same steps as cjacobm.

Are there any more suggestions to try please?

What error are you getting? When you do what exactly?
What is your ionic info output?

The latest node version gave me errors aswell.
Try to use the node version 6.11.1. Then everything worked for me, maybe it works for you too :slight_smile:.

Hi @Sujan12

On Windows 10 x64 I tried to generate tabs in a sidemenu project. My output is:

C:\Users\Username>ionic start --verbose
[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for global @ionic/cli-plugin-proxy
? What would you like to name your project: myapp
? What starter would you like to use: sidemenu
[DEBUG] globalDeps=
√ Creating directory .\myapp - done!
[INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
√ Downloading - done!
[INFO] Fetching starter template sidemenu (https://github.com/ionic-team/ionic2-starter-sidemenu/archive/master.tar.gz)
√ Downloading - done!
√ Updating package.json with app details - done!
√ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
> npm install
√ Running command - done!
[DEBUG] localDeps=@ionic/cli-plugin-ionic-angular
> npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
√ Running command - done!
> git init
√ Running command - done!
> git add -A
√ Running command - done!
> git commit -m "Initial commit" --no-gpg-sign
√ Running command - done!

♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Run your app in the browser (great for initial development):
  ionic serve

Run on a device or simulator:
  ionic cordova run ios

Test and share your app on a device with the Ionic View app:
  http://view.ionic.io

? Link this app to your Ionic Dashboard to use tools like Ionic View? No

Go to your newly created project: cd .\myapp

C:\Users\Username>cd .\myapp

C:\Users\Username\myapp>ionic generate tabs
? What should the name be? mytabs
? How many tabs? 2
? Name of this tab: one
? Name of this tab: two
TypeError: Cannot read property 'replace' of undefined

C:\Users\Username\myapp>ionic generate tabs --verbose
[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for global @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
? What should the name be? mytabs
? How many tabs? 2
? Name of this tab: one
? Name of this tab: two
[DEBUG] !!! ERROR ENCOUNTERED !!!
TypeError: Cannot read property 'replace' of undefined
[DEBUG] TypeError: Cannot read property 'replace' of undefined
        at Object.tabsModuleManipulation
        (C:\Users\Username\myapp\node_modules\@ionic\app-scripts\dist\generators\util.js:177:105)
        at C:\Users\Username\myapp\node_modules\@ionic\app-scripts\dist\generators.js:36:16
        at <anonymous>

My ionic info output is

C:\Users\Username\myapp>ionic info --verbose
[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for global @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular

global packages:

    @ionic/cli-utils : 1.5.0
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v8.2.1
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

Any help would be appreciated.

1 Like

Interesting, I have no explanation.

Have a look around here: https://github.com/ionic-team/ionic-cli/issues and https://github.com/ionic-team/ionic-app-scripts/issues If you don’t find any matching issues, maybe create one. This seems strange to me.

Can you ionic serve the project?

I also encountered this exact same issue, only when trying to generate the tabs. Strange this is, the tabs were generated either way. You can find the issue over here on the CLI github:

2 Likes

Yes, I can ionic serve, but tabs don’t show up in the view, it looks exactly like a default sidemenu project before generating tabs.

I will search a bit more and follow up some of the other suggestions.

Thank you for your time. :tulip:

app-scripts 2.1.0 was release ~1 day ago, which seems to include a fix for your problem:
https://github.com/ionic-team/ionic-app-scripts/releases/tag/v2.1.0

Run npm install @ionic/app-scripts@latest --save-dev to install and try again.

1 Like

Thanks @Sujan12 I tried it, but it still doesn’t work:

I ran the suggested line first and got:

C:\Users\username\myapp>npm install @ionic/app-scripts@latest --save-dev
npm WARN deprecated object-keys@0.2.0: Please update to the latest object-keys
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

and when I try to generate tabs again, a new error (which seems like a step forward at least…):

C:\Users\Username\myapp>ionic generate tabs --verbose
[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for global @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
? What should the name be? mytabs
? How many tabs? 1
? Name of this tab: one
[DEBUG] !!! ERROR ENCOUNTERED !!!
TypeError: Cannot read property 'constants' of undefined
[DEBUG] TypeError: Cannot read property 'constants' of undefined
        at Object.processTabsRequest (C:\Users\Username\myapp\node_modules\@ionic\app-scripts\dist\generators.js:28:46)
        at Object.<anonymous> (C:\Users\Username\myapp\node_modules\@ionic\cli-plugin-ionic-angular\dist\generate.js:58:34)
        at Generator.next (<anonymous>)
        at fulfilled (C:\Users\Username\myapp\node_modules\@ionic\cli-plugin-ionic-angular\dist\generate.js:4:58)
        at <anonymous>

also I updated object-keys as the warning mentions, but I get the same warning if I rerun the app-scripts install.

What is your ionic info now?

Hi, sorry for the delay, I uninstalled ionic and cordova and checked that all npm dependencies were installed. I then reinstalled cordova and ionic and installed the latest version of @ionic/app-scripts.

I again got the following output:

C:\Users\Username\MyProject>npm install @ionic/app-scripts@latest --save-dev
npm WARN deprecated object-keys@0.2.0: Please update to the latest object-keys
npm WARN ajv-keywords@2.1.0 requires a peer of ajv@>=5.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @ionic/app-scripts@2.1.0
added 114 packages and updated 1 package in 65.289s

My ionic info for a new ionic sidemenu project is:

C:\Users\Username\MyProject>ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.1.0
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v8.2.1
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

I am concerned about the ajv and outdated object-key dependencies: have tried all sorts to update, but nothing works. Do you think this may be affecting the ionic generate tabs function?

C:\Users\Username\MyProject>npm ls --depth=0
MyProject@0.0.1 C:\Users\Username\MyProject
+-- @angular/common@4.1.3
+-- @angular/compiler@4.1.3
+-- @angular/compiler-cli@4.1.3
+-- @angular/core@4.1.3
+-- @angular/forms@4.1.3
+-- @angular/http@4.1.3
+-- @angular/platform-browser@4.1.3
+-- @angular/platform-browser-dynamic@4.1.3
+-- @ionic-native/core@3.12.1
+-- @ionic-native/splash-screen@3.12.1
+-- @ionic-native/status-bar@3.12.1
+-- @ionic/app-scripts@2.1.0
+-- @ionic/cli-plugin-ionic-angular@1.3.2
+-- @ionic/storage@2.0.1
+-- ionic-angular@3.5.3
+-- ionicons@3.0.0
+-- object-keys@1.0.11
+-- rxjs@5.4.0
+-- sw-toolbox@3.6.0
+-- typescript@2.3.4
`-- zone.js@0.8.12

npm ERR! peer dep missing: ajv@>=5.0.0, required by ajv-keywords@2.1.0

No. Warnings can be mostly ignored in npm land, errors are the real problem. And there are none here.

I think you should create an issue at app-scripts for the constants error you are getting with 2.1.0.

1 Like

Thanks so much for your help, will do as you suggest :smile_cat:!

1 Like