Import from library

Hello,
I tried a little vtk.js and i was importing unpkg.com 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.

Hi,

When using vtk.js from unpkg.com 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: https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html

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();

Hi,
I tried to follow the doc: https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html
But there are a few things I don’t understand.

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

  • index.js (fill with the imports and model specifications)
    *vtk.js
  • […]
  • 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 :

dist
index.html (he calls “MyWebApp.js”)
MyWebApp.js (What’s in it ?)
node_modules
[…]
src
index.js (fill with the imports and model specifications)
vtk.js
[…]
package.json
package-lock.json

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();
renderWindow.addView(openGLRenderWindow);

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

mapper.setInputConnection(cone.getOutputPort());
actor.setMapper(mapper);
renderer.addActor(actor);
renderer.resetCamera();
renderWindow.addRenderer(renderer);

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

var interactor = vtkRenderWindowInteractor.newInstance();
interactor.setView(openGLRenderWindow);
interactor.initialize();
interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
interactor.bindEvents(container);

renderWindow.render();

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 ?