extract-text-webpack-plugin and awesome-typescript-loader missing dependencies #682

KirilOkun · 2018-09-29T15:41:14Z

Issue Checklist

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

Tell us about the problem

Clean install throws 2 warnings:

npm WARN [email protected] requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@^2.7 but noneis installed. You must install peer dependencies yourself.

I've seen the same warnings in the forum posts but there's no resolution.

Local environment

Platform
[x ] Node version XX
NativeScript CLI version

Project data

[x ] Platform you are building the app for
[ x] Node dependencies:

<!-- Provide the content of your package.json. -->

{
"name": "xxxxxxxx",
"license": "SEE LICENSE IN ",
"readme": "NativeScript Application",
"repository": "xxxxxxxxx",
"version": "0.1.0",
"nativescript": {
"id": "xxxxxxxxxx",
"tns-android": {
"version": "4.2.0"
}
},
"scripts": {
"lint": "tslint "app/**/*.ts""
},
"dependencies": {
"ajv": "^6.5.4",
"nativescript-cardview": "^3.1.0",
"nativescript-checkbox": "^3.0.3",
"nativescript-doorbell.io": "0.0.3",
"nativescript-feedback": "^1.1.2",
"nativescript-plugin-firebase": "^7.1.0",
"nativescript-purchase": "^2.0.5",
"nativescript-theme-core": "^1.0.4",
"nativescript-toolbox": "^3.0.1",
"nativescript-ui-dataform": "^3.5.2",
"nativescript-ui-listview": "^3.5.4",
"nativescript-ui-sidedrawer": "^3.5.2",
"tns-core-modules": "^4.2.0"
},
"devDependencies": {
"awesome-typescript-loader": "^5.2.1",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"extract-text-webpack-plugin": "^3.0.2",
"lazy": "1.0.11",
"nativescript-dev-sass": "^1.6.0",
"nativescript-dev-typescript": "^0.7.4",
"nativescript-dev-webpack": "^0.15.1",
"tslint": "5.8.0",
"typescript": "^3.1.1"
}
}

- [ x] Webpack configuration:   As generated by the plugin.  No customizations.

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;

    // 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'
        snapshot, // --env.snapshot
        uglify, // --env.uglify
        report, // --env.report
        sourceMap, // --env.sourceMap
    } = env;

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

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

    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
            },
            // don't resolve symlinks to symlinked modules
            symlinks: false
        },
        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: sourceMap ? "inline-source-map" : "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: {
                                loadCss: !snapshot, // load the application css if in debug mode
                            }
                        },
                    ].filter(loader => !!loader)
                },

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

                {
                    test: /\.css$/,
                    use: { loader: "css-loader", options: { minimize: false, url: false } }
                },

                {
                    test: /\.scss$/,
                    use: [
                        { loader: "css-loader", options: { minimize: false, url: false } },
                        "sass-loader"
                    ]
                },

                {
                    test: /\.ts$/,
                    use: {
                        loader: "awesome-typescript-loader",
                        options: { configFileName: "tsconfig.esm.json" },
                    }
                },
            ]
        },
        plugins: [
            // Define useful constants like TNS_WEBPACK
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
                "process": undefined,
            }),
            // 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(),
            new nsWebpack.PlatformFSPlugin({
                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: [
                "tns-core-modules/bundle-entry-points",
            ],
            projectRoot,
            webpackConfig: config,
        }));
    }

    return config;
};

The text was updated successfully, but these errors were encountered:

NickIliev · 2018-10-02T06:55:25Z

@bearoutthere the latest version of nativescript-dev-webpack are handling these dependencies, and they should not be explicitly installed as dev dependencies. To resolve this run the update script which will remove the obsolete dependencies (and update the versions of the needed ones)

npm i nativescript-dev-webpack@latest --save-dev
./node_modules/.bin/update-ns-webpack --deps --configs

Note that passing the --configs flag will force update your webpack.config.js file so if you have some custom settings make sure to add them after the config files are updated.

Detailed upgrade instructions can be found here.

