Only on live site: Prerendering failed unexpected token ,

[CybrZr00]

Hi,

Loving the template, and the new additions!

I've been chasing my tail all day with this one! I thought I was doing something wrong, so downloaded a fresh copy of the master, built it, and published it to my host. I was met with the same error!

An unhandled exception was thrown by the application.
Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: SyntaxError: Unexpected token ,
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at findBootModule (C:\Windows\TEMP\vbqidlto.3pa:111:17)
at findRenderToStringFunc (C:\Windows\TEMP\vbqidlto.3pa:116:28)
at renderToStringImpl (C:\Windows\TEMP\vbqidlto.3pa:75:51)
at C:\Windows\TEMP\5hbcb1is.3vb:114:

Got to love those errors! somewhere there's a stray comma, or at least its getting one when its not expected! This error was saved in the logs, I can't for the life of me figure out where this is from, I can build and run it within visual studio, both debug and release, but put in a production environment and IIS and this bug crops up, I don't use docker but I assume that shouldn't matter. I can build and deploy the old Angular 5 version with out any trouble, in case that helps. Maybe its my host, but since everything else seems to work with them I find it unlikely.

Id love to get this running properly, although it seems to be just me with this issue right now!

[MarkPieszak]

Glad to hear it! 👍 💯

Can you run a npm run build:prod to see if that helps point out where the error is in the terminal?

[CybrZr00]

@MarkPieszak Some strange warnings, is the render string being cut short?
Screenshot Here

webpack --progress --color "--env.prod"

[1] Hash: e72d29fe14db273c010f151c9be159d98bb60111
Version: webpack 4.12.1
Child
Hash: e72d29fe14db273c010f
Time: 63995ms
Built at: 2018-06-25 15:52:41
Asset Size Chunks Chunk Names
0.js 1.24 KiB 0 [emitted]
main-client.js 1.81 MiB 1 [emitted] [big] main-client

WARNING in ./node_modules/@angular/core/fesm5/core.js 4808:15-36
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./ClientApp/boot.browser.ts 2:0-47 13:4-18

WARNING in ./node_modules/@angular/core/fesm5/core.js 4820:15-102
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./ClientApp/boot.browser.ts 2:0-47 13:4-18

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main-client.js (1.81 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main-client (1.81 MiB)
      main-client.js

[Gaulomatic]

There is a fix in this thread:
Apply this workaround to the webpack.config.js.

The issue itself is being tracked here: #21560

[CybrZr00]

@Gaulomatic I tried that work around, unfortunately it doesn't seem to remove the error with pre-rendering.

I'm not really much use with webpack, so it may be my code as I had to take an educated guess at it, initially I tried the code as is, but was met with an error about not having ts-loader, so I tried awesome-typescript-loader, but the prerender bug was still there. I then tried just tagging the additional test to the existing like so:

    module: {
      rules: [{
          test: /\.ts$/,
          use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack'
      },
        {
          test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
          use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack',
          parser: { system: true },
        },
        {
          test: /\.html$/,
          use: 'html-loader?minimize=false'
        },
        {
          test: /\.css$/,
          use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize']
        },
        {
          test: /\.(png|jpg|jpeg|gif|svg)$/,
          use: 'url-loader?limit=25000'
        },
        ...sharedModuleRules
      ]
    },
    plugins: [new CheckerPlugin()]
  };

And a couple of other ways. Sadly no matter what, there is still an unexpected token ',' and in addition because I'm so skilled at breaking things, webpack errors now.

[Gaulomatic]

I agree, WebPack can be a bitch at times. When it runs, it runs great. But the meme "Don't touch a running system" was invented by somebody working with WebPack :-)

I just rewrote my complete WebPack config today and yesterday - it was a nightmare. I altered the paths to /dist/vendor and /dist/application to separate the two and added a couple of Plugins.

Do you have a repo for you project?

[CybrZr00]

At some point I'm going to have to learn webpack properly rather than the couple of hacks I've picked up along the way! I'm actually getting the error out of the box with this repo, and only when published to a server!? The warnings from webpack aren't really an issue as far as I can see, just an irritation. The problem comes when the repo is built for production and published to my host. locally everything is fine, and the only issue is the webpack warnings. If I navigate to the temp site I get "Preredndering failed due to an unexpected token ," which combined with the size warning is what made think maybe something was being cut short, but it could just as easily be a stray comma.

[curlyfro]

maybe nodejs is not installed or the wrong version is on the server?

[hartov]

put node.exe to virtual folder on your hosting

[CybrZr00]

I'm using shared hosting so a virtual directory isn't an option.

I noticed that we can now do self contained publishing in VS2017, can we add node.js to that?

My host says that the version installed on the servers is 8.9.4 but I need to upgrade to a semi-dedicated plan to make use of it. Which is odd since I have had all other versions of this repo working on their servers.

[hartov]

Ohhh. I don't like this repo, cause it contains a lot of garbage... you are using smartepasp?

[CybrZr00]

I am using smarterasp! I generally strip this repo down as it's the SSR that I'm really after, and when I try to make my own from scratch it never seems to work! I've looked at a few repo's and this one seems to be the most stable, the only thing I miss is the full angular CLI integration, which is now on the todo list.

[hartov]

So if are you using smarterasp there is virtual folder in some preferences)
check here
and then put into this virtual folder your node.exe from direct path in your pc)
same do i) but when i dont do this i have an another exception.

 public void Configure (IApplicationBuilder app, IHostingEnvironment env, IWeatherRepository _weatherRepository) {
            if (env.IsDevelopment ()) {
                app.UseDeveloperExceptionPage ();
            } else {
                app.UseExceptionHandler ("/Home/Error"); < ----- here
            }

but it was another version of this repo (it was dotnet 2.0 and angular 5).
this version i didn`t try to host/
at first try to create vurtual folder with node.

[CybrZr00]

I didn't know that was even there :) do I just create a virtual folder (I'll call it nodejs) upload node.exe, then just publish? Do I need to configure a path anywhere?

[CybrZr00]

Well damn! that worked thanks @hartov