Project no longer works after installing webpack. Blank screen


#1

Hello,

I have never used webpack for my N projects before. I installed it the first time today. I have verified that all my tns packages are up to date. When I compile my project with webpack (tns run android --bundle) I don’t get any errors or warnings. My app starts on the emulator just fine. However, aside from the navigation bar (or app bar) no content is visible. Nothing. I’m just looking at the white blank screen. This is for both iOS and Android. I’m using plain JS.

When I remove webpack, it works fine. I know it’s kinda vague, but anyone came across anything like this before and what might the issue be?

  1. Installed npm install nativescript-dev-webpack --save-dev
  2. run npm install
  3. run tns run android --bundle

Thanks for any pointers.

nativescript: 3.4.3
tns-core-modules: 3.4.1
tns-android: 3.4.2
tns-ios: 3.4.1

#2

Do you see any errors in log? If not, try to placing logs in your first screen to find where exactly it stops. Also you can use the uncaught exception event thats fired during unhandled JS exceptions,

application.on(application.uncaughtErrorEvent, function (args) {
 // log it to see what is the exception and where it happens
});

#3

Thanks, but no, I’m not getting any ‘uncaughtErrorEvent’. Also, as I mentioned, there are no logs of any kind about errors or warnings.

This is my project structure (reduced to basics here):

start (folder)
  start.js
app.js

The app.js file basically only declares the module to start (per documentation):
application.start({ moduleName: "start/start" });

However, my onNavigatedTo function (which is where I initialize the app in the start.js file) doesn’t seem to get called when I bundle the app with webpack (tns run ios --bundle). If I place a console.log() just before application.start(), I get the log in the console, but no log from onNavigatedTo().

It seems that when doing a webpack build, it doesn’t find onNavigatedTo() inside the start/start.js file and so it just sitting there with a white screen, doing nothing.


#5

Well, apparently I have overlooked a MAJOR requirement, since this was stated in a MINOR comment that for some reason I failed to take notice of.

Referring to the webpack update page (https://www.nativescript.org/blog/nativescript-webpack-0.9.0-what-changed-and-how-to-upgrade)…

…under the heading Modify Bundle-Config, there’s a comment in the code snippet that states:

// This will register each `page` postfixed xml, css, js, ts, scss etc. in the app/ folder

(And that actually being stated in the code snippet’s comment in the documentation as well https://docs.nativescript.org/best-practices/bundling-with-webpack.)

Whoa! Pfff! Phew! Sheesh! (…insert other sound FX here…) That seems to be a VERY IMPORTANT factor to consider, and for some reason I have overlooked it.

And so the conclusion is, that I had to rename all of my module files (js) and their corresponding XML files by appending -page after their name. Ok, it was my mistake for some reason reading it, but not interpreting it (would have saved me a few hours of headaches), but I recommend that such crucial information maybe should be bolded, or maybe put in one of those “IMPORTANT!” sections.

"IN ORDER FOR WEBPACK TO WORK AS IS OUT OF THE BOX, YOU MUST APPEND "-page" AFTER YOUR PAGE .JS AND THEIR CORRESPONDING .XML FILE(S)!"


#6

Hi,
I recently got the same problem than you and if you don’t want to rename your files, you can also just edit this line in bundle-config.js and make it match your naming convention :

const context = require.context("~/", true, /(page|fragment)\.(xml|css|js|ts|scss|less|sass)$/);
change (page|fragment) by your regex and it should work