Not Webpack compatible

[vahidvdn]

When I use webpack with this command:

tns run android --key-store-path C:\Users\vahidnajafi\repos\tns-key\my-release-key.keystore --key-store-password my_own_pass --key-store-alias alias_name --key-store-alias-password my_own_pass --release --bundle --env.uglify --env.snapshot --env.aot

I get the following error:

C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\webpack.config.js:26
    nsWebpack.loadAdditionalPlugins({ projectDir: projectRoot });
              ^
TypeError: nsWebpack.loadAdditionalPlugins is not a function
    at module.exports.env (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\webpack.config.js:26:15)
    at handleFunction (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\bin\prepareOptions.js:23:13)
    at prepareOptions (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\bin\prepareOptions.js:9:5)
    at requireConfig (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\bin\convert-argv.js:136:14)
    at C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\bin\convert-argv.js:142:17
    at Array.forEach (native)
    at module.exports (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\bin\convert-argv.js:140:15)
    at yargs.parse.err (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\bin\webpack.js:240:39)
    at Object.parse (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\node_modules\yargs\yargs.js:552:18)
    at C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\bin\webpack.js:218:8
    at Object.<anonymous> (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack-cli\bin\webpack.js:515:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\vahidnajafi\NativeScript\nativescript-marketplace-demo\node_modules\webpack\bin\webpack.js:80:2)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:504:3
Executing webpack failed with exit code 1.

[vahidvdn]

+1

[ashrafaa]

I have the same issue as well. Update everything to latest still doesnt solve the problem. Below is current dependencies "dependencies": { "@angular/animations": "~6.0.7", "@angular/cli": "^6.0.8", "@angular/common": "~6.0.7", "@angular/compiler": "~6.0.7", "@angular/core": "~6.0.7", "@angular/forms": "~6.0.7", "@angular/http": "~6.0.7", "@angular/platform-browser": "~6.0.7", "@angular/platform-browser-dynamic": "~6.0.7", "@angular/router": "~6.0.7", "nativescript-angular": "^6.0.6", "nativescript-cardview": "^3.0.1", "nativescript-checkbox": "^3.0.3", "nativescript-exit": "^1.0.1", "nativescript-geolocation": "^4.2.6", "nativescript-google-maps-sdk": "^2.6.0", "nativescript-imagepicker": "^6.0.2", "nativescript-iqkeyboardmanager": "^1.3.0", "nativescript-modal-datetimepicker": "^1.1.3", "nativescript-ngx-fonticon": "^4.0.0", "nativescript-pedometer": "^2.0.2", "nativescript-plugin-firebase": "^5.3.1", "nativescript-texttospeech": "^2.0.2", "nativescript-theme-core": "~1.0.4", "nativescript-vibrate": "^2.1.0", "reflect-metadata": "~0.1.8", "rxjs": "^6.2.1", "tns-core-modules": "^4.1.0", "tns-platform-declarations": "^4.1.0", "zone.js": "~0.8.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.7.0-rc.0", "@angular/compiler-cli": "^6.0.7", "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "clean-webpack-plugin": "~0.1.19", "copy-webpack-plugin": "~4.3.0", "css-loader": "~0.28.7", "extract-text-webpack-plugin": "~3.0.2", "lazy": "1.0.11", "nativescript-dev-sass": "^1.5.0", "nativescript-dev-typescript": "~0.7.0", "nativescript-dev-webpack": "^0.14.2", "nativescript-worker-loader": "~0.8.1", "raw-loader": "~0.5.1", "resolve-url-loader": "~2.2.1", "sass-loader": "~6.0.6", "typescript": "^2.9.2", "uglifyjs-webpack-plugin": "~1.1.6", "webpack": "~3.10.0", "webpack-bundle-analyzer": "^2.9.1", "webpack-sources": "~1.1.0" } and webpack.config.js (though this is default one cause I did not make any changes) `const { relative, resolve, join } = 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 => { 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",

    // Aot, snapshot, uglify and report can be enabled by providing
    // the `--env.snapshot`, `--env.uglify` or `--env.report` flags
    // when running 'tns run android|ios'
    aot,
    snapshot,
    uglify,
    report,
} = env;
const ngToolsWebpackOptions = { tsConfigPath: join(__dirname, "tsconfig.json") };

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

