Errors during `vue add nativescript-vue` with CLI v4 #34

mdartic · 2019-11-11T21:48:56Z

Hello,

I'm trying this plugin, and, first of all, thanks for the work to make this available.
Nevertheless, I encounter some bugs / problems during installation... with @vue/cli v4 .

Maybe related to #2 (comment)

When I create a new project with vue create my-dir, choosing some options with vue-router, then vue add nativescript-vue with options :

? Enter a unique application identifier: org.blabla.blibli
? Use HTML5 history mode? (Default: hash mode) Yes
? Is this a brand new project? (Default: Yes) Yes
? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web
? What type of template do you want to start with? (Default: Simple) Simple

I encounter this error :

 ERROR  Error: Cannot find module '@vue/cli-service/generator/router/template/src/router.js'
  from '/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/vue-cli-plugin-nativescript-vue/generator/templates/simple/src'

I think it's related to the fact that in the CLI v4, the vue-router has a dedicated plugin.

I try to update the nativescript-vue CLI plugin in a fork with a commit updating some paths.
With this version, seems ok.

I add another commit for the vuex store. (but not tested 'cause I don't use vuex)
I'm not sure the moveSync and copy will work in a missing directory. (the genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'store' dir doesn't exist yet ?)

I run yarn serve:web, and discover another error with sass-loader module missing.
I didn't say I was using sass (?!), but by adding this module as a dev dependency, webpack is happier.

So with a yarn add --dev sass-loader, yarn serve:web is ok and running on http://localhost:8080.

Now I go through Firefox on this URL, I encounter another error in Console Devtools :

[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

When I go to the src/main.js, I can't see anymore the import of router.
I fix it directly in my code by importing the router and adding it to the new Vue({}) instruction.
I don't know exactly how to fix this in the main.js (and main.native.js ?) of the plugin.

After that, routing is ok for my web browser.

Then I try yarn serve:android with an android device connected in debug, and after installing a webpack-cli (by the plugin), it doesn't work, and I'm stucked with this error :

yarn serve:android
yarn run v1.19.1
$ npm run setup-webpack-config && tns run android --env.development
npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1573508599710-0.2997973760755772/node but npm is using /home/mdartic/.nvm/versions/node/v10.15.1/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> [email protected] setup-webpack-config /home/mdartic/workspace/madz/ns-code-sharing-sdis32
> node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre

copying CLI 3 version of webpack.config.js to project
Searching for devices...
Copying template files...
Platform android successfully added. v6.1.0
Preparing project...
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "yarn" to install the CLI via "yarn add -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'yarn add -D webpack-cli')...
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "webpack@>=2".
warning "nativescript-dev-webpack > [email protected]" has unmet peer dependency "typescript@*".
warning " > [email protected]" has unmet peer dependency "webpack@^4.36.0".
warning " > [email protected]" has unmet peer dependency "webpack@1 || 2 || 3 || 4".
warning " > [email protected]" has unmet peer dependency "[email protected]".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
starting nativeConfig
Bundling application for entryPath ./main.native...
TypeError: Cannot read property '__expression' of undefined
    at Object.toConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-chain/src/Plugin.js:56:38)
    at clean.Object.assign.minimizer.minimizers.values.map.plugin (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-chain/src/Optimization.js:39:66)
    at Array.map (<anonymous>)
    at module.exports.toConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-chain/src/Optimization.js:39:45)
    at module.exports.toConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-chain/src/Config.js:130:41)
    at Service.resolveWebpackConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/@vue/cli-service/lib/Service.js:250:34)
    at Object.<anonymous> (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/webpack.config.js:12:26)
    at Module._compile (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at yargs.parse (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/cli.js:71:45)
    at Object.parse (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
    at /home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at runCommand.then (/home/mdartic/workspace/madz/ns-code-sharing-sdis32/node_modules/webpack/bin/webpack.js:143:5)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Do you have an idea ?

Are you interested by a PR with my code for the router/store issues ?

Can't we use the vue.config.js to make this android / ios jobs ? and avoid installing a webpack ? Just reuse the webpack already installed ?

Thanks for your reply

The text was updated successfully, but these errors were encountered:

sergeyshevch · 2019-11-20T08:50:22Z

Hi I have found another solution to start project now.

Remove your vue/cli
Install vue/cli v3
Start the project
Upgrade vue cli if you need

mdartic · 2019-11-20T09:51:48Z

Thanks @SergeyKons for your help.
I found help in nativescript slack "vue" channel.
By using the CLI v3, it's ok !

But, maybe we can make this plugin work with the CLI v4 ?
I think the Cannot read property '__expression' of undefined is a problem, but for the moment, I don't know how to fix it.
@jawa-the-hutt any ideas ?

pratik-soni-einfochips · 2019-11-21T05:06:03Z

I have facing same issue since last 5 day.
I have found the solution for the same.

Please follow below steps to get it resolved.
Please remove npm and npm-cache folder from your computer's below location.

Windows :
C:\Users\AppData\Roaming.

Linux/Ubuntu:
/usr/local

Then Follow below steps
1) npm install -g @vue/[email protected]
2) Go to code sharing project Directory's root folder location where you have package.json
3)npm install --save-dev @vue/[email protected]
4)npm install --save-dev [email protected]
5)vue invoke vue-cli-plugin-nativescript-vue after that it will ask you for some user input and i provided below inputs.

