NS CLI 7.2.1 create project with NS Core 8.1.1 and not with core 7... #9680

xpalacincreditoh · 2021-11-24T10:10:35Z

xpalacincreditoh
Nov 24, 2021

Hi,

I need create a project with NS that use WebPack 4 and not new WP 5.
I try to install NS CLI 7.2.1 (11-3-2021) with Node 14.16.0 (23-2-2021) and NPM 6.14.11 and when create a HelloWorld project this generate package.json with dependency "@nativescript/core": "~8.1.1" and not with NS core 7.3.0 (27-2-2021) and with devDependencies "@nativescript/webpack": "~5.0.0" and not 4.

I need to migrate my project with NS 6 to NS 7 or 8 with WP 4, because i try to migrate to NS 8 with WP 5, migrate my webpack.config.json is so difficult to WP 5.

I try to use @nativescript/[email protected] previous at change to WP5, but have the same error with HelloWorld project, i need the config to use this core or other previous with WP 4.

Thanks.

Answered by rigor789

Nov 24, 2021

We no longer support the old webpack configs - if you share your old webpack config, we can help migrate it to the webpack5 configs. Unless you manually changed them, it should be fairly simple to migrate.

If you ran into errors with webpack5, please post them as well.

View full answer

rigor789 · 2021-11-24T10:51:37Z

rigor789
Nov 24, 2021
Maintainer

We no longer support the old webpack configs - if you share your old webpack config, we can help migrate it to the webpack5 configs. Unless you manually changed them, it should be fairly simple to migrate.

If you ran into errors with webpack5, please post them as well.

0 replies

xpalacincreditoh · 2021-11-24T11:28:03Z

xpalacincreditoh
Nov 24, 2021
Author

I use:

@[email protected]
@nativescript/[email protected]
Node v16.13.0
NPM v8.1.0

After ns clean I execute ns doctor:

$ ns doctor
Error while loading nativescript-cloud is: Default commands should be required before child commands
✔ Getting environment information 

No issues were detected.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ Local builds for iOS can be executed only on a macOS system. To build for iOS on a different operating system, you can use the NativeScript cloud infrastructure.
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.1.4 version and is up to date.
✔ Component @nativescript/core has 8.1.5 version and is up to date.
✖ Component @nativescript/ios is not installed.
✔ Component @nativescript/android has 8.1.1 version and is up to date.

When Run app:

$ ns run android --env.development --env.api=staging --log trace --env.android
Successfully synced application com.creditoh.app on device d4dde974.
Will emit event runOnDeviceStarted with data {
  projectDir: '/home/xavier/PhpstormProjects/crmhex-app',
  deviceIdentifier: 'd4dde974',
  applicationIdentifier: 'com.creditoh.app'
}
JS: {NSVue (Vue: 2.6.12 | NSVue: 2.9.0)} -> CreateElement(Frame)
....

The app open but when if focus on TextField console do error:

JS: Received discarded exception: 
JS: Calling js method afterTextChanged failed
JS: TypeError: Cannot read property 'text' of undefined

My Package.json actually migration attempt is:

{
  "name": "creditoh",
  "main": "app/main.js",
  "version": "0.2.3",
  "description": "A native application built with NativeScript-Vue",
  "author": "Maria Alonso <[email protected]>, JUANM4 <[email protected]>",
  "license": "MIT",
  "nativescript": {
    "id": {
      "ios": "com.creditoh.app",
      "android": "com.creditoh.app"
    }
  },
  "dependencies": {
    "@nativescript/core": "~8.1.1",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/localize": "^5.0.4",
    "@nativescript/theme": "~3.0.1",
    "@sergeymell/nativescript-svg": "^1.1.2",
    "@teammaestro/nativescript-svg": "^1.0.1",
    "@triniwiz/nativescript-socketio": "^5.0.1",
    "@triniwiz/nativescript-toasty": "^4.1.3",
    "@vue/devtools": "^5.3.3",
    "axios": "^0.19.2",
    "clean-webpack-plugin": "^4.0.0",
    "dayjs": "^1.8.26",
    "lodash.chunk": "^4.2.0",
    "lokijs": "^1.5.12",
    "nativescript-advanced-permissions": "^1.2.0",
    "nativescript-applozic-chat-fork": "^2.2.0",
    "nativescript-appversion": "^1.4.4",
    "nativescript-background-http": "^4.2.1",
    "nativescript-carousel": "^7.0.1",
    "nativescript-clipboard": "^1.2.0",
    "nativescript-email": "^1.6.0",
    "nativescript-fingerprint-auth": "^7.0.2",
    "nativescript-http-formdata": "^2.1.0",
    "nativescript-intl": "^4.0.1",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-localstorage": "^2.0.2",
    "nativescript-mediafilepicker": "^4.0.2",
    "nativescript-modal-datetimepicker": "^1.2.2",
    "nativescript-secure-storage": "^2.6.0",
    "nativescript-ui-gauge": "^8.0.0",
    "nativescript-vue": "~2.9.0",
    "nativescript-vue-devtools": "^1.5.1",
    "nativescript-vue-navigator": "^0.2.0",
    "nativescript-webview-interface": "^1.4.3",
    "nativescript-windowed-modal": "^7.0.0",
    "patch-package": "^6.2.2",
    "vue-cli": "^2.9.6",
    "vuex": "^3.3.0",
    "vuex-extensions": "^1.1.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@babel/runtime": "^7.6.2",
    "@nativescript/android": "8.1.1",
    "@nativescript/webpack": "~5.0.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "html-loader": "^0.5.5",
    "nativescript-vue-template-compiler": "~2.9.0",
    "prettier": "^2.0.5",
    "prettier-eslint": "^10.1.1",
    "sass": "~1.39.0",
    "tns-android": "6.5.0",
    "typescript": "~4.3.5",
    "vue-loader": "^15.9.2"
  },
  "scripts": {
    "preinstall": "chmod +x ./entitlements.sh",
    "postinstall": "./entitlements.sh & patch-package",
    "lint": "eslint --ext .js,.vue src test",
    "lint-autofix": "eslint --ext .js,.vue src test --fix",
    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
  }
}

My webpack.config.js actually migration attempt is:

// New from migration
const webpack = require("@nativescript/webpack");
const {resolve, sep, join} = require("path");

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");

const {exec} = require("child_process");
const countryFiles = require("./lib/copy-country-files");

