Clean install: HMR broken!

vpiskunov commented 5 years ago

When creating a new project, using Vue CLI 3, both in CLI and UI mode. Then adding vue-cli-plugin-nativescript-vue.

HMR simply keeps reloading the whole app & relaunching.

File change detected. Starting incremental webpack compilation...
....webpack compilation details here....
Webpack compilation complete. Watching for file changes.
Webpack build done!
Preparing project...
Project successfully prepared (iOS)
Successfully transferred bundle.js on device C023E95A-72B0-46B7-AD24-4B7480318E72.
Restarting application on device C023E95A-72B0-46B7-AD24-4B7480318E72...
Successfully synced application org.nativescript.application on device C023E95A-72B0-46B7-AD24-4B7480318E72.

When adding useLegacyWorkflow: false in nsconfig.json it then loads changes but those don’t get applied until force-quitting the app on device & opening again?

Tried running:

tns run ios using default webpack
npm run debug:ios
npm run serve:ios
a custom option using npm run setup-webpack-config && tns run ios --hmr --env.development

This does not happen when setting up a new project using nativescript-vue/vue-cli-template, in which case HMR is perfect.

jawa-the-hutt commented 5 years ago

I've added a commit to the dev branch that will hopefully address this.

Create a new vue project as normal and then install and invoke like this to test this out: npm install git+https://github.com/nativescript-vue/vue-cli-plugin-nativescript-vue/tree/dev npm invoke vue-cli-plugin-nativescript-vue

Once we have some validation HMR appears to be working, i'll push to master and update the npm package.

vpiskunov commented 5 years ago

The command to test had incorrect URL to git/branch, and its vue invoke instead of npm invoke. To test use the following: npm install git+https://github.com/nativescript-vue/vue-cli-plugin-nativescript-vue.git#dev vue invoke vue-cli-plugin-nativescript-vue

For anyone using this patch for the issue, if run into this: TypeError: nsWebpack.getSourceMapFilename is not a function It's due to other dependencies upgraded: vue-cli & cli-plugin-babel & cli-plugin-eslint. Try it on a new, clean project.

vpiskunov commented 5 years ago

Amazing! It worked on the clean project.

Another issue - possibly related - after installing the plugin, HMR is also broken on serve:web - due to the plugin installing an addition dependency webpack instance.

Symptoms:

[HMR] Waiting for update signal from WDS...
[HMR] Waiting for update signal from WDS...

& Page reload +RangeError on update:

Uncaught RangeError: Maximum call stack size exceeded
at hotAddUpdateChunk (VM4024 app.js:979)
at webpackHotUpdateCallback...

I've found the workaround, which is to create project, install plugin & then:

npm rm @vue/cli-service
npm i --save-dev @vue/cli-service

Perhaps it's a simple fix, by ensuring the plugin doesn't add a separate webpack dep in package.json? I'm just guessing, but think there's the assumption of webpack being already installed when project requires vue-cli.

jawa-the-hutt commented 5 years ago

Glad you got it mostly working. Sorry about giving you the incorrect link for the install. That's what get for trying to do it from my phone.

I'm not sure about why webpack would be doing that. We have webpack as a dev dependency of the plugin so it shouldn't be installing a second copy of it as far as I know.

Can you show me what you have globally installed: npm list -g --depth=0

vpiskunov commented 5 years ago

Global npm list:

├── @vue/cli@3.7.0
├── @vue/cli-init@3.7.0
├── babel-eslint@8.2.3
├── basys-cli@0.4.0
├── eslint@4.19.1
├── eslint-config-airbnb-base@12.1.0
├── eslint-config-standard@11.0.0
├── eslint-plugin-html@4.0.3
├── eslint-plugin-import@2.9.0
├── eslint-plugin-node@6.0.1
├── eslint-plugin-promise@3.7.0
├── eslint-plugin-standard@3.0.1
├── forever@0.15.3
├── ganache-cli@6.1.8
├── jshint@2.9.5
├── nativescript@5.4.0
├── node-gyp@3.6.2
├── npm@6.4.1
├── sails@1.0.1
├── supervisor@0.12.0
├── tns-platform-declarations@5.3.1
└── total.js@2.9.4

