Vtk-js: Import 'macro' results error

[EJShim]

https://kitware.github.io/vtk-js/docs/develop_class.html

I am following this tutorial to create new vtk.js class,

but it results error when

when I use

import macro from 'vtk.js/Sources/macro';

it results error saying

node_modules\vtk.js\Sources\macro.js:1
(function (exports, require, module, __filename, __dirname) { import vtk from './vtk';
                                                                     ^^^

SyntaxError: Unexpected identifier

How can I make a new vtk.js class without error?

Thanks

[jourdain]

I am guessing you didn't set up the proper loaders for your project.

[jourdain]

Did you try to follow that first?

[EJShim]

@jourdain I imported vtk.js based on create-react-app setting. there were problems of using filename macro.js in basic react-app setting, so I copied macro.js from vtk.js source and pasted it in my project folder using different name (vtkMacro.js) and solved it temporarily..

[jourdain]

Once the file moved inside your project the name should not matter. What you are explaining totally makes sense since you didn't set the loader rules to handle babel within node_modules/vtk.js. But as long as you are moving forward and keep learning more that's good.

[EJShim]

Thank you for your replying. Actually I added vtkRules and some additional webpack settings according to vtk.js manual, and all the vtk features worked fine.
this is one of my project using vtk.js with react-app setting

I found that some of babel rules that is pre-defined in create-react-app, handles files with filename macro.js for some kind of special usage. So it did not properly work when I copied this file into my project without changing filename.

Thank you for your kind reply anyway!

[SohailButt]

Hi there,

I am having same issue, I have followed all the instructions on vtk.js site

GET http://localhost/vtk.js/Sources/marco net::ERR_ABORTED 404 (Not Found)

This is the error I am getting.

Help needed!

[LYF620]

https://kitware.github.io/vtk-js/docs/develop_class.html

I am following this tutorial to create new vtk.js class,

but it results error when

when I use

import macro from 'vtk.js/Sources/macro';

it results error saying

node_modules\vtk.js\Sources\macro.js:1
(function (exports, require, module, __filename, __dirname) { import vtk from './vtk';
                                                                     ^^^

SyntaxError: Unexpected identifier

How can I make a new vtk.js class without error?

Thanks

can you tell me how to solve this problem?Help needed

[jourdain]

Your loaders? How did you configure your web project?

[jourdain]

I guess that was my comment when that bug was created and that still stand. Just scroll up to get the answer to your question.

[SohailButt]

Your loaders? How did you configure your web project?

I followed this setup guide sir
https://kitware.github.io/paraviewweb/docs/setup.html#Install-ParaViewWeb

[floryst]

That's the paraviewweb setup docs, not the vtk.js setup docs. You can follow the vtk.js setup docs here: https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html

[SohailButt]

That's the paraviewweb setup docs, not the vtk.js setup docs. You can follow the vtk.js setup docs here: https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html

I need to setup paraviewweb not vtk.js, I have already setup vtk.js

[jourdain]

This is not true @SohailButt.
Your problem is that you think you need ParaViewWeb but you do not need it based on what you are trying to do.

[SohailButt]

Sir is vtkjs different from paraviewweb?

[jourdain]

In practice all the new ParaViewWeb applications that we have created in the last 2 years are based on vtk.js and not on the ParaViewWeb repo.

Do you start hearing me now, when I'm telling you that you do not need to build ParaViewWeb? And the same is true for vtk.js. All those apps, depends on vtk.js but does not build it either...

[HugoPrin]

Hello everyone,
I'm trying to set vtk.js following this tutorial: [https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html]
but I got some issues:

Is it because I'm on macOs?

Big thanks in advance for your help!

[jourdain]

Where is the error, I only see expected warnings?

Just follow along the guide and you should be good to go.

[jourdain]

I'm developing on macOS, so I'm pretty sure that won't be an issue.

[HugoPrin]

You're right sorry, the error are after the command npm run build:

Thank for your previous response I really appreciated

[jourdain]

Which version of kw-web-suite got pulled in? You may have to specify an older version. Like the one currently used in package.json.

Should do npm install [email protected] instead of npm install kw-web-suite

FYI @floryst

[HugoPrin]

I downloaded the MyWebProject.zip file you mentioned and it worked saying my project Project is running at http://localhost:8081/

Thank you so much

[jourdain]

Can you do a diff to see what was the difference between what you have and what I created a while back following that guide?

[HugoPrin]

what do you mean by a diff ?

[jourdain]

diff -r /path/to/your/source /path/to/my/source

Make sure you remove the /node_modules directory so only few files are compared

[HugoPrin]

Hopping this could help you

[jourdain]

This is perfect, thanks!

This show that my assumption on kw-web-suite version is indeed the issue here.

[jourdain]

@floryst we should fix the version of kw-web-suite in the doc.

[floryst]

Oh, this is a result of us not yet releasing the latest version of vtk.js that is compatible with the latest version of kw-web-suite. Once that happens then this will work fine.

[GeorgeFuller]

https://kitware.github.io/vtk-js/docs/develop_class.html

I am following this tutorial to create new vtk.js class,

but it results error when

when I use

import macro from 'vtk.js/Sources/macro';

it results error saying

node_modules\vtk.js\Sources\macro.js:1
(function (exports, require, module, __filename, __dirname) { import vtk from './vtk';
                                                                     ^^^

SyntaxError: Unexpected identifier

How can I make a new vtk.js class without error?

Thanks

I have this same issue, I also solved this by copying and renaming macro.js (I am also using create react app). macro.js has some private variables used for deciding if things need updating on the pipeline and this doesn't work correctly with a duplicated file. Is there some kind of babel work around for this?

[jourdain]

This is because you are consuming vtk.js sources without applying the proper webpack rules.

If you don't want to dig into webpack rules while using create react app it might be easier to use the ESM build of vtk.js (@kitware/vtk.js) as those files are already transpilled so you can consume them as-is without specific loader.

We are still in the process of documenting that part, but if you have some understanding of web development you might be able to figure it out on your own.

HTH