module.exports = (env) => {
	webpack.init(env);

    //Copy configuration file for applozic theme to platform android
    if (env.android) {
        exec('cp -Rf app/App_Resources/Android/applozic-settings.json platforms/android/app/src/main/assets/applozic-settings.json', (error, stdout, stderr) => {
            if (error) {
                console.error(`exec error: ${error}`);
                return;
            }
            console.log('Configured applozic theme!');
        });
        exec('cp -Rf app/App_Resources/Android/FcmListenerService.java platforms/android/app/src/main/java/com/tns/FcmListenerService.java', (error, stdout, stderr) => {
            if (error) {
                console.error(`exec error: ${error}`);
                return;
            }
            console.log('Configured applozic notifications!');
        });
    }

    // Add your custom Activities, Services and other android app components here.
    const appComponents = env.appComponents || [];
    appComponents.push(...[
        "@nativescript/core/ui/frame",
        "@nativescript/core/ui/frame/activity",
    ]);

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

    const platforms = ["ios", "android"];
    const projectRoot = __dirname;

    if (env.platform) {
        platforms.push(env.platform);
    }

    // Default destination inside platforms/<platform>/...
    //const dist = resolve(projectRoot, webpack.getAppPath(platform, projectRoot));

    const {
        // The 'appPath' and 'appResourcesPath' values are fetched from
        // the nsconfig.json configuration file.
        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
        sourceMap, // --env.sourceMap
        hiddenSourceMap, // --env.hiddenSourceMap
        unitTesting, // --env.unitTesting
        verbose, // --env.verbose
        snapshotInDocker, // --env.snapshotInDocker
        skipSnapshotTools, // --env.skipSnapshotTools
        compileSnapshot, // --env.compileSnapshot
        country, // --env.country
    } = env;

    const useLibs = compileSnapshot;
    const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;

    const mode = production ? "production" : "development"

    if (country) {
        countryFiles.checkCountryFiles(country);
    }

	// Learn how to customize:
	// https://docs.nativescript.org/webpack

    webpack.mergeWebpack({
        mode: 'production',
        resolve: {
            fallback: {
                // Disable node shims that conflict with NativeScript
                http: false,
                https: false,
                timers: false,
                setImmediate: false,
                fs: false,
                __dirname: false,

                url: false,
                zlib: false,
                tty: false,
                util: false,
                url: false,
                assert: false,
                stream: false,
                os: false,
                fileSystem: false
            }
        }
    })

    /*const projectRoot = __dirname;
    const appPath = "app";
    const appFullPath = resolve(projectRoot, appPath);
    const alias = env.alias || {};
    alias['~'] = appFullPath;
    alias['@'] = appFullPath;
    alias['vue'] = 'nativescript-vue';
    alias['Models'] = appFullPath + '/imports/models';
    alias['Components'] = appFullPath + '/imports/components';
    alias['Filters'] = appFullPath + '/imports/filters';
    alias['Services'] = appFullPath + '/imports/services';
    alias['Constants'] = appFullPath + '/imports/constants';
    alias['Exceptions'] = appFullPath + '/imports/exceptions';
    alias['Mixins'] = appFullPath + '/imports/mixins';
    alias['Utils'] = appFullPath + '/utils';*/

    webpack.chainWebpack(
        config => {
        // change the "@" alias to "app/libs"
            config.resolve.alias.set('@', resolve(__dirname, 'app'))
            config.resolve.alias.set('~', resolve(__dirname, 'app'))
            config.resolve.alias.set('vue', 'nativescript-vue')
            config.resolve.alias.set('Models', resolve(__dirname, 'app') + '/imports/models')
            config.resolve.alias.set('Components', resolve(__dirname, 'app') + '/imports/components')
            config.resolve.alias.set('Filters', resolve(__dirname, 'app') + '/imports/filters')
            config.resolve.alias.set('Services', resolve(__dirname, 'app') + '/imports/services')
            config.resolve.alias.set('Constants', resolve(__dirname, 'app') + '/imports/constants')
            config.resolve.alias.set('Exceptions', resolve(__dirname, 'app') + '/imports/exceptions')
            config.resolve.alias.set('Mixins', resolve(__dirname, 'app') + '/imports/mixins')
            config.resolve.alias.set('Utils', resolve(__dirname, 'app') + '/utils')
            config.resolve.alias.set('tns-core-modules', "@nativescript/core")
            config.plugin('VueLoaderPlugin')
            config.plugin('DefinePlugin').tap(args => {
                Object.assign(args[0], {
                    'API_ENV': JSON.stringify(env.api),
                    'TNS_ENV': JSON.stringify(mode),
                })
                return args
            })
            /*config.module.rule([join(appFullPath, entryPath + ".js"), join(appFullPath, entryPath + ".ts")]).use('nativescript-dev-webpack/style-hot-loader').loader('nativescript-dev-webpack/android-app-components-loader').options({
                modules: appComponents
            }),*/

            /*config.module.rule('app/css').use('nativescript-dev-webpack/style-hot-loader').loader('nativescript-dev-webpack/css2json-loader').options({
                useForImports: true
            }),
            config.module.rule('app/scss').use('nativescript-dev-webpack/style-hot-loader').loader('nativescript-dev-webpack/css2json-loader').options({
                useForImports: true
            }),*/
            /*config.module.rule('app/css').exclude.add('app/css').use('nativescript-dev-webpack/style-hot-loader').loader('nativescript-dev-webpack/apply-css-loader.js').options({
                url: false
            }),
            config.module.rule('app/scss').exclude.add('app/scss').use('nativescript-dev-webpack/style-hot-loader').loader('nativescript-dev-webpack/apply-css-loader.js').options({
                url: false
            }),*/
            config.module.rule('js').use('babel-loader').loader('babel-loader')
            /*config.module.rule('ts').use('ts-loader').loader('ts-loader').options({
                appendTsSuffixTo: [/\.vue$/],
                allowTsInNodeModules: true,
                compilerOptions: {
                    declaration: false
                }
            }),*/
            config.module.rule('vue').use('vue-loader').options({
                compiler: NsVueTemplateCompiler,
            })
            // config.module.rule('html').use('html-loader').loader('html-loader') // TODO fix error SCSS {
        })

    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);


	return webpack.resolveConfig();
};