Though I think what's relevant is npm list inside project:

npm ls webpack
├─┬ @vue/cli-plugin-babel@3.8.0
│ └── webpack@4.28.4
├─┬ @vue/cli-plugin-eslint@3.8.0
│ └── webpack@4.28.4
├─┬ @vue/cli-service@3.8.0
│ └── webpack@4.28.4
├─┬ nativescript-dev-webpack@0.22.0
│ └── webpack@4.27.1
└── webpack@4.32.2

vpiskunov commented 5 years ago

Actually the workaround is not just reinstalling @vue/cli-service, but also webpack:

npm rm webpack
npm i --save-dev webpack@4.28.4
npm rm @vue/cli-service
npm i --save-dev @vue/cli-service

Notice webpack uses webpack@4.28.4 - important to fix the issue.

Without the version specified, the issue persists.

During the installation, plugin adds following to package.json: "webpack": "^4.29.6",

Which causes it to install @4.32.2. Before adding the plugin, there is no direct dependency in package.json (it's installed in vue/cli-service as a dep, using the @4.28.4)

After re-installing webpack & cli-service(sequence is important), npm ls webpack looks like this:

├─┬ @vue/cli-plugin-babel@3.8.0
│ └── webpack@4.28.4
├─┬ @vue/cli-plugin-eslint@3.8.0
│ └── webpack@4.28.4
├─┬ @vue/cli-service@3.8.0
│ └── webpack@4.28.4  deduped
├─┬ nativescript-dev-webpack@0.22.0
│ └── webpack@4.27.1
└── webpack@4.28.4

Notice the deduped

jawa-the-hutt commented 5 years ago

I was able to reproduce the issue and solve it via your method. Thanks for troubleshooting it and giving me a direction for a fix. However, probably not the best thing to have everyone need to do for each new project.

I've updated dev and I've pinned webpack to 4.28.4. I think this should fix the issue for new projects. Feel free to test out and confirm.

I think the underlying issue may be a webpack-dev-server or vue-hot-reload-api bug where it's not detecting the multiple webpack dependency versions that might happen in a project and the HMR is getting confused.

Long term what this means is that this project will need to try and make sure the version of webpack being included as a dev-dependency matches what the vue-cli is currently pinned to.

vpiskunov commented 5 years ago

Perhaps there might be a way to set the version, by first running a hook (pre-install or something?) to detect current vue-cli's webpack version?

this project will need to try and make sure the version of webpack being included as a dev-dependency matches what the vue-cli is currently pinned to.

Will test on #dev and let you know

vpiskunov commented 5 years ago

For some reason npm run serve:web spat out this:

 ERROR  Failed to compile with 1 errors3:37:57 PM

 error  in ./src/main.js

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/canwego/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at /Users/vpiskunov/code/nativescript/canwego/node_modules/@vue/cli-service/lib/Service.js:80:7

That was when it ran from Vue UI. Not sure what caused it. First running serve:web was fine, but if ran serve:ios first, then this was triggered.

Tried adding --env.development --env.web to the serve:web command in package.json. Running from UI, still had that error. Then tried from CLI, error vanished. Then removed --env.development --env.web back from the serve:web and it's still working in CLI.

UI works too after refresh. No clues so far.

vpiskunov commented 5 years ago

Another thing - on the webpack dependency resolution, I'm suspecting the dual instance may occur as this plugin adds webpack to the project package.json, rather than it's own (node_modules/vue-cli-plugin-nativescript-vue/package.json).

Perhaps moving the dep inside might help?

jawa-the-hutt commented 5 years ago

I cannot reproduce the UI issue. However, I do know that with the UI, it will sometimes mess with the parameters being passed to the CLI behind the scenes. What you can do is tell the UI to not set the environment based on what it thinks it should be, but instead, to follow what's explicitly set in the npm script.

To do this:

Click the Parameters button next to the Run Task button.
In Specify env mode dropdown, choose (unset)
Click Save

All that said, I just pushed a commit to dev to move the webpack dependency out of the generated project and into the devDependencies of the plugin itself. Let's see if this is works as you suggested in your most recent comment.

vpiskunov commented 5 years ago

Same error keeps (UI bug)

Seems it's running vue-cli-service serve --mode development.web --dashboard - this is the same, even after I've used the (unset) in the dropdown.

Here's a full log:

$ vue-cli-service serve --mode development.web --dashboard
starting webConfig

 INFO  Starting development server...

clean-webpack-plugin: /Users/vpiskunov/code/nativescript/test-plugin-patch-dev/dist/**/* has been removed.

 12% building 20/22 modules 2 active ...server/node_modules/strip-ansi/index.jsError resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)

Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)
Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)
Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)
Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)
Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)
Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)
Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)
Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)
Error resolving webpackConfig Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)

 87% record chunks RecordIdsPlugin ERROR  Failed to compile with 1 errors4:11:45 PM

 error  in ./src/main.js

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: You need to provide a target platform!
    at module.exports (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/vue-cli-plugin-nativescript-vue/index.js:116:11)
    at plugins.forEach (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:80:7)
    at Array.forEach (<anonymous>)
    at Service.init (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/lib/Service.js:79:18)
    at Object.<anonymous> (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/@vue/cli-service/webpack.config.js:9:11)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.exports.resolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-import-resolver-webpack/index.js:69:27)
    at v2 (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/vpiskunov/code/nativescript/test-plugin-patch-dev/node_modules/eslint-module-utils/resolve.js:116:22)

 @ multi (webpack)-dev-server/client?http://192.168.1.34:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main

