# VTK.js blank screen

**URL:** https://discourse.vtk.org/t/vtk-js-blank-screen/6336
**Category:** Web
**Created:** [August 9, 2021, 1:13pm UTC](https://discourse.vtk.org/t/vtk-js-blank-screen/6336 "2021-08-09T13:13:37Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![jordvink](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/j/848f3c/32.png) [@jordvink](https://discourse.vtk.org/u/jordvink)
#### Post date: [August 9, 2021, 1:13pm UTC](https://discourse.vtk.org/t/vtk-js-blank-screen/6336/1 "2021-08-09T13:13:37Z")

</div>

I am trying to get the VTK.js examples to work in my Django Project and the webpack produces the js code (attached). However, when I load this code in my html template I get a blank (responsive) window. Any idea what I am missing here?

Hope you can help!

Jord  
[app.js](https://discourse.vtk.org/uploads/short-url/nScQcg5WlZgDWmSnUtBzyiSYyhE.js) (1.0 MB)

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [August 9, 2021, 3:51pm UTC](https://discourse.vtk.org/t/vtk-js-blank-screen/6336/2 "2021-08-09T15:51:27Z")

</div>

Hard to tell without seeing how you bind your view to your html and what you are doing. Having your app running somewhere could help, but having the code could be easier too.

---

<div class="post-metadata">

### Author: ![jordvink](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/j/848f3c/32.png) [@jordvink](https://discourse.vtk.org/u/jordvink)
#### Post date: [August 9, 2021, 4:24pm UTC](https://discourse.vtk.org/t/vtk-js-blank-screen/6336/3 "2021-08-09T16:24:14Z")

</div>

Hi Sebastien,

Thanks for your reply! I use django-webpack-loader ([GitHub - django-webpack/django-webpack-loader: Transparently use webpack with django](https://github.com/django-webpack/django-webpack-loader)). My index.js:

```auto
import 'regenerator-runtime/runtime';
import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';

// --- Set up our renderer ---

const container = document.querySelector('#container');

// We use the wrapper here to abstract out manual RenderWindow/Renderer/OpenGLRenderWindow setup
const genericRenderWindow = vtkGenericRenderWindow.newInstance();
genericRenderWindow.setContainer(container);
genericRenderWindow.resize();

const renderer = genericRenderWindow.getRenderer();
const renderWindow = genericRenderWindow.getRenderWindow();

// --- Set up the cone actor ---

const actor = vtkActor.newInstance();
const mapper = vtkMapper.newInstance();

// this generates a cone
const coneSource = vtkConeSource.newInstance({
  height: 1.0,
});

// the mapper reads in the cone polydata
// this sets up a pipeline: coneSource -> mapper
mapper.setInputConnection(coneSource.getOutputPort());

// tell the actor which mapper to use
actor.setMapper(mapper);

// --- Add actor to scene ---

renderer.addActor(actor);

// --- Reset camera and render the scene ---

renderer.resetCamera();
renderWindow.render();

// --- Expose globals so we can play with values in the dev console ---
global.renderWindow = renderWindow;
global.renderer = renderer;
global.coneSource = coneSource;
global.actor = actor;
global.mapper = mapper;

```

webpack config:

```auto
var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var vtkRules = require('@kitware/vtk.js/Utilities/config/dependency.js').webpack.core.rules;

module.exports = {
  context: __dirname,
  entry: './assets/js/index',
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ].concat(vtkRules),
  },
  output: {
      path: path.resolve('./assets/webpack_bundles/'),
      filename: "[name]-[hash].js"
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ]

}

```

and html:

```auto
{% extends "base_generic.html" %}
{% load render_bundle from webpack_loader %}

{% block content %}

<div id="container">
    {% render_bundle 'main' %}
</div>

{% endblock %}

```

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [August 10, 2021, 2:44pm UTC](https://discourse.vtk.org/t/vtk-js-blank-screen/6336/4 "2021-08-10T14:44:15Z")

</div>

It might be due to the fact that you are not loading a profile assuming you are using vtk.js 17+.

See [breacking changes](https://github.com/Kitware/vtk-js/blob/master/BREAKING_CHANGES.md#from-17x-to-18)

---

<div class="post-metadata">

### Author: ![jordvink](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/j/848f3c/32.png) [@jordvink](https://discourse.vtk.org/u/jordvink)
#### Post date: [September 6, 2021, 10:07am UTC](https://discourse.vtk.org/t/vtk-js-blank-screen/6336/5 "2021-09-06T10:07:32Z")

</div>

That solved my problem, thanks!