Files prior to the migration

The previous version for .migration_backup/package.json before migrate to NS 8 is on NS 6.5.1:

{
  "name": "creditoh",
  "version": "0.2.3",
  "description": "A native application built with NativeScript-Vue",
  "author": "Maria Alonso <[email protected]>, JUANM4 <[email protected]>",
  "license": "MIT",
  "nativescript": {
    "id": {
      "ios": "com.creditoh.app",
      "android": "com.creditoh.app"
    },
    "templateVersion": "v2",
    "tns-android": {
      "version": "6.5.0"
    },
    "tns-ios": {
      "version": "6.5.0"
    }
  },
  "dependencies": {
    "@nativescript/core": "^6.5.1",
    "@nativescript/theme": "^2.3.3",
    "@teammaestro/nativescript-svg": "^1.0.1",
    "@vue/devtools": "^5.3.3",
    "axios": "^0.19.2",
    "dayjs": "^1.8.26",
    "lodash.chunk": "^4.2.0",
    "loki-nativescript-adapter": "^1.0.3",
    "lokijs": "^1.5.8",
    "nativescript-advanced-permissions": "^1.2.0",
    "nativescript-applozic-chat": "1.7.2",
    "nativescript-appversion": "^1.4.4",
    "nativescript-background-http": "^4.2.1",
    "nativescript-carousel": "^6.1.1",
    "nativescript-clipboard": "^1.2.0",
    "nativescript-email": "^1.6.0",
    "nativescript-fingerprint-auth": "^7.0.2",
    "nativescript-http-formdata": "^2.1.0",
    "nativescript-intl": "^4.0.1",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-localize": "^4.2.2",
    "nativescript-localstorage": "^2.0.1",
    "nativescript-mediafilepicker": "^3.0.1",
    "nativescript-modal-datetimepicker": "^1.2.2",
    "nativescript-plugin-firebase": "^10.5.2",
    "nativescript-secure-storage": "^2.6.0",
    "nativescript-socketio": "^3.3.1",
    "nativescript-toasty": "^3.0.0-alpha.2",
    "nativescript-ui-gauge": "^6.0.0",
    "nativescript-vue": "^2.6.1",
    "nativescript-vue-devtools": "^1.4.0",
    "nativescript-vue-navigator": "^0.2.0",
    "nativescript-webview-interface": "^1.4.3",
    "nativescript-windowed-modal": "^6.2.1",
    "patch-package": "^6.2.2",
    "tns-core-modules": "^6.5.1",
    "vue-cli": "^2.9.6",
    "vuex": "^3.3.0",
    "vuex-extensions": "^1.1.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.6",
    "@babel/runtime": "^7.6.2",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "html-loader": "^0.5.5",
    "nativescript-dev-webpack": "^1.5.1",
    "nativescript-vue-template-compiler": "^2.6.1",
    "nativescript-worker-loader": "~0.9.0",
    "node-sass": "^4.14.1",
    "typescript": "^3.8.3",
    "vue-loader": "^15.9.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "prettier": "^2.0.5",
    "prettier-eslint": "^10.1.1",
    "eslint-plugin-vue": "^6.2.2",
    "babel-jest": "^24.9.0",
    "babel-plugin-module-resolver": "^4.0.0"
  },
  "scripts": {
    "preinstall": "chmod +x ./entitlements.sh",
    "postinstall": "./entitlements.sh & patch-package",
    "lint": "eslint --ext .js,.vue src test",
    "lint-autofix": "eslint --ext .js,.vue src test --fix",
    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
  }
}

The previous version for migration_backup/webpack.config.json before migrate to NS 8 is on NS 6.5.1 with Webpack 4:

const { join, relative, resolve, sep } = require("path");

