Unable to run using --bundle - Module 'ui/label' not found for element 'Label'

[thaoula]

Issue Checklist

• You are submitting:
• You verified that this is a real problem by searching the NativeScript Forum and the other issues in this repo.
• You checked our demo apps and the documentation for sample usage.

Tell us about the problem

We are starting our up using tns run ios --bundle.
Upon startup, our login page appears. Then once logged, we try to load a lazy loaded module with the user data. However, the app crashes with the following error

file:///app/vendor.js:141210:56: JS ERROR Error: Parsing XML at 1:1

Module 'ui/label' not found for element 'Label'.
Could not find module 'ui/label'. Computed path [emulatorpath]/mobile.app/app/tns_modules/ui/label

When i look in the bundle, I cannot see tns_module folder in the app folder.

When running without --bundle we can run the app fine.

Local environment

• Platform Mac
• Node version 10
• NativeScript CLI version 4.1.0

Project data

• Platform you are building the app for iOS
• Node dependencies:

<!-- Provide the content of your package.json. -->
"nativescript": {
    "id": "au.com.logicsoftware.jms",
    "tns-ios": {
      "version": "4.1.0"
    }
  },
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@ngrx/effects": "^6.0.0",
    "@ngrx/router-store": "^6.0.0",
    "@ngrx/store": "^6.0.0",
    "base64-js": "^1.2.3",
    "deepmerge": "^2.1.0",
    "jwt-decode": "^2.2.0",
    "linq": "^3.0.9",
    "moment": "^2.20.1",
    "nativescript-angular": "^6.0.0",
    "nativescript-camera": "4.0.2",
    "nativescript-directions": "^1.2.0",
    "nativescript-drawingpad": "3.0.3",
    "nativescript-geolocation": "4.2.6",
    "nativescript-google-maps-sdk": "2.6.0",
    "nativescript-imagepicker": "6.0.2",
    "nativescript-iqkeyboardmanager": "^1.3.0",
    "nativescript-localstorage": "^1.1.5",
    "nativescript-material-icons": "1.0.3",
    "nativescript-ngx-fonticon": "4.2.0",
    "nativescript-phone": "1.3.1",
    "nativescript-platform-css": "1.6.5",
    "nativescript-sentry": "^1.5.2",
    "nativescript-social-login": "4.0.1",
    "nativescript-status-bar": "1.1.1",
    "nativescript-theme-core": "1.0.4",
    "nativescript-ui-listview": "3.5.7",
    "nativescript-ui-sidedrawer": "4.1.1",
    "nativescript-web-image-cache": "^4.2.4",
    "nativescript-websockets": "1.5.0",
    "ngrx-actions": "3.1.6",
    "node-bitarray": "^0.1.0",
    "node-sass": "^4.9.0",
    "reflect-metadata": "0.1.12",
    "rxjs": "6.2.0",
    "rxjs-compat": "^6.2.0",
    "socketcluster-client": "13.0.0",
    "tns-core-modules": "^4.1.0",
    "tns-platform-declarations": "^4.1.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/core": "~0.6.3",
    "@angular/compiler-cli": "^6.0.0",
    "@ngtools/webpack": "~6.0.3",
    "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.1",
    "css-loader": "~0.28.11",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.6.0",
    "nativescript-dev-typescript": "0.7.1",
    "nativescript-dev-webpack": "~0.12.0",
    "nativescript-worker-loader": "~0.9.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.3.0",
    "sass-loader": "^7.0.3",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "~1.2.5",
    "webpack": "~4.6.0",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-cli": "~2.1.3",
    "webpack-sources": "~1.1.0"
  },

• Webpack configuration:

<!-- Provide the content of your webpack.config.js. -->
const { join, relative, resolve, sep } = require("path");