vpiskunov commented 5 years ago

But the HMR seems fixed(web)! no double message [HMR] and modules seem to reload correctly!

Hopefully last thing: eslint is angry on ~ being used in paths like import App from '~/App.vue' .

It's fine when @ is used, but `Unable to resolve path to module (import/no-unresolved. Perhaps it's a separate issue, but I'm guessing there is some quick-fix you're using?

After installing latest #dev:
npm ls webpack
test-plugin-patch-dev@0.1.0 /Users/vpiskunov/code/nativescript/test-plugin-patch-dev
├─┬ @vue/cli-plugin-babel@3.8.0
│ └── webpack@4.28.4
├─┬ @vue/cli-plugin-eslint@3.8.0
│ └── webpack@4.28.4  deduped
├─┬ @vue/cli-service@3.8.0
│ └── webpack@4.28.4  deduped
└─┬ nativescript-dev-webpack@0.22.0
  └── webpack@4.27.1

vpiskunov commented 5 years ago

Ok, I went digging down the UI bug rabbit-hole.

The issue seems to be from the linter. Due to vue project's default settings of "lint on save", it runs the linter in any case where it starts the server, or a file has changed.

It's weird that it works sometimes - I'd be guessing there is a few invocation mechanisms for the linter.

Looking at package.json, npm run lint would call vue-cli-service lint without any options/env.

When I ran it directly npx vue-cli-service lint, it failed in the same style:

But when running npx vue-cli-service lint --mode development.web, it works fine.

I've just amended the lint option in package.json - works so far. Will re-confirm soon. If this is it, perhaps we need to add this to generator, to have "lint": "vue-cli-service lint --mode development.web" in package.json

jawa-the-hutt commented 5 years ago

The webpackConfig error above is being generated from here: https://github.com/nativescript-vue/vue-cli-plugin-nativescript-vue/blob/1fbbfe4bc00507002b864b3f9c60fad41ed56756/index.js#L116

What that tells me is that for some reason for you, the UI is interfering with the env variable in some way. It's not happening to me, so there is something in your setup that I haven't accounted for when trying to parse out env.

