InsightSoftwareConsortium / InsightSoftwareConsortium/ITK-Wasm

migrate from itk.js to itk-wasm failed

Open
#648 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Python
Stars
235
Forks
61
Avg merge
4d 19h
Merged PRs (30d)
4

Description

Hi all,

I am trying to migrate from itk.js to itk-wasm, however, but failed with some errors below:
```

ERROR Failed to compile with 4 errors 10:11:09 ├F10: PM┤

error in ./node_modules/itk-wasm/dist/core/internal/createWebWorkerPromise.js

Module parse failed: Unexpected token (35:82)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // adds worker dynamic import support:
| // https://bugzilla.mozilla.org/show_bug.cgi?id=1540913
> worker = new Worker(new URL('../../web-workers/pipeline.worker.js', import.meta.url));
| }
| else {

@ ./node_modules/itk-wasm/dist/pipeline/runPipeline.js 1:0-80 33:59-81
@ ./node_modules/itk-wasm/dist/pipeline/browser/index.js
@ ./node_modules/itk-wasm/dist/index.js
@ ./src/wIO/wImageIO.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/components/readDICOMSeries.vue?vue&type=script&lang=js&
@ ./example/components/readDICOMSeries.vue?vue&type=script&lang=js&
@ ./example/components/readDICOMSeries.vue
@ ./example/router/index.js
@ ./example/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.112:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./example/main.js

error in ./node_modules/itk-wasm/dist/io/internal/findLocalImageIOPath.js

Module parse failed: Unexpected token (4:54)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import localPathRelativeToModule from './localPathRelativeToModule.js';
| function findLocalImageIOPath() {
> const buildPath = localPathRelativeToModule(import.meta.url, '../../image-io');
| if (fs.existsSync(buildPath)) {
| return buildPath;

@ ./node_modules/itk-wasm/dist/io/readImageLocalFile.js 9:0-70 17:25-45
@ ./node_modules/itk-wasm/dist/io/node/index.js
@ ./node_modules/itk-wasm/dist/index.js
@ ./src/wIO/wImageIO.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/components/readDICOMSeries.vue?vue&type=script&lang=js&
@ ./example/components/readDICOMSeries.vue?vue&type=script&lang=js&
@ ./example/components/readDICOMSeries.vue
@ ./example/router/index.js
@ ./example/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.112:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./example/main.js

error in ./node_modules/itk-wasm/dist/io/internal/findLocalMeshIOPath.js

Module parse failed: Unexpected token (4:54)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import localPathRelativeToModule from './localPathRelativeToModule.js';
| function findLocalMeshIOPath() {
> const buildPath = localPathRelativeToModule(import.meta.url, '../../mesh-io');
| if (fs.existsSync(buildPath)) {
| return buildPath;

@ ./node_modules/itk-wasm/dist/io/readMeshLocalFile.js 9:0-68 17:24-43
@ ./node_modules/itk-wasm/dist/io/node/index.js
@ ./node_modules/itk-wasm/dist/index.js
@ ./src/wIO/wImageIO.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/components/readDICOMSeries.vue?vue&type=script&lang=js&
@ ./example/components/readDICOMSeries.vue?vue&type=script&lang=js&
@ ./example/components/readDICOMSeries.vue
@ ./example/router/index.js
@ ./example/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.112:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./example/main.js
@ ./node_modules/itk-wasm/dist/io/polyDataToMeshNode.js 4:0-82 16:27-47
@ ./node_modules/itk-wasm/dist/io/node/index.js
@ ./node_modules/itk-wasm/dist/index.js
@ ./src/wIO/wImageIO.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/components/readDICOMSeries.vue?vue&type=script&lang=js&
@ ./example/components/readDICOMSeries.vue?vue&type=script&lang=js&
@ ./example/components/readDICOMSeries.vue
@ ./example/router/index.js
@ ./example/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.112:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./example/main.js

```

I am using vue as the framework, and below is the ```vue.config.js ```

```
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

const itkConfig = path.resolve(__dirname, 'itkConfig.js');
module.exports = {
productionSourceMap: false,
css: {
extract: false,
},

pages: {
index: {
entry: 'example/main.js',
template: 'public/index.html',
filename: 'index.html',
},
},

configureWebpack: {
module: {
rules: [
{ test: /\.worker\.(c|m)?js$/i, loader: 'worker-loader' },
],
},
plugins: [
new CopyPlugin([
{
from: path.join(__dirname, 'src', 'assets'),
to: path.join(__dirname, 'lib', 'assets'),
},
{
from: path.join(__dirname, 'node_modules', 'itk-wasm', 'dist', 'web-workers'),
to: path.join(__dirname, 'dist', 'itk', 'web-workers'),
},
{
from: path.join(__dirname, 'node_modules', 'itk-image-io'),
to: path.join(__dirname, 'dist', 'itk', 'image-io'),
},
{
from: path.join(__dirname, 'node_modules', 'itk-mesh-io'),
to: path.join(__dirname, 'dist', 'itk', 'mesh-io'),
},
]),
],
// 关闭 webpack 的性能提示
performance: {
hints: false,
maxAssetSize: 10000000,
},
resolve: {
alias: {
'../itkConfig.js': itkConfig,
'../../itkConfig.js': itkConfig,
},
},
},
};

```

And this is my ```itkConfig.js```

```
const itkConfig = {
pipelineWorkerUrl: '/node_modules/itk-wasm/dist/web-workers/min-bundles/pipeline.worker.js',
imageIOUrl: '/node_modules/itk-image-io/',
meshIOUrl: '/node_modules/itk-mesh-io/',
pipelinesUrl: '/node_modules/itk-wasm/dist/pipelines',
};

export default itkConfig;

```

Any advice would be appreciated!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.