InsightSoftwareConsortium / InsightSoftwareConsortium/ITK-Wasm
migrate from itk.js to itk-wasm failed
- 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
Assessment
This issue has not been assessed yet.