error when trying to import pvw-visualizer

[anastasia-r]

ERROR in ./node_modules/pvw-visualizer/src/app.js 25:4 Module parse failed: Unexpected token (25:4) 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 ReactDOM.unmountComponentAtNode(container); ReactDOM.render(

, @ ./src/index.js 10:0-24 @ multi babel-polyfill ./src`

[jourdain]

What did you setup as loader? Visualizer is using all the loaders that are defined in those files.

[anastasia-r]

Here are the loaders in my webpack.config.js, I added all the ones that Visualizer uses, but still get the same error.

module.exports = {
  mode: env,
  output: { publicPath: '/'},
  entry: ['babel-polyfill', './src'], // this is where our app lives
  devtool: 'source-map', // this enables debugging with source in chrome devtools
  module: {
    rules: [
      {
        enforce: 'pre',
          test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          { loader: 'eslint-loader' ,
          options: {
                formatter: require("eslint/lib/formatters/stylish"),
              },
            },
        ],
      },
      {
        test: /\.s?css/,
        use: [
          finalCSSLoader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              useRelativePath: true,
              name: '[name].[ext]',
            },
          },
        ],
      },
    ].concat(linterRules, pvwRules, visualizerRules, vtkjsRules, wslinkRules)

[jourdain]

That won't work out of the box as those rules apply inside the project but would be discarded for anything that is inside the /node_modules/ directory where seat visualizer for your project.

For that, you will need to do something similar to what is done in vtk.js here with the proper visualizer pathname rather than vtk.js.

You can see the parallel here as well:

• rule for within the project
  • rule for outside the project when used as dependency

[anastasia-r]

OK, thanks for your help- how can I find the proper visualizer pathname? Would that be: include: /node_modules/pvw-visualizer, ?

[jourdain]

Yes, that would be it except that you should do the following

include: /pvw-visualizer[\/\\]src/,

[anastasia-r]

I'm still getting the error when I try to import the library into my app like: import 'pvw-visualizer';

Is there an example anywhere of how it would be imported and used within a project?

[jourdain]

pvw-visualizer is an application (not a library) hence it can not be imported that way. You can import its components and connect them back together yourself to build a new application but that will be your responsibility to put it back together in a meaningful manner.