Error 'does not contain a default export (imported as 'PaintFilterWorker')' when i import method from 'react-vtkjs-viewport'

[comadaihiep92]

i use create-react-app and use this module. But when i import it will show this error:

./node_modules/vtk.js/Sources/Filters/General/PaintFilter/index.js
Attempted import error: 'vtk.js/Sources/Filters/General/PaintFilter/PaintFilter.worker' does not contain a default export (imported as 'PaintFilterWorker').

Please help me fix this issue.

"react-vtkjs-viewport": "^0.14.2",
"vtk.js": "^16.1.1"

"scripts": {
    "start": "rescripts start",
    "build": "rescripts build",
    "test": "rescripts test",
    "eject": "rescripts eject"
  },

[0x088730]

Hello, @comadaihiep92 , Nice to meet you
You need to check https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html
Please follow vtkRule in webpack.config,js

[comadaihiep92]

Hello, @comadaihiep92 , Nice to meet you
You need to check https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html
Please follow vtkRule in webpack.config,js

I create my project with create-react-app. And i can't config with webpack like this. Do you have any solution with my case?

[0x088730]

You can set webpack in .rescriptsrc.js

[comadaihiep92]

You can set webpack in .rescriptsrc.js

Can you give me this file with config? I'm not master webpack

[0x088730]

Hello @comadaihiep92 , Sorry for delay
You need to know how to config webpack in react simply

[comadaihiep92]

Hello @comadaihiep92 , Sorry for delay
You need to know how to config webpack in react simply

const resolveFrom = require('resolve-from')
// var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

const fixLinkedDependencies = config => {
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      react$: resolveFrom(path.resolve('node_modules'), 'react'),
      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
    },
  }
  return config
}

const includeSrcDirectory = config => {
  config.resolve = {
    ...config.resolve,
    modules: [path.resolve('src'), ...config.resolve.modules],
  }
  return config
}

module.exports = [
  ['use-babel-config', '.babelrc'],
  ['use-eslint-config', '.eslintrc'],
  fixLinkedDependencies,
  // includeSrcDirectory,
]

.rescriptsrc.js
This is my rescriptsrc file. Please add the rule for me.
I'm not master to config it. It very complex.

[0x088730]

const resolveFrom = require('resolve-from')
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

const fixLinkedDependencies = config => {
config.resolve = {
...config.resolve,
alias: {
...config.resolve.alias,
react$: resolveFrom(path.resolve('node_modules'), 'react'),
'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
},
}
return config
}

const includeSrcDirectory = config => {
config.resolve = {
...config.resolve,
modules: [path.resolve('src'), ...config.resolve.modules],
}
return config
}

const transform = match => ({
...match,
module: {
...match.module,
rules: [
{
test: /.html$/,
use: 'html-loader',
},
...match.module.rules,
].concat(vtkRules),
},
})

module.exports = [
['use-babel-config', '.babelrc'],
['use-eslint-config', '.eslintrc'],
fixLinkedDependencies,
transform,
// includeSrcDirectory,
]

[muakdogan]

Struggling with the same issue. I'm using Craco instead of Rescripts and it's config is as follows:

var vtkRules = require("vtk.js/Utilities/config/dependency.js").webpack.core
  .rules;

module.exports = () => {
  const config = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: "babel-loader",
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
      ].concat(vtkRules),
      loaders: [
        { test: /\.styl$/, loader: "style-loader!css-loader!stylus-loader" },
      ],
    },
    devServer: {
      historyApiFallback: true,
    },
  };
  return config;
};

[comadaihiep92]

const resolveFrom = require('resolve-from')
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

const fixLinkedDependencies = config => {
config.resolve = {
...config.resolve,
alias: {
...config.resolve.alias,
react$: resolveFrom(path.resolve('node_modules'), 'react'),
'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
},
}
return config
}

const includeSrcDirectory = config => {
config.resolve = {
...config.resolve,
modules: [path.resolve('src'), ...config.resolve.modules],
}
return config
}

const transform = match => ({
...match,
module: {
...match.module,
rules: [
{
test: /.html$/,
use: 'html-loader',
},
...match.module.rules,
].concat(vtkRules),
},
})

module.exports = [
['use-babel-config', '.babelrc'],
['use-eslint-config', '.eslintrc'],
fixLinkedDependencies,
transform,
// includeSrcDirectory,
]

Checking

[0x088730]

That' s right
Your project is working now?

[comadaihiep92]

That' s right
Your project is working now?

No, it show error
×

TypeError: cornerstone_tools__WEBPACK_IMPORTED_MODULE_12___default.a.importInternal is not a function

[cre-mer]

Struggling with the same issue. I'm using Craco instead of Rescripts and it's config is as follows:

var vtkRules = require("vtk.js/Utilities/config/dependency.js").webpack.core
  .rules;

module.exports = () => {
  const config = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: "babel-loader",
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
      ].concat(vtkRules),
      loaders: [
        { test: /\.styl$/, loader: "style-loader!css-loader!stylus-loader" },
      ],
    },
    devServer: {
      historyApiFallback: true,
    },
  };
  return config;
};

Did you find a solution?