Skip to content

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

Open
@mdartic

Description

@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 #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.

> ns-code-sharing-sdis32@0.1.0 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 fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > babel-loader@8.0.6" has unmet peer dependency "webpack@>=2".
warning "nativescript-dev-webpack > ts-loader@5.4.5" has unmet peer dependency "typescript@*".
warning " > sass-loader@8.0.0" has unmet peer dependency "webpack@^4.36.0".
warning " > string-replace-loader@2.2.0" has unmet peer dependency "webpack@1 || 2 || 3 || 4".
warning " > webpack-cli@3.3.10" has unmet peer dependency "webpack@4.x.x".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
└─ webpack-cli@3.3.10
info All dependencies
├─ detect-file@1.0.0
├─ expand-tilde@2.0.2
├─ findup-sync@3.0.0
├─ global-modules@2.0.0
├─ global-prefix@3.0.0
├─ parse-passwd@1.0.0
├─ resolve-dir@1.0.1
├─ v8-compile-cache@2.0.3
└─ webpack-cli@3.3.10
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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions