This repository was archived by the owner on Aug 7, 2021. It is now read-only.
Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork40
This repository was archived by the owner on Aug 7, 2021. It is now read-only.
[Vue] HMR restarts the application when modifying the Typescript code #939
Open
Labels
Description
Environment
- CLI: 5.4.0
- Cross-platform modules:
- Android Runtime: 5.4.0
- Plugin(s): Nantivescript-vue@2.2.2
- Node.js: 11.4.0
My package.json
{"name":"ns-vue-test","version":"1.0.0","description":"A native application built with NativeScript-Vue","license":"MIT","nativescript": {"id":"org.nativescript.application","tns-ios": {"version":"5.0.0" },"tns-android": {"version":"5.4.0" } },"dependencies": {"nativescript-vue":"^2.2.2","tns-core-modules":"^5.4.2" },"devDependencies": {"@babel/core":"^7.0.0","@babel/preset-env":"^7.0.0","babel-loader":"^8.0.2","babel-traverse":"6.26.0","babel-types":"6.26.0","babylon":"6.18.0","clean-webpack-plugin":"^0.1.19","copy-webpack-plugin":"^4.5.2","css-loader":"^1.0.0","lazy":"1.0.11","nativescript-dev-webpack":"next","nativescript-vue-template-compiler":"^2.0.0","nativescript-worker-loader":"~0.9.0","node-sass":"^4.9.2","sass-loader":"^7.1.0","terser-webpack-plugin":"^1.1.0","tns-platform-declarations":"^5.1.2","typescript":"^3.2.4","vue":"^2.5.22","vue-loader":"^15.2.6","webpack":"^4.16.4","webpack-bundle-analyzer":"~2.13.1","webpack-cli":"^3.1.0" }}
My webpack.config
const{ relative, resolve, sep}=require("path");constwebpack=require("webpack");constCleanWebpackPlugin=require("clean-webpack-plugin");constCopyWebpackPlugin=require("copy-webpack-plugin");const{ BundleAnalyzerPlugin}=require("webpack-bundle-analyzer");constTerserPlugin=require('terser-webpack-plugin');constVueLoaderPlugin=require('vue-loader/lib/plugin');constNsVueTemplateCompiler=require("nativescript-vue-template-compiler");constnsWebpack=require("nativescript-dev-webpack");constnativescriptTarget=require("nativescript-dev-webpack/nativescript-target");const{ NativeScriptWorkerPlugin}=require("nativescript-worker-loader/NativeScriptWorkerPlugin");module.exports=env=>{// Add your custom Activities, Services and other android app components here.constappComponents=["tns-core-modules/ui/frame","tns-core-modules/ui/frame/activity",];constplatform=env&&(env.android&&"android"||env.ios&&"ios");if(!platform){thrownewError("You need to provide a target platform!");}constplatforms=["ios","android"];constprojectRoot=__dirname;// Default destination inside platforms/<platform>/...constdist=resolve(projectRoot,nsWebpack.getAppPath(platform,projectRoot));constappResourcesPlatformDir=platform==="android" ?"Android" :"iOS";const{// The 'appPath' and 'appResourcesPath' values are fetched from// the nsconfig.json configuration file// when bundling with `tns run android|ios --bundle`. appPath="app", appResourcesPath="app/App_Resources",// You can provide the following flags when running 'tns run android|ios' snapshot,// --env.snapshot production,// --env.production report,// --env.report hmr,// --env.hmr}=env;constexternals=(env.externals||[]).map((e)=>{// --env.externalsreturnnewRegExp(e+".*");});constmode=production ?"production" :"development"constappFullPath=resolve(projectRoot,appPath);constappResourcesFullPath=resolve(projectRoot,appResourcesPath);constentryModule=nsWebpack.getEntryModule(appFullPath);constentryPath=`.${sep}${entryModule}.ts`;console.log(`Bundling application for entryPath${entryPath}...`);constconfig={mode:mode,context:appFullPath, externals,watchOptions:{ignored:[appResourcesFullPath,// Don't watch hidden files"**/.*",],},target:nativescriptTarget,// target: nativeScriptVueTarget,entry:{bundle:entryPath,},output:{pathinfo:false,path:dist,libraryTarget:"commonjs2",filename:"[name].js",globalObject:"global",},resolve:{extensions:[".vue",".js",".ts",".scss",".css"],// Resolve {N} system modules from tns-core-modulesmodules:[resolve(__dirname,"node_modules/tns-core-modules"),resolve(__dirname,"node_modules"),"node_modules/tns-core-modules","node_modules",],alias:{'~':appFullPath,'@':appFullPath,'vue$':'nativescript-vue'},// don't resolve symlinks to symlinked modulessymlinks:false,},resolveLoader:{// don't resolve symlinks to symlinked loaderssymlinks:false,},node:{// Disable node shims that conflict with NativeScript"http":false,"timers":false,"setImmediate":false,"fs":"empty","__dirname":false,},devtool:"none",optimization:{splitChunks:{cacheGroups:{vendor:{name:"vendor",chunks:"all",test:(module)=>{constmoduleName=module.nameForCondition ?module.nameForCondition() :'';return/[\\/]node_modules[\\/]/.test(moduleName)||appComponents.some(comp=>comp===moduleName);},enforce:true,},},},minimize:Boolean(production),minimizer:[newTerserPlugin({parallel:true,cache:true,terserOptions:{output:{comments:false,},compress:{// The Android SBG has problems parsing the output// when these options are enabled'collapse_vars':platform!=="android",sequences:platform!=="android",},safari10:platform==="ios",keep_fnames:true,},}),],},module:{rules:[{test:newRegExp(entryPath),use:[// Require all Android app componentsplatform==="android"&&{loader:"nativescript-dev-webpack/android-app-components-loader",options:{modules:appComponents},},{loader:"nativescript-dev-webpack/bundle-config-loader",options:{registerPages:true,// applicable only for non-angular appsloadCss:!snapshot,// load the application css if in debug mode},},].filter(loader=>Boolean(loader)),},{test:/\.css$/,use:['nativescript-dev-webpack/style-hot-loader','nativescript-dev-webpack/apply-css-loader.js',{loader:"css-loader",options:{minimize:false,url:false}},],},{test:/\.scss$/,use:['nativescript-dev-webpack/style-hot-loader','nativescript-dev-webpack/apply-css-loader.js',{loader:"css-loader",options:{minimize:false,url:false}},"sass-loader",],},{test:/\.ts$/,exclude:/node_modules|vue\/src/,loader:'ts-loader',options:{appendTsSuffixTo:[/\.vue$/],allowTsInNodeModules:true,},},{test:/\.js$/,loader:'babel-loader',},{test:/\.vue$/,loader:"vue-loader",options:{compiler:NsVueTemplateCompiler,},},],},plugins:[// ... Vue Loader plugin omitted// make sure to include the plugin!newVueLoaderPlugin(),// Define useful constants like TNS_WEBPACKnewwebpack.DefinePlugin({"global.TNS_WEBPACK":"true","TNS_ENV":JSON.stringify(mode)}),// Remove all files from the out dir.newCleanWebpackPlugin([`${dist}/**/*`]),// Copy native app resources to out dir.newCopyWebpackPlugin([{from:`${appResourcesFullPath}/${appResourcesPlatformDir}`,to:`${dist}/App_Resources/${appResourcesPlatformDir}`,context:projectRoot,}]),// Copy assets to out dir. Add your own globs as needed.newCopyWebpackPlugin([{from:"fonts/**"},{from:"**/*.+(jpg|png)"},{from:"assets/**/*"},],{ignore:[`${relative(appPath,appResourcesFullPath)}/**`]}),// Generate a bundle starter script and activate it in package.jsonnewnsWebpack.GenerateBundleStarterPlugin(["./vendor","./bundle",]),// For instructions on how to set up workers with webpack// check out https://github.com/nativescript/worker-loadernewNativeScriptWorkerPlugin(),newnsWebpack.PlatformFSPlugin({ platform, platforms,}),// Does IPC communication with the {N} CLI to notify events when running in watch mode.newnsWebpack.WatchStateLoggerPlugin(),],};if(report){// Generate report files for bundles contentconfig.plugins.push(newBundleAnalyzerPlugin({analyzerMode:"static",openAnalyzer:false,generateStatsFile:true,reportFilename:resolve(projectRoot,"report",`report.html`),statsFilename:resolve(projectRoot,"report",`stats.json`),}));}if(snapshot){config.plugins.push(newnsWebpack.NativeScriptSnapshotPlugin({chunk:"vendor",requireModules:["tns-core-modules/bundle-entry-points",], projectRoot,webpackConfig:config,}));}if(hmr){config.plugins.push(newwebpack.HotModuleReplacementPlugin());}returnconfig;};
Describe the bug
When adding a simple class to a Label to your label, with the HMR enabled to App is upgrade, but is known. With javascript this problem does not happen.
To Reproduce
1- Create a new NativeScript vue with TypeScriptvue init nativescript-vue/vue-cli-template <project-name>
2- Add a new Label, after reloading App, change the label text, or add a new class on the Label
Actual behavior
The changes are applied but the App is Restarted.
Expected behavior
The app should not restart.
Sample project
The official NativeScript Vue template with TypeScript
Additional context
File change detected. Starting incremental webpack compilation...Hash: 502692cd43a6705c18e8Version: webpack 4.34.0Time: 7425msBuilt at: 2019-06-13 22:33:27 Asset Size Chunks Chunk Namesbundle.js 22.1 KiB bundle [emitted] bundle + 1 hidden assetEntrypoint bundle = vendor.js bundle.js[./ sync ^\.\/app\.(css|scss|less|sass)$]. sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 175 bytes {bundle} [built][./ sync recursive (root|page)\.(xml|css|js|ts|scss)$]. sync (root|page)\.(xml|css|js|ts|scss)$ 160 bytes {bundle} [built][./main.ts] 1.83 KiB {bundle} [built] + 167 hidden modulesWebpack compilation complete. Watchingfor file changes.Webpack build done!Preparing project...Project successfully prepared (Android)Successfully transferred bundle.js on device ad3bd891.Restarting application on device ad3bd891...Successfully synced application org.nativescript.application on device ad3bd891.