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.
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.
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.
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.