I had just uncommented that error check out in the dev branch only as I thought things had been fixed that were previously causing this to fail. That error check is in the nativescript-dev-webpack project's Vue template so that is why I left it in. Long term, i'd like to have it there, but short term, I can comment it back out so that it's doesn't trip you up.

However, the better long term solution is to try and figure out why it's causing you an issue. Let me know if you are willing to continue to troubleshoot why it's failing that error check and I'll give you some guidance on what you can do to help me troubleshoot without you having to create a new project and install the dev branch everytime.

vpiskunov commented 5 years ago

Sure, I can help figure this out. Let me know what the flow is - and yes, I have like 8 repos already from fresh installs ;)

The issue didn’t happen every time - it seems to have been intermittent, but latest project was giving the error every time.

It’s weird, as whenever it happened from UI-launched serve:web, if I tried running from CLI, no error and works every time.

I’ve already tried enabling the option “Override hard coded arguments” in the UI. Yet I got a feeling as if that didn’t quite change anything.

Changing lint command in package.json seems to have worked though - at least in my testing.

I don’t think disabling the check is the best option - let’s not do that for the time being. If it’s being tripped - then seems the env is not passed around where it should be & so it might end up silently breaking another part of the deploy/flow.

vpiskunov commented 5 years ago

Do you have any suggestion on the ~ imports?

See comment above: https://github.com/nativescript-vue/vue-cli-plugin-nativescript-vue/issues/16#issuecomment-497713708

jawa-the-hutt commented 5 years ago

ok....i'm going to make one more commit to dev that includes some added console logging that will hopefully help us understand they the env variable seems to be having an issue. I've also changed one of the if statements a bit to be more accurate in terms of what's really be checked for.

after this commit, we can continue further troubleshooting by directly editing the plugin inside of node_modules.

As for the ~ imports. I'm not sure why it's being caught. However, ~ and @ are essentially the same thing from a pathing perspective. We've aliased them to ./src or ./app depending on if it's a code-sharing project or not.

So, if you want to change all of the ~ to @ for imports, then that should in theory work. I'm beginning to wonder if the fact you have eslint and associated plugins installed globally is interfering with something in the project itself. I don't have eslint installed globally and just go with the local copy of eslint and associated plugins that vue-cli puts in.

vpiskunov commented 5 years ago

I know the ~ & @ should resolve to the same paths, but after looking into vue’s webpack config(under node_modules), I only found it has the @ alias defined, but not ~.

To see it, do a search in all files under node_modules/@vue for '@, as can’t remember the exact file.

Your guess about global ESLint being in the way could be going the right way, but I’ve tested switching between global & local (in Atom’s linter-eslint settings menu), and it gave same results.

I did previously have an issue with it using global(without me realising), and the global eslint was outdated, causing random rule not defined etc. Now that seems to be solved.

I could just replace all the ~ to @‘s, but don’t understand what’s causing the behaviour.

This also happens both in Atom & VScode, so not editor/linter specific.

On previous versions of the package(e.g. non-dev branch) adding:

"settings": {
        "import/resolver": {
            "webpack": {
                "config": require.resolve('@vue/cli-service/webpack.config.js')
            }
        }
    }

Was enough to fix this. Doesn’t work now however, and also I’ve tried through adding to vue.config.js:

configureWebpack: {
    resolve: {
      alias: {
        '~': path.resolve(__dirname, 'src/'),
      },
    },
  },

Ah man, can’t wait to have no issues on tooling.. running behind schedule with all these getting in the way 😬

I’ll pull your latest commit in the morning and give it a spin, thanks for looking into this!

vpiskunov commented 5 years ago

Ok, so it gave the error straight after install in clean project. Log in the gist: https://gist.github.com/vpiskunov/10b24561ae7947289c8216ab4d76df21

The env is first populated / normal in vue cli - flags -, but empty / undefined at

tns cli - flags -  []
env -  {}
platform -  undefined

edit: added a log from a similar error, but different checks triggered, if running with "override hard coded args"=true & env mode = development (set in UI ->parameters) https://gist.github.com/vpiskunov/10b24561ae7947289c8216ab4d76df21#file-log-with-override-hard-coded-arguments-env-mode-development

