Import from library

I tried a little vtk.js and i was importing with a script tag.
I want to have the library without taking in on the server but when i download it and try :
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor'; var actor = vtkActor.newInstance();
instead of :
var actor = vtk.Rendering.Core.vtkActor.newInstance();

I’m getting the error “Uncaught SyntaxError: Cannot use import statement outside a module”.

I then tried <script src=“index.js” type=“module”> but two errors occurs at this moment :
- “Access to script at {filepath} from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”
even with : <?php header('Access-Control-Allow-Origin: *'); ?>
- GET {filepath} net::ERR_FAILED

Do someone have an idea on what’s my problem ?
Thanks for helping.


When using vtk.js from with a script tag, you can only do var actor = vtk.Rendering.Core.vtkActor.newInstance();. The import approach will only work in a build environment as outlined in the docs:

Let us know if you need any clarifications.

Another way to do something similar to the import line is

var vtkActor = vtk.Rendering.Core.vtkActor;

var actor = vtkActor.newInstance();

I tried to follow the doc:
But there are a few things I don’t understand.

Tell me if i’m wrong, the folder must be build like :
- index.html (he calls “MyWebApp.js”)
- MyWebApp.js (What’s in it ?)
- […]

  • index.js (fill with the imports and model specifications)
  • […]
  • package.json
  • package-lock.json

“webpack.config.js” : There is multiple webpack.config, wich one is it ?
The fact that we use “__dirname” in it to get the root path of the folder do not mean it should be in the root of the folder ?

I don’t really get how all this works, thank you for your help.

Sorry for the way it writes the tree of the folder in the forum, this should be clearer :

index.html (he calls “MyWebApp.js”)
MyWebApp.js (What’s in it ?)
index.js (fill with the imports and model specifications)

The purpose of the docs is to get you set up with a webpack-built project. dist/ will contain your final built application, node_modules/ contains the packages you’ve installed via npm (you don’t create this), src/ contains your source files, and webpack.config.js is your webpack configuration file. In the webpack config, __dirname is the directory that contains the webpack config. If you have your webpack config in the root of your project, then that is where __dirname points.

For a concrete example, you can check out vtk.js examples.

Thank you i got it.
I still have a problem, when i build and start it, an error still occurs :
Uncaught TypeError: vtk_js_Sources_Rendering_Core__WEBPACK_IMPORTED_MODULE_7__.default.newInstance is not a function
at eval (index.js:63)
at Module…/src/index.js (MyWebApp.js:3581)
at webpack_require (MyWebApp.js:20)
at eval (webpack:///multi_(:8081/webpack)-dev-server/client?:2:18)
at Object.0 (MyWebApp.js:3592)
at webpack_require (MyWebApp.js:20)
at MyWebApp.js:84
at MyWebApp.js:87

I don’t know why because my index.js seems correct :

import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow';
import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
import vtkConeSource from 'vtk.js/Sources/Filters/Sources/ConeSource';
import vtkOpenGLRenderWindow from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow';
import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core';
import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera';

var renderWindow = vtkRenderWindow.newInstance();
var renderer = vtkRenderer.newInstance();
var cone = vtkConeSource.newInstance({ height: 1.0});

var openGLRenderWindow = vtkOpenGLRenderWindow.newInstance();

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


var container = document.getElementById("window");
var size = container.getBoundingClientRect();
openGLRenderWindow.setSize(size.width, size.height);

var interactor = vtkRenderWindowInteractor.newInstance();


I guess you have a idea on what’s wrong ?
Thank you Forrest.

Your import for vtkRenderWindowInteractor should be import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor. Everything else looks fine from a quick glance. :slight_smile:

That was the error ! Thank you again ! :ok_hand:

BTW i still have the problem that i said in my 1st post :
Access to script at {filepath} from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
even with : <?php header('Access-Control-Allow-Origin: *'); ?>

I try to load a local model in .obj and when i load the page on localhost, “<?php header('Access-Control-Allow-Origin: *'); ?>” is in commentary and i have the error message from CORS.

Someone know why i can’t allow an origin to be able to load a local model ?

This error can happen in different cases depending on whether you’re working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind “Cannot use import statement outside a module” error, and the solution depends on how you call the module or script tag.

Add type=“module” inside the script tag

When working with ECMAScript modules and JavaScript module import statements in the browser, you’ll need to explicitly tell the browser that a script is module. To do this, you have to add type=“module” onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.

<script type="module" src="./index.js"></script>

If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property “type”: “module” as shown below.

  // ...
  "type": "module",
  // ...