App not displaying correctly after enabling webpack

[delanick]

Hi there,

Context: I was using NS CLI 5.2.4 (or 5.2.3 I think) up until last night and my app was running fine. At some point the iOS version started crashing after I installed two plugins. Removing those plugins never resolved the issue.

I decided to update my project to CLI 5.4.2 which uses Webpack, seeing as NS 6 will require it anyway. I updated my app and installed uglifyjs-webpack-plugin as a devDependency after the console moaning about it and failing my builds.

Since then, my app builds fine on both iOS and Android, but the CSS is not applied so it all looks terrible. No fonts are applied, no CSS styles, nothing.

Is there anything I missed when installing the uglify plugin? Will there be a need for this plugin from NS6 onwards?

How do I code and set up my project for webpack/bundle if I've never used it before?

Thanks
Nick

[NickIliev]

@delanick can you share with us the content of your package.json file. Make sure that you are using the latest versions not only of the CLI but also of nativescript-dev-webpack, tns-core-modules, and runtimes (tns-android&tns-ios`).

Is your CSS not loaded at all or are you missing only specific CSS classes? If the latter, then check where the CSS classes are located (e.g. in app.css, in a page-specific CSS file, from a CSS theme, or are they inline styles).

[rosen-vladimirov]

Hey @delanick ,

With the latest version of nativescript-dev-webpack, we are no longer using uglify, instead we rely on terser. As your webpack.config.js is not updated, you see the error for missing uglifyjs-webpack-plugin. I recommend you to use the latest webpack.config.js. You can replace your own one with the default by executing:

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

After that you can safely remove the uglifyjs-webpack-plugin.

The next thing you should check is that your global css file is called app.css. In case you have a custom name, you should register it as described here.

Regarding styles in other pages, with webpack only .css files named -page.css or -root.css are automatically included in the application (and all .css files imported in them). In case you have .css files named in another way, you should rename them.

Can you please try the suggestions and inform us if they resolve your issue?

[delanick]

@NickIliev here you go:

{
  "nativescript": {
    "id": "za.co.WeSignIt",
    "tns-ios": {
      "version": "5.0.0"
    },
    "tns-android": {
      "version": "5.2.0-2019-01-21-120230-01"
    }
  },
  "description": "Translates written content into Sign Language",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "scripts": {
    "lint": "eslint \"app/**/*.js\""
  },
  "dependencies": {
    "nativescript-appversion": "1.4.2",
    "nativescript-barcodescanner": "3.2.0",
    "nativescript-iqkeyboardmanager": "1.5.1",
    "nativescript-loading-indicator": "2.5.2",
    "nativescript-material-icons": "1.0.3",
    "nativescript-platform-css": "1.6.8",
    "nativescript-ratings": "1.0.1",
    "nativescript-ripple": "2.2.1",
    "nativescript-theme-core": "1.0.6",
    "nativescript-ui-listview": "6.4.0",
    "nativescript-ui-sidedrawer": "6.0.0",
    "nativescript-videoplayer": "4.2.1",
    "rxjs": "6.5.2",
    "tns-core-modules": "5.4.2"
  },
  "devDependencies": {
    "eslint": "5.16.0",
    "nativescript-dev-sass": "1.7.0",
    "nativescript-dev-webpack": "0.24.1"
  },
  "readme": "NativeScript Application",
  "author": "delanick"
}

@rosen-vladimirov did the config thing, helped nothing. My app.css, is called app-common.scss . -would that make a difference?