search

InsightSoftwareConsortium / ITK-Wasm

High performance spatial analysis in a web browser, Node.js, and across programming languages and hardware architectures
https://wasm.itk.org
Apache License 2.0
188 stars 49 forks source link

migrate from itk.js to itk-wasm failed #648

Open lihouxing-sjtu opened 1 year ago

lihouxing-sjtu commented 1 year ago

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！

thewtex commented 1 year ago

Hi @lihouxing-sjtu ,

A few items to check that might be helpful:

In your code, the import's are updated per:

https://wasm.itk.org/docs/itk_js_to_itk_wasm_migration_guide.html#Module-import-statements

Examine:

https://wasm.itk.org/examples/vite.html

https://wasm.itk.org/examples/webpack.html

-- corresponding code is here: https://github.com/InsightSoftwareConsortium/itk-wasm/tree/master/examples