? Enter a unique application identifier: org.nativescript.application
? Use HTML5 history mode? (Default: hash mode) No
? Is this a brand new project? (Default: Yes) Yes
? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web
? What type of template do you want to start with? (Default: Simple) Simple

Enjoy...

mdartic · 2019-11-21T08:20:59Z

sounds related to #25 ?

pratik-soni-einfochips · 2019-11-21T08:24:06Z

Yes we do have same kind of issues open which is #25

acamenhas · 2019-12-08T17:42:49Z

Cant install with vue 3.10
vue --version 3.10.0

invoking generator for vue-cli-plugin-nativescript-vue... ERROR Error: Cannot find module '@vue/cli-service/generator/router/template/src/router.js' from '/Users/user/Projects/my-app/node_modules/vue-cli-plugin-nativescript-vue/generator/templates/simple/src'

mklueh · 2019-12-15T18:39:54Z

I think this issue isn´t that appealing to new people including myself that are following the tutorials on their website, however maybe @jawa-the-hutt can look into that when he has some time

mandaputtra · 2019-12-21T04:41:45Z

@mklueh what website?

pratik-soni-einfochips · 2019-12-23T05:25:04Z

@acamenhas Use any minor version of vue 3.

acamenhas · 2019-12-24T11:49:39Z

@acamenhas Use any minor version of vue 3.

Thank you @pratik-soni-einfochips it worked!!!

jawa-the-hutt · 2020-01-07T15:39:45Z

I've merged PR #35 as well as done some other updates this morning. Update the plugin to 0.3.1 and see if this helps resolve the CLI 4.0 compatibility.

I'm not 100% for sure on this one as my global CLI install is 3.12.1, but in a test project, the local CLI version is 4.1.0. Because of this I'm not 100% for sure if CLI 4 will work or if it does, if this breaks CLI 3 behavior.

Since CLI 4 is the way forward for Vue, I've no real interest in trying to maintain backwards compatibility with CLI 3 as one of the major changes for CLI 4 was moving to webpack-chain v6.0 which breaks things with CLI 3 from what I can tell.

jawa-the-hutt · 2020-01-07T15:41:22Z

And FYI, 0.3.1 of this plugin should deploy a NS 6.3 compatible app. This also means you'll be on NS-Vue 2.5.0-alpha.3

visionfortech · 2020-02-21T13:47:49Z

I have facing same issue since last 5 day.
I have found the solution for the same.

Please follow below steps to get it resolved.
Please remove npm and npm-cache folder from your computer's below location.

Windows :
C:\Users\AppData\Roaming.

Linux/Ubuntu:
/usr/local

Then Follow below steps
1) npm install -g @vue/[email protected] 2) Go to code sharing project Directory's root folder location where you have package.json 3)npm install --save-dev @vue/[email protected] 4)npm install --save-dev [email protected] 5)vue invoke vue-cli-plugin-nativescript-vue after that it will ask you for some user input and i provided below inputs.

? Enter a unique application identifier: org.nativescript.application
? Use HTML5 history mode? (Default: hash mode) No
? Is this a brand new project? (Default: Yes) Yes
? Dual Native AND Web development experience or a Native only? (Default: Dual) Dual Native AND Web
? What type of template do you want to start with? (Default: Simple) Simple

Enjoy...

@pratik-soni-einfochips http://www.visionfortech.com/2020/02/solution-invoking-generator-for-vue-cli-nativescript-cannot-find-module-main.ts.html

phdd mentioned this issue Jan 3, 2020

Update template path for router.js #35

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Errors during `vue add nativescript-vue` with CLI v4 #34

Errors during `vue add nativescript-vue` with CLI v4 #34

mdartic commented Nov 11, 2019

sergeyshevch commented Nov 20, 2019

mdartic commented Nov 20, 2019

pratik-soni-einfochips commented Nov 21, 2019 •

edited

Loading

mdartic commented Nov 21, 2019

pratik-soni-einfochips commented Nov 21, 2019 •

edited

Loading

acamenhas commented Dec 8, 2019

mklueh commented Dec 15, 2019

mandaputtra commented Dec 21, 2019

pratik-soni-einfochips commented Dec 23, 2019

acamenhas commented Dec 24, 2019

jawa-the-hutt commented Jan 7, 2020

jawa-the-hutt commented Jan 7, 2020

visionfortech commented Feb 21, 2020

Errors during vue add nativescript-vue with CLI v4 #34

Errors during vue add nativescript-vue with CLI v4 #34

Comments

mdartic commented Nov 11, 2019

sergeyshevch commented Nov 20, 2019

mdartic commented Nov 20, 2019

pratik-soni-einfochips commented Nov 21, 2019 • edited Loading

mdartic commented Nov 21, 2019

pratik-soni-einfochips commented Nov 21, 2019 • edited Loading

acamenhas commented Dec 8, 2019

mklueh commented Dec 15, 2019

mandaputtra commented Dec 21, 2019

pratik-soni-einfochips commented Dec 23, 2019

acamenhas commented Dec 24, 2019

jawa-the-hutt commented Jan 7, 2020

jawa-the-hutt commented Jan 7, 2020

visionfortech commented Feb 21, 2020

Errors during `vue add nativescript-vue` with CLI v4 #34

Errors during `vue add nativescript-vue` with CLI v4 #34

pratik-soni-einfochips commented Nov 21, 2019 •

edited

Loading

pratik-soni-einfochips commented Nov 21, 2019 •

edited

Loading