question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Universal Rendering - ReferenceError: webpackJsonp is not defined

See original GitHub issue

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.6 node: 7.0.0 os: darwin x64 @angular/animations: 4.3.6 @angular/common: 4.3.5 @angular/compiler: 4.3.5 @angular/core: 4.3.5 @angular/forms: 4.3.5 @angular/http: 4.3.5 @angular/platform-browser: 4.3.5 @angular/platform-browser-dynamic: 4.3.5 @angular/router: 4.3.5 @angular/cli: 1.0.6 @angular/compiler-cli: 4.3.5

Repro steps.

I built server side rendering support as in the story https://github.com/angular/angular-cli/wiki/stories-universal-rendering

I have a file server.js with the code

// Load zone.js for the server.
require('zone.js/dist/zone-node');

// Import renderModuleFactory from @angular/platform-server.
var renderModuleFactory = require('@angular/platform-server').renderModuleFactory;

// Import the AOT compiled factory for your AppServerModule.
// This import will change with the hash of your built server bundle.
var AppServerModuleNgFactory = require('./dist-server/main.bundle').AppServerModuleNgFactory;

// Load the index.html file.
var index = require('fs').readFileSync('./src/index.html', 'utf8');

// Render to HTML and log it to the console.
renderModuleFactory(AppServerModuleNgFactory, {document: index, url: '/'}).then(html => console.log(html));

invoke node server.js

The log given by the failure.

ReferenceError: webpackJsonp is not defined
    at Object.<anonymous> (/Users/suiluj/projects/design-portal-frontend/dist-server/main.bundle.js:1:63)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/suiluj/projects/design-portal-frontend/server.js:9:32)
    at Module._compile (module.js:573:32)

Desired functionality.

Should print out the content on index.html

Mention any other details that might be useful.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17 (2 by maintainers)

github_iconTop GitHub Comments

20reactions
sasxacommented, Oct 25, 2017

Since server doesn’t do anything with webpack, most likely cause of this is in .angular.cli.json. When I created new CLI app I forgot to set:

  "platform": "server",

Adding this fixes the issue.

5reactions
rogerjacobrjcommented, Oct 15, 2017

Hi guys, I followed the steps exactly as mentioned in the link : https://github.com/angular/angular-cli/wiki/stories-universal-rendering to apply server side rendering for my angular app. I didn’t add any third party extensions or modules, but when I fire up the app by hitting “node dist/server.js” after completing all other steps, I get the following error:

angular-cli-error

Following are from my package.json file:

“dependencies”: { “@angular/animations”: “^4.0.0”, “@angular/common”: “^4.0.0”, “@angular/compiler”: “^4.0.0”, “@angular/core”: “^4.0.0”, “@angular/forms”: “^4.0.0”, “@angular/http”: “^4.0.0”, “@angular/platform-browser”: “^4.0.0”, “@angular/platform-browser-dynamic”: “^4.0.0”, “@angular/platform-server”: “^4.4.5”, “@angular/router”: “^4.0.0”, “@nguniversal/module-map-ngfactory-loader”: “^1.0.0-beta.3”, “core-js”: “^2.4.1”, “rxjs”: “^5.1.0”, “ts-loader”: “^2.3.7”, “zone.js”: “^0.8.4” }, “devDependencies”: { “@angular/cli”: “1.2.1”, “@angular/compiler-cli”: “^4.0.0”, “@angular/language-service”: “^4.0.0”, “@types/jasmine”: “~2.5.53”, “@types/jasminewd2”: “~2.0.2”, “@types/node”: “~6.0.60”, “codelyzer”: “~3.0.1”, “jasmine-core”: “~2.6.2”, “jasmine-spec-reporter”: “~4.1.0”, “karma”: “~1.7.0”, “karma-chrome-launcher”: “~2.1.1”, “karma-cli”: “~1.0.1”, “karma-coverage-istanbul-reporter”: “^1.2.1”, “karma-jasmine”: “~1.1.0”, “karma-jasmine-html-reporter”: “^0.2.2”, “protractor”: “~5.1.2”, “ts-node”: “~3.0.4”, “tslint”: “~5.3.2”, “typescript”: “~2.3.3” }

Has this issue been resolved ? If yes, please help to solve this out. Thank You.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack - Uncaught ReferenceError: webpackJsonp is not ...
I talked to a friend and he said me the problem was the order of the import files in index.html, it should be:...
Read more >
ReferenceError: webpackJsonp is not defined - Bountysource
I built server side rendering support as in the story https://github.com/angular/angular-cli/wiki/stories-universal-rendering.
Read more >
webpackJsonp is not defined-angular.js - appsloveworld
Coding example for the question Webpack - Uncaught ReferenceError: webpackJsonp is not defined-angular.js.
Read more >
ReferenceError webpackJsonp is not defined - PI Square
Hi Guys. I've been trying to build my own PIVision symbol using the new amCharts libraries, however, I'm running into a "webpackJsonp is...
Read more >
angular/universal - Gitter
do you mean your scripts to boot your real application aren't being ... webpackJsonp(["main"],{ ^ ReferenceError: webpackJsonp is not defined at Object.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found