const webpack = require("@nativescript/webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const TerserPlugin = require("terser-webpack-plugin");

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");

const nsWebpack = require("@nativescript/webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const hashSalt = Date.now().toString();

const { exec } = require('child_process');

const countryFiles = require('./lib/copy-country-files');

module.exports = env => {
    console.warn(env);

    //Copy configuration file for applozic theme to platform android
    if (env.android) {
        exec('cp -Rf app/App_Resources/Android/applozic-settings.json platforms/android/app/src/main/assets/applozic-settings.json', (error, stdout, stderr) => {
            if (error) {
                console.error(`exec error: ${error}`);
                return;
            }
            console.log('Configured applozic theme!');
        });
        exec('cp -Rf app/App_Resources/Android/FcmListenerService.java platforms/android/app/src/main/java/com/tns/FcmListenerService.java', (error, stdout, stderr) => {
            if (error) {
                console.error(`exec error: ${error}`);
                return;
            }
            console.log('Configured applozic notifications!');
        });
    }


    // Add your custom Activities, Services and other android app components here.
    const appComponents = env.appComponents || [];
    appComponents.push(...[
        "tns-core-modules/ui/frame",
        "tns-core-modules/ui/frame/activity",
    ]);

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

    const platforms = ["ios", "android"];
    const projectRoot = __dirname;

    if (env.platform) {
        platforms.push(env.platform);
    }

    // Default destination inside platforms/<platform>/...
    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));

    const {
        // The 'appPath' and 'appResourcesPath' values are fetched from
        // the nsconfig.json configuration file.
        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
        sourceMap, // --env.sourceMap
        hiddenSourceMap, // --env.hiddenSourceMap
        unitTesting, // --env.unitTesting
        verbose, // --env.verbose
        snapshotInDocker, // --env.snapshotInDocker
        skipSnapshotTools, // --env.skipSnapshotTools
        compileSnapshot, // --env.compileSnapshot
        country, // --env.country
    } = env;

    const useLibs = compileSnapshot;
    const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
    const externals = nsWebpack.getConvertedExternals(env.externals);

    const mode = production ? "production" : "development"

    if (country) {
        countryFiles.checkCountryFiles(country);
    }

    const appFullPath = resolve(projectRoot, appPath);
    const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
    let coreModulesPackageName = "tns-core-modules";
    const alias = env.alias || {};
    alias['~'] = appFullPath;
    alias['@'] = appFullPath;
    alias['vue'] = 'nativescript-vue';
    alias['Models'] = appFullPath + '/imports/models';
    alias['Components'] = appFullPath + '/imports/components';
    alias['Filters'] = appFullPath + '/imports/filters';
    alias['Services'] = appFullPath + '/imports/services';
    alias['Constants'] = appFullPath + '/imports/constants';
    alias['Exceptions'] = appFullPath + '/imports/exceptions';
    alias['Mixins'] = appFullPath + '/imports/mixins';
    alias['Utils'] = appFullPath + '/utils';

    if (hasRootLevelScopedModules) {
        coreModulesPackageName = "@nativescript/core";
        alias["tns-core-modules"] = coreModulesPackageName;
    }

    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);

    const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
    const entryPath = `.${sep}${entryModule}`;
    const entries = env.entries || {};
    entries.bundle = entryPath;

    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
    if (platform === "ios" && !areCoreModulesExternal) {
        entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
    };
    console.log(`Bundling application for entryPath ${entryPath}...`);

    let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);

    const itemsToClean = [`${dist}/**/*`];
    if (platform === "android") {
        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
    }

    nsWebpack.processAppComponents(appComponents, platform);
    const config = {
        mode: mode,
        context: appFullPath,
        externals,
        watchOptions: {
            ignored: [
                appResourcesFullPath,
                // Don't watch hidden files
                "**/.*",
            ],
        },
        target: nativescriptTarget,
        // target: nativeScriptVueTarget,
        entry: entries,
        output: {
            pathinfo: false,
            path: dist,
            sourceMapFilename,
            libraryTarget: "commonjs2",
            filename: "[name].js",
            globalObject: "global",
            hashSalt
        },
        resolve: {
            extensions: [".vue", ".ts", ".js", ".scss", ".css"],
            // Resolve {N} system modules from tns-core-modules
            modules: [
                resolve(__dirname, `node_modules/${coreModulesPackageName}`),
                resolve(__dirname, "node_modules"),
                `node_modules/${coreModulesPackageName}`,
                "node_modules",
            ],
            alias,
            // resolve symlinks to symlinked modules
            symlinks: true,
        },
        resolveLoader: {
            // don't resolve symlinks to symlinked loaders
            symlinks: false,
        },
        node: {
            // Disable node shims that conflict with NativeScript
            "http": false,
            "timers": false,
            "setImmediate": false,
            "fs": "empty",
            "__dirname": false,
        },
        devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
        optimization: {
            runtimeChunk: "single",
            noEmitOnErrors: true,
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        name: "vendor",
                        chunks: "all",
                        test: (module) => {
                            const moduleName = module.nameForCondition ? module.nameForCondition() : '';
                            return /[\\/]node_modules[\\/]/.test(moduleName) ||
                                appComponents.some(comp => comp === moduleName);

                        },
                        enforce: true,
                    },
                },
            },
            minimize: Boolean(production),
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                    cache: true,
                    sourceMap: isAnySourceMapEnabled,
                    terserOptions: {
                        output: {
                            comments: false,
                            semicolons: !isAnySourceMapEnabled
                        },
                        compress: {
                            // The Android SBG has problems parsing the output
                            // when these options are enabled
                            'collapse_vars': platform !== "android",
                            sequences: platform !== "android",
                        },
                        keep_fnames: true,
                    },
                }),
            ],
        },
        module: {
            rules: [{
                include: [join(appFullPath, entryPath + ".js"), join(appFullPath, entryPath + ".ts")],
                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: true, // applicable only for non-angular apps
                            loadCss: !snapshot, // load the application css if in debug mode
                            unitTesting,
                            appFullPath,
                            projectRoot,
                            ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                        },
                    },
                ].filter(loader => Boolean(loader)),
            },
            {
                test: /[\/|\\]app\.css$/,
                use: [
                    'nativescript-dev-webpack/style-hot-loader',
                    {
                        loader: "nativescript-dev-webpack/css2json-loader",
                        options: { useForImports: true }
                    },
                ],
            },
            {
                test: /[\/|\\]app\.scss$/,
                use: [
                    'nativescript-dev-webpack/style-hot-loader',
                    {
                        loader: "nativescript-dev-webpack/css2json-loader",
                        options: { useForImports: true }
                    },
                    'sass-loader', // TODO
                ],
            },
            {
                test: /\.css$/,
                exclude: /[\/|\\]app\.css$/,
                use: [
                    'nativescript-dev-webpack/style-hot-loader',
                    'nativescript-dev-webpack/apply-css-loader.js',
                    { loader: "css-loader", options: { url: false } },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /[\/|\\]app\.scss$/,
                use: [
                    'nativescript-dev-webpack/style-hot-loader',
                    'nativescript-dev-webpack/apply-css-loader.js',
                    { loader: "css-loader", options: { url: false } },
                    'sass-loader', // TODO
                ],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    allowTsInNodeModules: true,
                    compilerOptions: {
                        declaration: false
                    }
                },
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    compiler: NsVueTemplateCompiler,
                },
            },
            {
                test: /\.html$/i,
                loader: 'html-loader'
            }
            ],
        },
        plugins: [
            // ... Vue Loader plugin omitted
            // make sure to include the plugin!
            new VueLoaderPlugin(),
            // Define useful constants like TNS_WEBPACK
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
                "TNS_ENV": JSON.stringify(mode),
                "API_ENV": JSON.stringify(env.api),
                "process": "global.process",
                // IMPORTANT!! avoid execution error
                HTMLElement: function () {
                    return false;
                },
            }),
            // Remove all files from the out dir.
            new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
            // Copy assets to out dir. Add your own globs as needed.
            new CopyWebpackPlugin([
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.+(jpg|png)" } },
                { from: { glob: "assets/**/*" } },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
            new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
            // For instructions on how to set up workers with webpack
            // check out https://github.com/nativescript/worker-loader
            new NativeScriptWorkerPlugin(),
            new nsWebpack.PlatformFSPlugin({
                platform,
                platforms,
            }),
            // Does IPC communication with the {N} CLI to notify events when running in watch mode.
            new nsWebpack.WatchStateLoggerPlugin()
        ],
    };

    if (unitTesting) {
        config.module.rules.push(
            {
                test: /-page\.js$/,
                use: "nativescript-dev-webpack/script-hot-loader"
            },
            {
                test: /\.(html|xml)$/,
                use: "nativescript-dev-webpack/markup-hot-loader"
            },

            { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" }
        );
    }

    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: [
                "tns-core-modules/bundle-entry-points",
            ],
            projectRoot,
            webpackConfig: config,
            snapshotInDocker,
            skipSnapshotTools,
            useLibs
        }));
    }

    if (hmr) {
        config.plugins.push(new webpack.HotModuleReplacementPlugin());
    }

    return config;
};