const config = {
    context: appFullPath,
    watchOptions: {
        ignored: [
            appResourcesFullPath,
            // Don't watch hidden files
            "**/.*",
        ]
    },
    target: nativescriptTarget,
    entry: {
        bundle: aot ?
            `./${nsWebpack.getAotEntryModule(appFullPath)}` :
            `./${nsWebpack.getEntryModule(appFullPath)}`,
        vendor: "./vendor",
    },
    output: {
        pathinfo: true,
        path: dist,
        libraryTarget: "commonjs2",
        filename: "[name].js",
    },
    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
        },
        symlinks: true
    },
    resolveLoader: {
        symlinks: false
    },
    node: {
        // Disable node shims that conflict with NativeScript
        "http": false,
        "timers": false,
        "setImmediate": false,
        "fs": "empty",
    },
    module: {
        rules: [
            { 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",
                { loader: "@ngtools/webpack", options: ngToolsWebpackOptions },
            ]},
        ],
    },
    plugins: [
        // Vendor libs go to the vendor.js chunk
        new webpack.optimize.CommonsChunkPlugin({
            name: ["vendor"],
        }),
        // 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" },
            { from: "**/*.xml" },
        ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
        // Generate a bundle starter script and activate it in package.json
        new nsWebpack.GenerateBundleStarterPlugin([
            "./vendor",
            "./bundle",
        ]),
        // Support for web workers since v3.2
        new NativeScriptWorkerPlugin(),
        // AngularCompilerPlugin with augmented NativeScript filesystem to handle platform specific resource resolution.
        new nsWebpack.NativeScriptAngularCompilerPlugin(
            Object.assign({
                entryModule: resolve(appPath, "app.module#AppModule"),
                skipCodeGeneration: !aot,
                platformOptions: {
                    platform,
                    platforms,
                    // ignore: ["App_Resources"]
                },
            }, ngToolsWebpackOptions)
        ),
        // 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",
        projectRoot,
        webpackConfig: config,
        targetArchs: ["arm", "arm64", "ia32"],
        tnsJavaClassesOptions: { packages: ["tns-core-modules" ] },
        useLibs: false
    }));
}
if (uglify) {
    config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));

    // Work around an Android issue by setting compress = false
    const compress = platform !== "android";
    config.plugins.push(new UglifyJsPlugin({
        uglifyOptions: {
            mangle: { reserved: nsWebpack.uglifyMangleExcludes }, // Deprecated. Remove if using {N} 4+.
            compress,
        }
    }));
}
return config;

}; `

anyone have any idea how to solve this? @NickIliev sorry to tag here, just wondering if there's any similar issue logged somewhere. thanks!

[matt-psaltis]

I ran into this problem too. You need to create a new webpack.config.js by merging your custom changes between node_modules\nativescript-dev-webpack\templates\webpack.xxx.js (where xxx is the relevant template for your scenario) and your existing webpack.config.js file.

[piotrilski]

@SaltyDH That has sorted the issue out for me, thank you!

[vahidvdn]

@SaltyDH Would you please explain more about the details? What exactly should I do?

[KevinBeckers]

@vahidvdn Save your current webpack.config.js as backup. Then copy the template from node_modules\nativescript-dev-webpack\templates\webpack.xxx.js to your App folder (where xxx is the relevant template for your scenario). Rename this to webpack.config.js. Copy all modifications from your original config to the template and you are good to go.

[vahidvdn]

Thanks @KevinBeckers , I will test it.

[dtopuzov]

Latest code in master branch works properly with webpack.