René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"HMR does not seem to work nativescript-cli 6.4","articleBody":"**Environment**\r\nProvide version numbers for the following components (information can be retrieved by running `tns info` in your project folder or by inspecting the `package.json` of the project):\r\n - CLI: 6.4.0\r\n - Cross-platform modules: 6.4.0\r\n - Android Runtime: 6.4.1\r\n - iOS Runtime: 6.4.1\r\n - Plugin(s): \"nativescript-dev-webpack\": \"^1.5.1-rc-2020-02-25-144616-01\"\r\n - Node.js: 12.18.3\r\n \r\n - [x] Please, attach your package.json and webpack.config.js as these configurations are usually critical for investigating issues with webpack\r\n \r\n\r\n**Describe the bug**\r\nin nativescript CLI v 6.4.  hot module replacement is not working.  I’m on ios 10.15. and I’m using the ’@rc’  nativescript\r\nThe logs indicate that webpack is watching files and waiting for a signal\r\n\r\n\u003e HMR: Hot Module Replacement Enabled. Waiting for signal.\r\n\r\nWhen I make a code change I see this:\r\n\r\n\u003e File change detected. Starting incremental webpack compilation...\r\n\u003e Webpack compilation complete. Watching for file changes.\r\n\u003e Webpack build done!\r\n\r\nHowever, the application doesn’t refresh in the simulator. (edited) \r\n\r\n**To Reproduce**\r\n\r\n1. tns run ios --device \"iPhone 11\"\r\n\r\n1. Make change to any file in the project. E.g. change Label text or component property value.\r\n\r\n**Expected behavior**\r\nThe application restarts inside the ios simulator and the changes are reflected in the UI.\r\n\r\npackage.json\r\n----\r\n```\r\n{\r\n  \"nativescript\": {\r\n    \"id\": \"org.nativescript.konmegoapp\",\r\n    \"tns-android\": {\r\n      \"version\": \"6.4.1\"\r\n    },\r\n    \"tns-ios\": {\r\n      \"version\": \"6.4.0\"\r\n    }\r\n  },\r\n  \"description\": \"NativeScript Application\",\r\n  \"license\": \"SEE LICENSE IN \u003cyour-license-filename\u003e\",\r\n  \"repository\": \"\u003cfill-your-repository-here\u003e\",\r\n  \"dependencies\": {\r\n    \"@vue/devtools\": \"^5.3.3\",\r\n    \"jsonwebtoken\": \"^8.5.1\",\r\n    \"nativescript-iqkeyboardmanager\": \"^1.5.1\",\r\n    \"nativescript-nodeify\": \"^0.8.0\",\r\n    \"nativescript-socketio\": \"^3.3.1\",\r\n    \"nativescript-theme-core\": \"~1.0.6\",\r\n    \"nativescript-toasty\": \"^3.0.0-alpha.2\",\r\n    \"nativescript-ui-dataform\": \"^6.1.0\",\r\n    \"nativescript-ui-listview\": \"^8.1.2\",\r\n    \"nativescript-ui-sidedrawer\": \"^8.0.1\",\r\n    \"nativescript-vue\": \"~2.4.0\",\r\n    \"nativescript-vue-devtools\": \"^1.4.0\",\r\n    \"nativescript-webview-interface\": \"^1.4.3\",\r\n    \"nativescript-webview-utils\": \"^3.0.1\",\r\n    \"rxjs\": \"^6.4.0\",\r\n    \"tns-core-modules\": \"~6.4.0\",\r\n    \"util\": \"^0.10.0\",\r\n    \"vuex\": \"^3.1.1\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@babel/core\": \"~7.1.0\",\r\n    \"@babel/preset-env\": \"~7.1.0\",\r\n    \"babel-loader\": \"~8.0.0\",\r\n    \"nativescript-dev-webpack\": \"^1.5.1-rc-2020-02-25-144616-01\",\r\n    \"nativescript-vue-template-compiler\": \"~2.4.0\",\r\n    \"node-sass\": \"^4.7.1\",\r\n    \"vue-loader\": \"~15.4.0\"\r\n  },\r\n  \"gitHead\": \"42f2a6a9c94eaf9c68d2a41e0daaa1a2544bc28f\",\r\n  \"readme\": \"NativeScript Application\"\r\n}\r\n```\r\nwebpack-config.js\r\n-------\r\n```\r\nconst { join, relative, resolve, sep } = require(\"path\");\r\n\r\nconst webpack = require(\"webpack\");\r\nconst CleanWebpackPlugin = require(\"clean-webpack-plugin\");\r\nconst CopyWebpackPlugin = require(\"copy-webpack-plugin\");\r\nconst { BundleAnalyzerPlugin } = require(\"webpack-bundle-analyzer\");\r\nconst TerserPlugin = require(\"terser-webpack-plugin\");\r\n\r\nconst VueLoaderPlugin = require(\"vue-loader/lib/plugin\");\r\nconst NsVueTemplateCompiler = require(\"nativescript-vue-template-compiler\");\r\n\r\nconst nsWebpack = require(\"nativescript-dev-webpack\");\r\nconst nativescriptTarget = require(\"nativescript-dev-webpack/nativescript-target\");\r\nconst {\r\n    NativeScriptWorkerPlugin\r\n} = require(\"nativescript-worker-loader/NativeScriptWorkerPlugin\");\r\nconst hashSalt = Date.now().toString();\r\n\r\nmodule.exports = env =\u003e {\r\n    // Add your custom Activities, Services and other android app components here.\r\n\r\n    const appComponents = env.appComponents || [];\r\n    appComponents.push(\r\n        ...[\"tns-core-modules/ui/frame\", \"tns-core-modules/ui/frame/activity\"]\r\n    );\r\n\r\n    const platform =\r\n        env \u0026\u0026\r\n        ((env.android \u0026\u0026 \"android\") || (env.ios \u0026\u0026 \"ios\") || env.platform);\r\n    if (!platform) {\r\n        throw new Error(\"You need to provide a target platform!\");\r\n    }\r\n\r\n    const platforms = [\"ios\", \"android\"];\r\n    const projectRoot = __dirname;\r\n\r\n    if (env.platform) {\r\n        platforms.push(env.platform);\r\n    }\r\n\r\n    // Default destination inside platforms/\u003cplatform\u003e/...\r\n    const dist = resolve(\r\n        projectRoot,\r\n        nsWebpack.getAppPath(platform, projectRoot)\r\n    );\r\n\r\n    const {\r\n        // The 'appPath' and 'appResourcesPath' values are fetched from\r\n        // the nsconfig.json configuration file.\r\n        appPath = \"app\",\r\n        appResourcesPath = \"app/App_Resources\",\r\n\r\n        // You can provide the following flags when running 'tns run android|ios'\r\n        snapshot, // --env.snapshot\r\n        production, // --env.production\r\n        report, // --env.report\r\n        hmr, // --env.hmr\r\n        sourceMap, // --env.sourceMap\r\n        hiddenSourceMap, // --env.hiddenSourceMap\r\n        unitTesting, // --env.unitTesting\r\n        verbose, // --env.verbose\r\n        snapshotInDocker, // --env.snapshotInDocker\r\n        skipSnapshotTools, // --env.skipSnapshotTools\r\n        compileSnapshot // --env.compileSnapshot\r\n    } = env;\r\n\r\n    const useLibs = compileSnapshot;\r\n    const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;\r\n    const externals = nsWebpack.getConvertedExternals(env.externals);\r\n\r\n    const mode = production ? \"production\" : \"development\";\r\n\r\n    const appFullPath = resolve(projectRoot, appPath);\r\n    const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({\r\n        projectDir: projectRoot\r\n    });\r\n    let coreModulesPackageName = \"tns-core-modules\";\r\n    const alias = env.alias || {};\r\n    alias[\"~\"] = appFullPath;\r\n    alias[\"@\"] = appFullPath;\r\n    alias[\"vue\"] = \"nativescript-vue\";\r\n\r\n    if (hasRootLevelScopedModules) {\r\n        coreModulesPackageName = \"@nativescript/core\";\r\n        alias[\"tns-core-modules\"] = coreModulesPackageName;\r\n    }\r\n\r\n    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);\r\n\r\n    const entryModule = nsWebpack.getEntryModule(appFullPath, platform);\r\n    const entryPath = `.${sep}${entryModule}`;\r\n    const entries = env.entries || {};\r\n    entries.bundle = entryPath;\r\n\r\n    const areCoreModulesExternal =\r\n        Array.isArray(env.externals) \u0026\u0026\r\n        env.externals.some(e =\u003e e.indexOf(\"tns-core-modules\") \u003e -1);\r\n    if (platform === \"ios\" \u0026\u0026 !areCoreModulesExternal) {\r\n        entries[\"tns_modules/tns-core-modules/inspector_modules\"] =\r\n            \"inspector_modules\";\r\n    }\r\n    console.log(`Bundling application for entryPath ${entryPath}...`);\r\n\r\n    let sourceMapFilename = nsWebpack.getSourceMapFilename(\r\n        hiddenSourceMap,\r\n        __dirname,\r\n        dist\r\n    );\r\n\r\n    const itemsToClean = [`${dist}/**/*`];\r\n    if (platform === \"android\") {\r\n        itemsToClean.push(\r\n            `${join(\r\n                projectRoot,\r\n                \"platforms\",\r\n                \"android\",\r\n                \"app\",\r\n                \"src\",\r\n                \"main\",\r\n                \"assets\",\r\n                \"snapshots\"\r\n            )}`\r\n        );\r\n        itemsToClean.push(\r\n            `${join(\r\n                projectRoot,\r\n                \"platforms\",\r\n                \"android\",\r\n                \"app\",\r\n                \"build\",\r\n                \"configurations\",\r\n                \"nativescript-android-snapshot\"\r\n            )}`\r\n        );\r\n    }\r\n\r\n    nsWebpack.processAppComponents(appComponents, platform);\r\n    const config = {\r\n        mode: mode,\r\n        context: appFullPath,\r\n        externals,\r\n        watchOptions: {\r\n            ignored: [\r\n                appResourcesFullPath,\r\n                // Don't watch hidden files\r\n                \"**/.*\"\r\n            ]\r\n        },\r\n        target: nativescriptTarget,\r\n        // target: nativeScriptVueTarget,\r\n        entry: entries,\r\n        output: {\r\n            pathinfo: false,\r\n            path: dist,\r\n            sourceMapFilename,\r\n            libraryTarget: \"commonjs2\",\r\n            filename: \"[name].js\",\r\n            globalObject: \"global\",\r\n            hashSalt\r\n        },\r\n        resolve: {\r\n            extensions: [\".vue\", \".ts\", \".js\", \".scss\", \".css\"],\r\n            // Resolve {N} system modules from tns-core-modules\r\n            modules: [\r\n                resolve(__dirname, `node_modules/${coreModulesPackageName}`),\r\n                resolve(__dirname, \"node_modules\"),\r\n                `node_modules/${coreModulesPackageName}`,\r\n                \"node_modules\"\r\n            ],\r\n            alias,\r\n            // resolve symlinks to symlinked modules\r\n            symlinks: true\r\n        },\r\n        resolveLoader: {\r\n            // don't resolve symlinks to symlinked loaders\r\n            symlinks: false\r\n        },\r\n        node: {\r\n            // Disable node shims that conflict with NativeScript\r\n            http: false,\r\n            timers: false,\r\n            setImmediate: false,\r\n            fs: \"empty\",\r\n            __dirname: false\r\n        },\r\n        devtool: hiddenSourceMap\r\n            ? \"hidden-source-map\"\r\n            : sourceMap\r\n            ? \"inline-source-map\"\r\n            : \"none\",\r\n        optimization: {\r\n            runtimeChunk: \"single\",\r\n            noEmitOnErrors: true,\r\n            splitChunks: {\r\n                cacheGroups: {\r\n                    vendor: {\r\n                        name: \"vendor\",\r\n                        chunks: \"all\",\r\n                        test: module =\u003e {\r\n                            const moduleName = module.nameForCondition\r\n                                ? module.nameForCondition()\r\n                                : \"\";\r\n                            return (\r\n                                /[\\\\/]node_modules[\\\\/]/.test(moduleName) ||\r\n                                appComponents.some(comp =\u003e comp === moduleName)\r\n                            );\r\n                        },\r\n                        enforce: true\r\n                    }\r\n                }\r\n            },\r\n            minimize: Boolean(production),\r\n            minimizer: [\r\n                new TerserPlugin({\r\n                    parallel: true,\r\n                    cache: true,\r\n                    sourceMap: isAnySourceMapEnabled,\r\n                    terserOptions: {\r\n                        output: {\r\n                            comments: false,\r\n                            semicolons: !isAnySourceMapEnabled\r\n                        },\r\n                        compress: {\r\n                            // The Android SBG has problems parsing the output\r\n                            // when these options are enabled\r\n                            collapse_vars: platform !== \"android\",\r\n                            sequences: platform !== \"android\"\r\n                        },\r\n                        keep_fnames: true\r\n                    }\r\n                })\r\n            ]\r\n        },\r\n        module: {\r\n            rules: [\r\n                {\r\n                    include: [\r\n                        join(appFullPath, entryPath + \".js\"),\r\n                        join(appFullPath, entryPath + \".ts\")\r\n                    ],\r\n                    use: [\r\n                        // Require all Android app components\r\n                        platform === \"android\" \u0026\u0026 {\r\n                            loader:\r\n                                \"nativescript-dev-webpack/android-app-components-loader\",\r\n                            options: { modules: appComponents }\r\n                        },\r\n\r\n                        {\r\n                            loader:\r\n                                \"nativescript-dev-webpack/bundle-config-loader\",\r\n                            options: {\r\n                                registerPages: true, // applicable only for non-angular apps\r\n                                loadCss: !snapshot, // load the application css if in debug mode\r\n                                unitTesting,\r\n                                appFullPath,\r\n                                projectRoot,\r\n                                ignoredFiles: nsWebpack.getUserDefinedEntries(\r\n                                    entries,\r\n                                    platform\r\n                                )\r\n                            }\r\n                        }\r\n                    ].filter(loader =\u003e Boolean(loader))\r\n                },\r\n                {\r\n                    test: /[\\/|\\\\]app\\.css$/,\r\n                    use: [\r\n                        \"nativescript-dev-webpack/style-hot-loader\",\r\n                        {\r\n                            loader: \"nativescript-dev-webpack/css2json-loader\",\r\n                            options: { useForImports: true }\r\n                        }\r\n                    ]\r\n                },\r\n                {\r\n                    test: /[\\/|\\\\]app\\.scss$/,\r\n                    use: [\r\n                        \"nativescript-dev-webpack/style-hot-loader\",\r\n                        {\r\n                            loader: \"nativescript-dev-webpack/css2json-loader\",\r\n                            options: { useForImports: true }\r\n                        },\r\n                        \"sass-loader\"\r\n                    ]\r\n                },\r\n                {\r\n                    test: /\\.css$/,\r\n                    exclude: /[\\/|\\\\]app\\.css$/,\r\n                    use: [\r\n                        \"nativescript-dev-webpack/style-hot-loader\",\r\n                        \"nativescript-dev-webpack/apply-css-loader.js\",\r\n                        { loader: \"css-loader\", options: { url: false } }\r\n                    ]\r\n                },\r\n                {\r\n                    test: /\\.scss$/,\r\n                    exclude: /[\\/|\\\\]app\\.scss$/,\r\n                    use: [\r\n                        \"nativescript-dev-webpack/style-hot-loader\",\r\n                        \"nativescript-dev-webpack/apply-css-loader.js\",\r\n                        { loader: \"css-loader\", options: { url: false } },\r\n                        \"sass-loader\"\r\n                    ]\r\n                },\r\n                {\r\n                    test: /\\.js$/,\r\n                    loader: \"babel-loader\"\r\n                },\r\n                {\r\n                    test: /\\.ts$/,\r\n                    loader: \"ts-loader\",\r\n                    options: {\r\n                        appendTsSuffixTo: [/\\.vue$/],\r\n                        allowTsInNodeModules: true,\r\n                        compilerOptions: {\r\n                            declaration: false\r\n                        }\r\n                    }\r\n                },\r\n                {\r\n                    test: /\\.vue$/,\r\n                    loader: \"vue-loader\",\r\n                    options: {\r\n                        compiler: NsVueTemplateCompiler\r\n                    }\r\n                }\r\n            ]\r\n        },\r\n        plugins: [\r\n            // ... Vue Loader plugin omitted\r\n            // make sure to include the plugin!\r\n            new VueLoaderPlugin(),\r\n            // Define useful constants like TNS_WEBPACK\r\n            new webpack.DefinePlugin({\r\n                \"global.TNS_WEBPACK\": \"true\",\r\n                TNS_ENV: JSON.stringify(mode),\r\n                process: \"global.process\",\r\n                SERVER_ADDRESS: JSON.stringify(env.server_url)\r\n            }),\r\n            // Remove all files from the out dir.\r\n            new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),\r\n            // Copy assets to out dir. Add your own globs as needed.\r\n            new CopyWebpackPlugin(\r\n                [\r\n                    { from: { glob: \"fonts/**\" } },\r\n                    { from: { glob: \"**/*.+(jpg|png)\" } },\r\n                    { from: { glob: \"assets/**/*\" } }\r\n                ],\r\n                { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }\r\n            ),\r\n            new nsWebpack.GenerateNativeScriptEntryPointsPlugin(\"bundle\"),\r\n            // For instructions on how to set up workers with webpack\r\n            // check out https://github.com/nativescript/worker-loader\r\n            new NativeScriptWorkerPlugin(),\r\n            new nsWebpack.PlatformFSPlugin({\r\n                platform,\r\n                platforms\r\n            }),\r\n            // Does IPC communication with the {N} CLI to notify events when running in watch mode.\r\n            new nsWebpack.WatchStateLoggerPlugin()\r\n        ]\r\n    };\r\n\r\n    if (unitTesting) {\r\n        config.module.rules.push(\r\n            {\r\n                test: /-page\\.js$/,\r\n                use: \"nativescript-dev-webpack/script-hot-loader\"\r\n            },\r\n            {\r\n                test: /\\.(html|xml)$/,\r\n                use: \"nativescript-dev-webpack/markup-hot-loader\"\r\n            },\r\n\r\n            {\r\n                test: /\\.(html|xml)$/,\r\n                use: \"nativescript-dev-webpack/xml-namespace-loader\"\r\n            }\r\n        );\r\n    }\r\n\r\n    if (report) {\r\n        // Generate report files for bundles content\r\n        config.plugins.push(\r\n            new BundleAnalyzerPlugin({\r\n                analyzerMode: \"static\",\r\n                openAnalyzer: false,\r\n                generateStatsFile: true,\r\n                reportFilename: resolve(projectRoot, \"report\", `report.html`),\r\n                statsFilename: resolve(projectRoot, \"report\", `stats.json`)\r\n            })\r\n        );\r\n    }\r\n\r\n    if (snapshot) {\r\n        config.plugins.push(\r\n            new nsWebpack.NativeScriptSnapshotPlugin({\r\n                chunk: \"vendor\",\r\n                requireModules: [\"tns-core-modules/bundle-entry-points\"],\r\n                projectRoot,\r\n                webpackConfig: config,\r\n                snapshotInDocker,\r\n                skipSnapshotTools,\r\n                useLibs\r\n            })\r\n        );\r\n    }\r\n\r\n    if (hmr) {\r\n        config.plugins.push(new webpack.HotModuleReplacementPlugin());\r\n    }\r\n\r\n    return config;\r\n};\r\n```\r\n\r\n","author":{"url":"https://github.com/hraynaud","@type":"Person","name":"hraynaud"},"datePublished":"2020-08-16T04:42:43.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/1145/nativescript-dev-webpack/issues/1145"}