CODEWITHSUNDEEP
vue.jswebpacknativescriptnativescript-vuenativescript-cli
Doug
Doug

Reputation: 1515

Nativescript-vue doesn't work without --bundle option

Please, let me know what information I can provide to better help troubleshoot this issue. As of right now, I've been reading up on webpack, comparing my webpack.config.js file, and random searches into the Google void.

Earlier this morning, I was running my NativeScript-vue project as expected. Made some changes, saved, tested, wash, rinse repeat. Then I tried a build and I got the following error message: 

Unable to apply changes on device: emulator-####. Error is: Nativescript-vue doesn't work without --bundle option. Please specify --bundle option to the command and execute it again..

I've been making edits in one .vue file -- I have not been tinkering with any other files, especially not configuration files.

What is causing this issue?
How can I resolve this issue?
Is there a more intelligent search I can do than pasting in the error message?

UPDATE:

As requested by @Estradiaz

I've been attempting to run the application with:
tns run android --bundle
(also tried with ios and got the same results)

I've built the project using both npm install and tns install

The only script I have in my package.json is:

"clean": "rm -rf node_modules/* && rm -rf hooks/* && rm -rf platforms/* && rm webpack.config.js && rm package-lock.json"

(just to nuke everything if/when new assets are being added)

Running TNS version #5.2.4

The terminal's output is:

Webpack compilation complete. Watching for file changes.
Webpack build done!
Unable to apply changes on device: emulator-5554. Error is: Nativescript-vue doesn't work without --bundle option. Please specify --bundle option to the command and execute it again..

UPDATED UPDATE:

Estradiaz drops some great knowledge; however, my error was discovered to have come from when my nativescript-vue package updated to 2.1.0 from 2.0.2

Rolling back to 2.0.2 resolved my specific issue. Other devs have started to report similar issues: https://github.com/nativescript-vue/nativescript-vue/issues/454 and https://github.com/nativescript-vue/nativescript-vue/pull/361#issuecomment-474079850

Upvotes: 3

Views: 1184

Answers (3)

Igor R.
Igor R.

Reputation: 897

There was a broken release of nativescript-vue today (2.1.0), which caused the issue you were experiencing. We have released 2.2.0 with the fix, so please make sure you are running the latest version.

Upvotes: 1

Doug
Doug

Reputation: 1515

After some troubleshooting (and help from the tech lead), we tracked down that a new nativescript-vue package was released today (going from 2.0.2 to 2.1.0).

In that, "feature" #361 is: "show error when --bundle option is not provided"

I don't know what this actually means in the scope of my project or how I was invoking the build or why it was breaking ... but rolling back to 2.0.2 resolved my issue.

Upvotes: 2

Estradiaz
Estradiaz

Reputation: 3563

Search the typo

the bugging history of code ;)

Without changes to the dev dependencies, the main reason for the "--bundle" error is the use of a non native element - e.g. Lable instead Label.

Following:

$ npm install -g @vue/cli @vue/cli-init
$ vue init nativescript-vue/vue-cli-template <project-name>
$ cd <project-name>
$
$ npm install
$ # or
$ yarn install
$
$ tns run android --bundle
$ # or
$ tns run ios --bundle

from: Quick Start

then - whilst running - make changes to ./app/components/App.vue: 

<template>
    <Page>
        <ActionBar title="Welcome to NativeScript-Vue!"/>
        <GridLayout columns="*" rows="*">
            <Label class="message" :text="msg" col="0" row="0"/>

        </GridLayout>
    </Page>
</template>

to (html: div): 

<template>
    <Page>
        <ActionBar title="Welcome to NativeScript-Vue!"/>
        <GridLayout columns="*" rows="*">

            <div id="hello"></div>
        </GridLayout>
    </Page>
</template>

or to (typo : Lable instead Label):

<template>
    <Page>
        <ActionBar title="Welcome to NativeScript-Vue!"/>
        <GridLayout columns="*" rows="*">
            <Lable class="message" :text="msg" col="0" row="0"/>

        </GridLayout>
    </Page>
</template>

one will recieve following error:

Webpack compilation complete. Watching for file changes. Webpack build done!

Unable to apply changes on device: emulator-5554. Error is: Nativescript-vue doesn't work without --bundle option. Please specify --bundle option to the command and execute it again..

Upvotes: 1

Related Questions