hyprstereo · 2018-10-02T22:34:08Z

i don't get this

npm WARN [email protected] requires a peer of typescript@^2.7 || ^3 but none is installed. You must install peer dependencies yourself.

i already have latest version, and there are not 2.7

NickIliev · 2018-10-03T07:50:20Z

nativescript-dev-typescript is currently supporting TypeScript 2.72 - 2.9 ([here](https://github.com/NativeScript/nativescript-dev-typescript/blob/master/CHANGELOG.md)). Version 3.x.x of TypeScript is not officially supported.

KirilOkun · 2018-10-07T05:47:34Z

I've followed your suggestions here and in the upgrade instructions. I've also removed node_modules, hooks, and platforms. Upgraded NS and TS and then reinstalled everything. And ran the update script with --deps --configs options.
Same result. Every time i run install or install another plugin i get the following warnings. What am I missing?
Thank you for your help.

$ tns plugin add nativescript-textinputlayout
npm WARN [email protected] requires a peer of typescript@^2.7 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/nativescript/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor and audited 21064 packages in 11.553s
found 7 vulnerabilities (6 low, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
Successfully installed plugin nativescript-textinputlayout.

Here's my package.json:

{
  "name": "com.appxxxxxxxxx",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "version": "0.1.0",
  "nativescript": {
    "id": "com.appxxxxxxxxxxx",
    "tns-android": {
      "version": "4.2.0"
    }
  },
  "scripts": {
    "lint": "tslint \"app/**/*.ts\""
  },
  "dependencies": {
    "moment": "^2.22.2",
    "nativescript": "^4.2.4",
    "nativescript-cardview": "^3.1.0",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-doorbell.io": "0.0.3",
    "nativescript-feedback": "^1.1.2",
    "nativescript-filterable-listpicker": "^2.2.3",
    "nativescript-plugin-firebase": "^7.1.0",
    "nativescript-purchase": "^2.0.5",
    "nativescript-textinputlayout": "^2.0.6",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-ui-dataform": "^3.5.2",
    "nativescript-ui-listview": "^3.5.4",
    "nativescript-ui-sidedrawer": "^3.5.2",
    "tns-core-modules": "^4.2.1"
  },
  "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.6.0",
    "nativescript-dev-typescript": "^0.7.4",
    "nativescript-dev-webpack": "^0.15.1",
    "tslint": "5.8.0",
    "typescript": "^3.1.1"
  }
}

monyarm · 2018-10-27T23:07:13Z

I found the reason for the warning,
webpack-contrib/extract-text-webpack-plugin#749 (comment)

extract-text-webpack-plugin has been deprecated in favor of a different plugin (atleast when using webpack 4)

NickIliev added the question label Oct 2, 2018

NickIliev closed this as completed Oct 3, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

extract-text-webpack-plugin and awesome-typescript-loader missing dependencies #682

extract-text-webpack-plugin and awesome-typescript-loader missing dependencies #682

KirilOkun commented Sep 29, 2018 •

edited by NickIliev

Loading

NickIliev commented Oct 2, 2018 •

edited

Loading

hyprstereo commented Oct 2, 2018

NickIliev commented Oct 3, 2018

KirilOkun commented Oct 7, 2018 •

edited

Loading

monyarm commented Oct 27, 2018

extract-text-webpack-plugin and awesome-typescript-loader missing dependencies #682

extract-text-webpack-plugin and awesome-typescript-loader missing dependencies #682

Comments

KirilOkun commented Sep 29, 2018 • edited by NickIliev Loading

Issue Checklist

Tell us about the problem

Local environment

Project data

NickIliev commented Oct 2, 2018 • edited Loading

hyprstereo commented Oct 2, 2018

NickIliev commented Oct 3, 2018

KirilOkun commented Oct 7, 2018 • edited Loading

monyarm commented Oct 27, 2018

KirilOkun commented Sep 29, 2018 •

edited by NickIliev

Loading

NickIliev commented Oct 2, 2018 •

edited

Loading

KirilOkun commented Oct 7, 2018 •

edited

Loading