0 replies

rigor789 · 2021-11-24T11:53:30Z

rigor789
Nov 24, 2021
Maintainer

I believe the following cleaned up webpack config should be all you need:

const webpack = require("@nativescript/webpack");
const { exec } = require("child_process");
const { resolve } = require("path");

module.exports = (env) => {
  webpack.init(env);

  if (webpack.Utils.platform.getPlatformName() === 'android') {
    // Copy configuration file for applozic theme to platform android
    configureApplozic();
  }

  webpack.chainWebpack((config) => {
    config.resolve.alias
      .set("Models", resolve(__dirname, "app/imports/models"))
      .set("Components", resolve(__dirname, "app/imports/components"))
      .set("Filters", resolve(__dirname, "app/imports/filters"))
      .set("Services", resolve(__dirname, "app/imports/services"))
      .set("Constants", resolve(__dirname, "app/imports/constants"))
      .set("Exceptions", resolve(__dirname, "app/imports/exceptions"))
      .set("Mixins", resolve(__dirname, "app/imports/mixins"))
      .set("Utils", resolve(__dirname, "app/utils"));
    // only required if some plugins are still using the legacy tns-core-modules
    //   .set("tns-core-modules", "@nativescript/core");

    config.plugin("DefinePlugin").tap((args) => {
      Object.assign(args[0], {
        API_ENV: JSON.stringify(env.api),
        TNS_ENV: JSON.stringify(config.get("mode")),
      });
      return args;
    });

    // likely not required anymore
    // config.module.rule("js").use("babel-loader").loader("babel-loader");
  });

  webpack.mergeWebpack({
    resolve: {
      fallback: {
        // Disable node shims that conflict with NativeScript
        http: false,
        https: false,
        timers: false,
        setImmediate: false,
        fs: false,
        __dirname: false,

        url: false,
        zlib: false,
        tty: false,
        util: false,
        url: false,
        assert: false,
        stream: false,
        os: false,
        fileSystem: false,
      },
    },
  });

  return webpack.resolveConfig();
};