const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = env => {
    // Add your custom Activities, Services and other Android app components here.
    const appComponents = [
        "tns-core-modules/ui/frame",
        "tns-core-modules/ui/frame/activity",
    ];

    const platform = env && (env.android && "android" || env.ios && "ios");
    if (!platform) {
        throw new Error("You need to provide a target platform!");
    }

    const platforms = ["ios", "android"];
    const projectRoot = __dirname;
    nsWebpack.loadAdditionalPlugins({ projectDir: projectRoot });

    // Default destination inside platforms/<platform>/...
    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
    const appResourcesPlatformDir = 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'
        aot, // --env.aot
        snapshot, // --env.snapshot
        uglify, // --env.uglify
        report, // --env.report
    } = env;

    const appFullPath = resolve(projectRoot, appPath);
    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);

    const entryModule = aot ?
        nsWebpack.getAotEntryModule(appFullPath) :
        `${nsWebpack.getEntryModule(appFullPath)}.ts`;
    const entryPath = `.${sep}${entryModule}`;

    const config = {
        mode: uglify ? "production" : "development",
        context: appFullPath,
        watchOptions: {
            ignored: [
                appResourcesFullPath,
                // Don't watch hidden files
                "**/.*",
            ]
        },
        target: nativescriptTarget,
        entry: {
            bundle: entryPath,
        },
        output: {
            pathinfo: false,
            path: dist,
            libraryTarget: "commonjs2",
            filename: "[name].js",
            globalObject: "global",
        },
        resolve: {
            extensions: [".ts", ".js", ".scss", ".css"],
            // Resolve {N} system modules from tns-core-modules
            modules: [
                resolve(__dirname, "node_modules/tns-core-modules"),
                resolve(__dirname, "node_modules"),
                "node_modules/tns-core-modules",
                "node_modules",
            ],
            alias: {
                '~': appFullPath,
                deepmerge$: resolve(__dirname, 'node_modules/deepmerge/dist/umd.js')
            },
            symlinks: false
        },
        resolveLoader: {
            symlinks: 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, chunks) => {
                            const moduleName = module.nameForCondition ? module.nameForCondition() : '';
                            return /[\\/]node_modules[\\/]/.test(moduleName) ||
                                appComponents.some(comp => comp === moduleName);
                        },
                        enforce: true,
                    },
                }
            },
            minimize: !!uglify,
            minimizer: [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        parallel: true,
                        cache: true,
                        output: {
                            comments: false,
                        },
                        compress: {
                            // The Android SBG has problems parsing the output
                            // when these options are enabled
                            'collapse_vars': platform !== "android",
                            sequences: platform !== "android",
                        }
                    }
                })
            ],
        },
        module: {
            rules: [
                {
                    test: new RegExp(entryPath),
                    use: [
                        // Require all Android app components
                        platform === "android" && {
                            loader: "nativescript-dev-webpack/android-app-components-loader",
                            options: { modules: appComponents }
                        },

                        {
                            loader: "nativescript-dev-webpack/bundle-config-loader",
                            options: {
                                registerPages: false,
                                loadCss: !snapshot, // load the application css if in debug mode
                            }
                        },
                    ].filter(loader => !!loader)
                },

                { test: /\.html$|\.xml$/, use: "raw-loader" },

                // tns-core-modules reads the app.css and its imports using css-loader
                {
                    test: /[\/|\\]app\.css$/,
                    use: {
                        loader: "css-loader",
                        options: { minimize: false, url: false },
                    }
                },
                {
                    test: /[\/|\\]app\.scss$/,
                    use: [
                        { loader: "css-loader", options: { minimize: false, url: false } },
                        "sass-loader"
                    ]
                },

                // Angular components reference css files and their imports using raw-loader
                { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" },
                { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },

                // Compile TypeScript files with ahead-of-time compiler.
                {
                    test: /.ts$/, use: [
                        "nativescript-dev-webpack/moduleid-compat-loader",
                        "@ngtools/webpack",
                    ]
                },

                // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
                // Removing this will cause deprecation warnings to appear.
                {
                    test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
                    parser: { system: true },
                },
            ],
        },
        plugins: [
            // Define useful constants like TNS_WEBPACK
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
            }),
            // Remove all files from the out dir.
            new CleanWebpackPlugin([`${dist}/**/*`]),
            // Copy native app resources to out dir.
            new CopyWebpackPlugin([
                {
                    from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
                    to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
                    context: projectRoot
                },
            ]),
            // Copy assets to out dir. Add your own globs as needed.
            new CopyWebpackPlugin([
                { from: "fonts/**" },
                { from: "**/*.jpg" },
                { from: "**/*.png" },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
            // Generate a bundle starter script and activate it in package.json
            new nsWebpack.GenerateBundleStarterPlugin([
                "./vendor",
                "./bundle",
            ]),
            // For instructions on how to set up workers with webpack
            // check out https://github.com/nativescript/worker-loader
            new NativeScriptWorkerPlugin(),
            // AngularCompilerPlugin with augmented NativeScript filesystem to handle platform specific resource resolution.
            new nsWebpack.NativeScriptAngularCompilerPlugin({
                entryModule: resolve(__dirname, "app/modules/shell/shell.module#AppModule"),
                tsConfigPath: join(__dirname, "tsconfig.esm.json"),
                skipCodeGeneration: !aot,
                platformOptions: {
                    platform,
                    platforms,
                },
            }),
            // Does IPC communication with the {N} CLI to notify events when running in watch mode.
            new nsWebpack.WatchStateLoggerPlugin(),
        ],
    };

    if (report) {
        // Generate report files for bundles content
        config.plugins.push(new BundleAnalyzerPlugin({
            analyzerMode: "static",
            openAnalyzer: false,
            generateStatsFile: true,
            reportFilename: resolve(projectRoot, "report", `report.html`),
            statsFilename: resolve(projectRoot, "report", `stats.json`),
        }));
    }

    if (snapshot) {
        config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
            chunk: "vendor",
            requireModules: [
                "reflect-metadata",
                "@angular/platform-browser",
                "@angular/core",
                "@angular/common",
                "@angular/router",
                "nativescript-angular/platform-static",
                "nativescript-angular/router",
            ],
            projectRoot,
            webpackConfig: config,
        }));
    }

    return config;
};

[vakrilov]

Hay @thaoula,
We were looking to an issue similar to that with @VladimirAmiorkov the other day. He opened and issue about it here.
Can you check if you are using RadListView with grouping? There is an easy workaround (just add a tkGroupTemplate).

[thaoula]

Hi @vakrilov,

Many thanks for your reply

Yes, we are using a RadListView on the page after the login page. I added tkGroupTemplate and now it works.

Thank you, you are a Life saver!!!!

Regards,
Tarek

[jcjmcclean]

@thaoula Unrelated to this issue but I noticed in your package.json file you have both nativescript-websockets and socketcluster-client as dependencies.

I'm working on a nativescript Android app which needs to connect to a socketcluster server and I keep getting connection timed out errors (same code works fine in an angular app) from socketcluster client.

Just wondering if you actually used both of those packages and managed to connect to socketcluster from nativescript?