Preview Failed. Webpack failed to compile the application!

Hello Greg,

If you suspect that the issue might be related to adding SQL connections, perhaps, the issue might be that there is a conflict with the port numbers (however Kendo UI Builder determine the ports to use dynamically).

You can check the Kendo UI Builder logs by using either of the following approaches:

- Click on the ">_ OUTPUT" button at the bottom of the Kendo UI Builder to open a console panel.

- View full log file at C:\Users\<User_Name>\AppData\Roaming\KendoUIBuilder\KUIBLog.log

I hope this helps.

The >_OUTPUT shows nothing.

Does this suggest anything?

{"level":"verbose","message":"apiService: previewApp","timestamp":"2018-03-12T03:53:40.727Z"}

{"level":"verbose","message":"previewService: \n> abc-cloud-apps-web@0.0.1 start D:\\ABC\\abcdev4\\ABCCloudAppsWeb\\app\n> webpack-dev-server \"--port\" \"4200\"\n\n","timestamp":"2018-03-12T03:53:43.136Z"}

{"level":"verbose","message":"previewService: fallbackLoader option has been deprecated - replace with \"fallback\"\n","timestamp":"2018-03-12T03:53:45.571Z"}

{"level":"verbose","message":"previewService: fallbackLoader option has been deprecated - replace with \"fallback\"\n","timestamp":"2018-03-12T03:53:45.587Z"}

{"level":"verbose","message":"previewService: Project is running at localhost:4200/\nwebpack output is served from /\n","timestamp":"2018-03-12T03:53:45.831Z"}

{"level":"verbose","message":"previewService: 404s will fallback to /index.html\n","timestamp":"2018-03-12T03:53:45.831Z"}

{"level":"verbose","message":"previewService: (node:4772) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see github.com/.../56\r\nparseQuery() will be replaced with getOptions() in the next major version of loader-utils.\n","timestamp":"2018-03-12T03:53:47.560Z"}

tons of stuff follows but is mostly unformatted and difficult to read.

These log entries do not seem to indicate an issue.

It shows that the webpack server started with port 4200.

Are the broker and SQL servers running on the same machine as Kendo UI Builder?

Is port 4200 used by another process?

What do you see when you access http://localhost:4200 from a web browser?

A way to troubleshoot issues with the Preview, is to start the webpack dev server manually from the command line:

cd <project-name>\app

npm start

Using this approach, the webpack dev server will start and show the output to the console.

You should be able to see error messages there.

I hope this helps.

http://localhost:4200  use to show the preview including data. Now it does not. It still feels related to the SQL connection port change.

proenv>npm start

> abc-cloud-apps-web@0.0.1 start D:\ABC\abcdev4\ABCCloudAppsWeb\app

> webpack-dev-server

fallbackLoader option has been deprecated - replace with "fallback"

fallbackLoader option has been deprecated - replace with "fallback"

events.js:160

     throw er; // Unhandled 'error' event

     ^

Error: listen EADDRINUSE 127.0.0.1:4200

   at Object.exports._errnoException (util.js:1018:11)

   at exports._exceptionWithHostPort (util.js:1041:20)

   at Server._listen2 (net.js:1262:14)

   at listen (net.js:1298:10)

   at net.js:1408:9

   at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)

   at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! abc-cloud-apps-web@0.0.1 start: `webpack-dev-server`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the abc-cloud-apps-web@0.0.1 start script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\abcdev\AppData\Roaming\npm-cache\_logs\2018-03-12T09_14_28_321Z-debug.log

Please note that that the "npm start" command should be run without running Preview from Kendo UI Builder.

Could you run it again if Preview had been run? You could exit Kendo UI Builder and run "npm start" directly.

In the console output you can see the error:

   Error: listen EADDRINUSE 127.0.0.1:4200

This means that the webpack dev server is failing to start because the port is in used by another process.

Did you run Preview from Kendo UI Builder before running "npm start"?

The conflict in this run might be with the other instance of the webpack dev server.

Could you check what process is using port 4200 ?

You can use "netstat -ab" from the command line to check.

If port 4200 is used by node.exe, then it might be a previous instance of the webpack dev server and you might need to run it again.

> http://localhost:4200  use to show the preview including data. Now it does not. It still feels related to the SQL connection > port change.

Do you see any messages in the Web Inspector console for this blank page?

WOW. I restarted the development system, restarted the databases (just in case) and ran npm start. It started spew output and then came up and said ... Here's your error right here  and pointed to character in a javascript file. I looked and it and observed that it was, indeed, an error.  Fixed the error. Thanks.

Restarted the dev system. Ran npm start. It displayed the error, which I fixed. Thanks. A very useful tool.