function configureApplozic() {
  exec(
    "cp -Rf app/App_Resources/Android/applozic-settings.json platforms/android/app/src/main/assets/applozic-settings.json",
    (error, stdout, stderr) => {
      if (error) {
        console.error(`exec error: ${error}`);
        return;
      }
      console.log("Configured applozic theme!");
    }
  );
  exec(
    "cp -Rf app/App_Resources/Android/FcmListenerService.java platforms/android/app/src/main/java/com/tns/FcmListenerService.java",
    (error, stdout, stderr) => {
      if (error) {
        console.error(`exec error: ${error}`);
        return;
      }
      console.log("Configured applozic notifications!");
    }
  );
}

The configureApplozic function could also be replaced using webpack copy rules:

webpack.addCopyRule({
  from: resolve(__dirname, 'app/App_Resources/Android/applozic-settings.json'),
  to: resolve(__dirname, 'platforms/android/app/src/main/assets/applozic-settings.json')
})

webpack.addCopyRule({
  from: resolve(__dirname, 'app/App_Resources/Android/FcmListenerService.java'),
  to: resolve(__dirname, 'platforms/android/app/src/main/java/com/tns/FcmListenerService.java')
})

From your package.json, you can:

drop "clean-webpack-plugin": "^4.0.0",
drop "sass": "~1.39.0",
drop "tns-android": "6.5.0",
drop "vue-loader": "^15.9.2"
possibly drop the babel dependencies, unless you rely on some of them - in which case, uncomment the babel-loader in the updated config as well.
drop "html-loader": "^0.5.5", (unless actually using it for something)