2nd edit after that, I ran npm run serve:web in terminal, it ran normally, with lint warnings. Then, after that successful run, in UI it also ran successfully, with this output:

$ vue-cli-service serve --mode development.web --dashboard
api.service.mode -  development.web

vue cli - flags -  [ 'development', 'web' ]
env -  { development: true, web: true }
platform -  web
starting webConfig
 INFO  Starting development server...

clean-webpack-plugin: /Users/vpiskunov/code/nativescript/test-plugin-debug/dist/**/* has been removed.

 95% emitting DONE  Compiled successfully in 3111ms1:18:25 PM                     

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.34:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Checked on git, no changes apart from webpack.config.js, as I ran setup-webpack-config before doing all of the above. Even reverting/discarding webpack.config.js changes, it still runs without errors in UI now.

Seems as if the command from UI doesn't run some kind of init script inside the package, but CLI npm run does.

Thinking of running diff on the plugin inside node_modules - let me know what the best way is

So diff gave nothing:

diff node_modules/vue-cli-plugin-nativescript-vue/ ../test-plugin-debug/node_modules/vue-cli-plugin-nativescript-vue/
Common subdirectories: node_modules/vue-cli-plugin-nativescript-vue/generator and ../test-plugin-debug/node_modules/vue-cli-plugin-nativescript-vue/generator
Common subdirectories: node_modules/vue-cli-plugin-nativescript-vue/lib and ../test-plugin-debug/node_modules/vue-cli-plugin-nativescript-vue/lib
Common subdirectories: node_modules/vue-cli-plugin-nativescript-vue/node_modules and ../test-plugin-debug/node_modules/vue-cli-plugin-nativescript-vue/node_modules
diff node_modules/vue-cli-plugin-nativescript-vue/package.json ../test-plugin-debug/node_modules/vue-cli-plugin-nativescript-vue/package.json
26c26
<   "_where": "/Users/vpiskunov/code/nativescript/test-plugin-diff",
---
>   "_where": "/Users/vpiskunov/code/nativescript/test-plugin-debug",

vpiskunov commented 5 years ago

diff on full project gave only node_modules/.cache changed.

So... the cache files are to blame. When running a clean project, the cache directory is only containing eslint-loader which is empty.

This is the state both after installing the plugin, as well as after running serve:web from UI and it erroring out on provide a target platform.

I then ran the project from command line - it ran successfully, at which point a diff of that project & it's cloned directory pre-successful-run, gave the following diff:

diff --recursive test-plugin-diff test-plugin-diff-pre-run/
Only in test-plugin-diff/node_modules/.cache: babel-loader
Only in test-plugin-diff/node_modules/.cache/eslint-loader: 189519d40df8d8b562f6a62e691e5087f18b1e52.json.gz
Only in test-plugin-diff/node_modules/.cache/eslint-loader: 43b99531851d67662fd0f64ab192114d6cb51f2e.json.gz
Only in test-plugin-diff/node_modules/.cache/eslint-loader: 49916036c69b6b22fd1801222d3a04c0f606e9aa.json.gz
Only in test-plugin-diff/node_modules/.cache/eslint-loader: 4cd258c825f2d13a6dc06df50dc792a4f3bcfb37.json.gz
Only in test-plugin-diff/node_modules/.cache/eslint-loader: dee39e11e5227e8f8355697947c90aaf5553cf8a.json.gz
Only in test-plugin-diff/node_modules/.cache/eslint-loader: e017093038ad96ea1b0d6447fd9f6c0e9418f252.json.gz
Only in test-plugin-diff/node_modules/.cache/eslint-loader: ea082e9f0a7b79a4575d7603c127b630f2bfe343.json.gz
Only in test-plugin-diff/node_modules/.cache: vue-loader

I had then verified, that deleting those cache files, has made the UI-run produce the error again.

