search

NativeScript / nativescript-dev-webpack

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

Having an issue when building using webpack in Nativescript 4.1.0 #549

Closed ghost closed 6 years ago

ghost commented 6 years ago

Issue Checklist

Tell us about the problem

When I upgraded my nativescript to v4.1.0, I encountered an error when building with webpack. I don't have a problem before. It only occur when I upgraded to v4.1.0

ERROR in node_modules/tns-core-modules/ui/styling/gradient.d.ts(7,25): error TS6143: Module '../../css/parser' was resolved to '/Users/hyperstacks-002/Desktop/philipwhiting/ios/experimental-builds/yudabands-ios-build/node_modules/tns-core-modules/css/parser.js', but '--allowJs' is not set.

Local environment

Project data

- [x] Webpack configuration:

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

const webpack = require("webpack"); const nsWebpack = require("nativescript-dev-webpack"); const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");

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 { snapshot, uglify, report, aot } = env; const ngToolsWebpackOptions = { tsConfigPath: "tsconfig.json" };

const config = {
    context: resolve("./app"),
    target: nativescriptTarget,
    entry: {
        bundle: aot ? "./main.aot.ts" : "./main.ts",
        vendor: "./vendor",
    },
    output: {
        pathinfo: true,
        // Default destination inside platforms/<platform>/...
        path: resolve(nsWebpack.getAppPath(platform)),
        libraryTarget: "commonjs2",
        filename: "[name].js",
    },
    resolve: {
        extensions: [".ts", ".js", ".scss", ".css"],
        // Resolve {N} system modules from tns-core-modules
        modules: [
            "node_modules/tns-core-modules",
            "node_modules",
        ],
        alias: {
            '~': resolve("./app")
        },
        // 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",
    },
    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: "css-loader?url=false" },
            { test: /\/app\.scss$/, use: ["css-loader?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",
        }),
        // Copy assets to out dir. Add your own globs as needed.
        new CopyWebpackPlugin([
            { from: "App_Resources/**" },
            { from: "fonts/**" },
            { from: "**/*.jpg" },
            { from: "**/*.png" },
            { from: "**/*.xml" },
        ]),
        // 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(__dirname, "app/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: join(__dirname, "report", `report.html`),
        statsFilename: join(__dirname, "report", `stats.json`),
    }));
}
if (snapshot) {
    config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
        chunk: "vendor",
        projectRoot: __dirname,
        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 webpack.optimize.UglifyJsPlugin({
        mangle: { except: nsWebpack.uglifyMangleExcludes },
        compress,
    }));
}
return config;

};



[NativeScript Forum]: http://forum.nativescript.org
[issues]: https://github.com/nativescript/nativescript-dev-webpack/issues?utf8=✓&q=is%3Aissue
[demo apps]: ../demo
[documentation]: https://docs.nativescript.org/best-practices/bundling-with-webpack
shivapersad commented 6 years ago

I am having the same issue since upgrading the NS v4.1.0 and I am not using webpack to build my project.

jogboms commented 6 years ago

@jannotabamo et @shivapersad I believe you might need to update you {N} Angular dependencies to v6.

rayneram commented 6 years ago

Same problem here after upgrading to v4.1.0 - I'm not using Angular.

sitefinitysteve commented 6 years ago

Yeah no angular here either

sitefinitysteve commented 6 years ago

Can you guys try running

./node_modules/.bin/update-ns-webpack --deps

per https://www.nativescript.org/blog/upgrading-to-nativescript-webpack-0.12.0

arielnmz commented 6 years ago

I had a similar issue and solved it by updating typescript to 2.7.* see https://github.com/NativeScript/nativescript-cli/issues/3663

NickIliev commented 6 years ago

@jannotabamo you might also want to update the webpack.config.js

./node_modules/.bin/update-ns-webpack --configs

Detailed information on what has changed and instructions on how to migrate to 0.12 can be found here

isaacfi commented 6 years ago

@NickIliev

./node_modules/.bin/update-ns-webpack --configs

is not working I have the same issue

NickIliev commented 6 years ago

@isaacfi if you are hitting the same error log it is very likely that you need to update the dependencies in your project.

rm -rf node_modules platforms hooks
npm i tns-core-modules@latest --save
npm i nativescript-angular@latest --save
npm i nativescript-dev-webpack@latest --save
./node_modules/.bin/update-app-ng-deps
./node_modules/.bin/update-ns-webpack --configs --deps
npm i

tns platform add android
tns build android

Do let me know if you are still experiencing troubles after the above steps (and provide any related error log and details)

Closing as the issue is not reproducible with nativescript-dev-webpack@0.12 and the latest modules.