Those are the things that jump out, perhaps a few more things could be cleaned up...

See if these changes help with the TextField issue - if not, please share some sample code, possibly something off there?

12 replies

xpalacincreditoh Nov 24, 2021
Author

I change my import correctly:

import TextField from "Components/element/textfields/CustomTextField";

for:

import CustomTextField from "Components/element/textfields/CustomTextField";

And works with problems

xpalacincreditoh Nov 24, 2021
Author

Only display keyboard in email inputs keyboardType="email", and with keyboard open can change focus to other inputs and write.
In console not display errors...

xpalacincreditoh Nov 24, 2021
Author

@rigor789
I test an if in my CustomTextField add keyboardType="number" for example this open keyboard as numeric but without keyboardType not open as text.
In my CustomTextField have the props:

keyboardType: {
     type: String,
     default: "",
},

I remove prop :keyboardType in TextField of my CustomTextField and works

<TextField
 :keyboardType="keyboardType" // REMOVED

rigor789 Nov 24, 2021
Maintainer

I would probably create a computed property and use v-bind="nameOfComputedProperty" and make it something like

nameOfComputedProperty() {
  if(this.keyboardType) {
    return { keyboardType: this.keyboardType };
  }

  // add this return if it doesn't work without it (ie. being undefined)
  // return {}
}

And then remove the default value...

What that would do is only set keyboardType if the user passed a value for it - otherwise just use default (without binding it).

xpalacincreditoh Nov 25, 2021
Author

I set TextField with prop :keyboardType="setKeyboardType" with computed and not entry to this computed method:

<TextField
   :keyboardType="setKeyboardType"
...

computed: {
   setKeyboardType() {
            console.log('setKeyboardType', this.keyboardType);
            if(this.keyboardType) {
                return { keyboardType: this.keyboardType };
            }

            // add this return if it doesn't work without it (ie. being undefined)
            // return {}
        }
....

I test with:

<TextField
   v-bind::keyboardType="setKeyboardType"
...

computed: {
   setKeyboardType() {
            console.log('setKeyboardType', this.keyboardType);
            if(this.keyboardType) {
                return { keyboardType: this.keyboardType };
            }

            // add this return if it doesn't work without it (ie. being undefined)
            // return {}
        }
....

This last attempt show console log but no set keyboardType

WORKS with:

<TextField
   v-bind::keyboardType="setKeyboardType"
...

computed: {
   setKeyboardType() {
            console.log('setKeyboardType', this.keyboardType);
            if(this.keyboardType) {
                return this.keyboardType;
            }

            // add this return if it doesn't work without it (ie. being undefined)
            // return {}
        }
....

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NativeScript

NS CLI 7.2.1 create project with NS Core 8.1.1 and not with core 7... #9680

{{title}}

Replies: 3 comments 12 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

NativeScript

NS CLI 7.2.1 create project with NS Core 8.1.1 and not with core 7... #9680

xpalacincreditoh Nov 24, 2021

Replies: 3 comments · 12 replies

rigor789 Nov 24, 2021 Maintainer

xpalacincreditoh Nov 24, 2021 Author

The app open but when if focus on TextField console do error:

rigor789 Nov 24, 2021 Maintainer

xpalacincreditoh Nov 24, 2021 Author

xpalacincreditoh Nov 24, 2021 Author

xpalacincreditoh Nov 24, 2021 Author

rigor789 Nov 24, 2021 Maintainer

xpalacincreditoh Nov 25, 2021 Author

xpalacincreditoh
Nov 24, 2021

Replies: 3 comments 12 replies

rigor789
Nov 24, 2021
Maintainer

xpalacincreditoh
Nov 24, 2021
Author

rigor789
Nov 24, 2021
Maintainer

xpalacincreditoh Nov 24, 2021
Author

xpalacincreditoh Nov 24, 2021
Author

xpalacincreditoh Nov 24, 2021
Author

rigor789 Nov 24, 2021
Maintainer

xpalacincreditoh Nov 25, 2021
Author