search

NativeScript / nativescript-dev-webpack

A package to help with webpacking NativeScript apps.
Apache License 2.0
97 stars 49 forks source link

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

Closed KirilOkun closed 5 years ago

KirilOkun commented 5 years ago

Issue Checklist

Tell us about the problem

Clean install throws 2 warnings:

npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN awesome-typescript-loader@5.0.0 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

Project data

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;
};
NickIliev commented 5 years ago

@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 commented 5 years ago

i don't get this

npm WARN awesome-typescript-loader@5.2.1 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 commented 5 years ago

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 commented 5 years ago

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 awesome-typescript-loader@5.0.0 requires a peer of typescript@^2.7 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/nativescript/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ nativescript-textinputlayout@2.0.6
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 commented 5 years ago

I found the reason for the warning, https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/749#issuecomment-374549467

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