Removing any single directory in .cache does not trigger the error. Removing eslint-loader + babel-loader triggers a full/fatal error. Removing eslint-loader + vue-loader triggers the error, but then it ends running successfully: https://gist.github.com/vpiskunov/10b24561ae7947289c8216ab4d76df21#file-removing-eslint-vue-loaders-cache

Also, I've verified this is not related to a global eslint installation - as I removed eslint along with all eslint-related packages globally

jawa-the-hutt commented 5 years ago

Well...I just have not been able to reproduce this. I've tried on almost a dozen different test projects while using different versions of node, npm, nativescript, etc. I've tried deleting the folders in .cache as you mention and it runs from the UI everytime, first time without a problem.

i don't know why it's doing what it's doing for you. However, because you do have a workaround where you can run it from the cli first, i'm going to let this issue sit open and we'll see if others end up having the same sort of issues as you.

I'm going to take the additional logging back out of the dev branch and then move it to production as version 0.0.16.

EDIT: Taking the project to 0.1.0

vpiskunov commented 5 years ago

Sure, lets do that.

Food for thought: https://github.com/vuejs/vue-cli/issues/1128#issuecomment-438123411 seems related, though no fix

jawa-the-hutt commented 5 years ago

I did fix an env issue that I pushed in 0.1.2 yesterday where for native projects it wasn't reading all the environmental variables correctly when -- --hmr was being added.

I found that my .env.development.android wasn't being included in my build. Spent 2 hours trying to troubleshoot why all of a sudden I couldn't connect to any of my API's and come to find out it was because the URLs defined in that file were all coming up undefined

Not sure if that will help or not with the initial UI serve or not, but you can try it out and see.

vpiskunov commented 5 years ago

Nope, didn't change anything. I've also just tried by copying .env.development.web file to .env - as that should always be loaded, no matter what environment is set during the run, and then overwritten by specific .env.[mode] from --mode option. Didn't work too.

Also tried adding this to vue.config.js, which is another way to add .env variables (allows for computed values, as per Vue CLI docs here)

process.env.NODE_ENV = 'development';
process.env.VUE_APP_PLATFORM = 'web';
process.env.VUE_APP_MODE = 'web';

module.exports = {
  // config
};

No luck either.

vpiskunov commented 5 years ago

Fixed in #24 - setting platform = 'web' if after all methods of retrieving platform is still not set.

This takes on the assumption that npm run serve:ios & npm run serve:android etc (NS-based) commands always set the .env platform variables correctly - which they do, as otherwise I'd be getting same error on those - but I don't

alexandersix commented 5 years ago

Fixed in #24 - setting platform = 'web' if after all methods of retrieving platform is still not set.

This takes on the assumption that npm run serve:ios & npm run serve:android etc (NS-based) commands always set the .env platform variables correctly - which they do, as otherwise I'd be getting same error on those - but I don't

@vpiskunov Any word on when this fix will be implemented? Definitely not trying to rush you, but we're looking at using this plugin for a project at work and we're bumping into this issue, so I just want to see if this is something we can use at this time or in the near future.

Again, I'm sure you have other things to do, so if this is still going to take a bit or the solution isn't quite there, absolutely no worries!

jawa-the-hutt commented 5 years ago

I've just released 0.2.0 of the plugin to npm. This includes NS 6.1.0 and NS-Vue 2.4.0. It also includes PR #24 that addressed the platform setting.

Try it again and let me know if this addresses things.

jawa-the-hutt commented 5 years ago

So...my mistake. I somehow inadvertently didn't get PR 24 into 0.2.0. Issue with my local copy of the plugin. I've added it back and have released 0.2.1

vpiskunov commented 5 years ago

Hey @AlexanderSix Have you tried the workaround described by running npm run serve:iOS from the terminal instead of using the Vue UI?

If that works, you only have to do it from terminal sometimes, when getting the error, as after that it works from UI too.

Let me know

nativescript-vue / vue-cli-plugin-nativescript-vue

Clean install: HMR broken! #16