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

[mdartic]

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 https://github.com/nativescript-vue/vue-cli-plugin-nativescript-vue/issues/2#issuecomment-549501158

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

[sergeyshevch]

Hi I have found another solution to start project now.

1. Remove your vue/cli
2. Install vue/cli v3
3. Start the project
4. Upgrade vue cli if you need

[mdartic]

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]

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]

sounds related to #25 ?

[pratik-soni-einfochips]

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

[acamenhas]

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]

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]

@mklueh what website?

[pratik-soni-einfochips]

@acamenhas Use any minor version of vue 3.

[acamenhas]

@acamenhas Use any minor version of vue 3.

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

[jawa-the-hutt]

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]

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]

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