paraviewweb error in create-react-app environment

[rjsgml5698]

I am sorry to repeat the same question again. I tried to solve it, but I do not know, so I want to ask again.

I created a react configuration with create-react-app.

And I installed npm i paraviewweb. It was installed normally as follows.

However, it seems that the module does not build normally.

Is it necessary to modify webpack.config.js to solve this?

I would really appreciate it if you give me any clues.

Thank you!

[jourdain]

I think this might be related to the fact that the paraviewweb repo didn't keep up with the latest babel which is most likely used with create-react-app. We are definitely planning to update it but we didn't find the time to tackle it yet.

Just out of curiosity, what are you planning to use the paraviewweb js library for? Its React widgets or interacting with a VTK or ParaView server?

[rjsgml5698]

Sorry for the late reply. I want to construct a better ui via paraviewweb.

It's still a step to try.

thank you for your answer!!

[jourdain]

So you want to use the widgets of the ParaViewWeb repo for your web application.

Try with the latest version of paraviewweb and yes you will have to edit the rules for webpack to properly handle the code.

We provided a config file that you can import into your webpack.config.js that should streamline the process.

Guide | Config file to import

[rjsgml5698]

Hello!

I have installed the latest version of paraviewweb. And I wanted to modify the code in webpack.config.js as a guide.

Here's the code I added():

const rules = require('paraviewweb/config/webpack.loaders.js');

const plugins = [
  new HtmlWebpackPlugin({
    inject: 'body',
  }),
];

const styles = path.resolve('./node_modules/paraviewweb/style');

.concat(rules)

alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        PVWStyle: path.join(__dirname, './node_modules/paraviewweb/style'),
      },

However, the following error occurred.

I have looked for a solution to this but have not solved it.

Can you tell me if you have any clues about this?

[jourdain]

It seems to try to process the normalized css with the pvw rules or at least with post-css.

Are you trying to build an example? If so, just try to remove the import of the normalize.css inside the example code.

[rjsgml5698]

Thank you very much for the answer. As you say, I removed normalize.css.

Then I got the following error.

I had a problem before, and it seems that I can't read the path of each .js file.

To solve this problem, I thought about modifying each .js file path. However, it does not seem to be a sustainable way.

App.js

// import 'normalize.css/normalize.css';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import LookupTableManager from 'paraviewweb/src/Common/Core/LookupTableManager';
import LookupTableManagerControl from 'paraviewweb/src/React/CollapsibleControls/LookupTableManagerControl';

console.log(LookupTableManager)

class App extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount(){

  }

  render() {

    document.body.style.padding = '10px';
    document.body.style.backgroundColor = 'aqua';
    // Create needed property
    const lookupTableManager = new LookupTableManager();

    // Add several LookupTables
    lookupTableManager.addLookupTable('Temperature', [-5, 25], 'cold2warm');
    lookupTableManager.addLookupTable('Pressure', [0, 15000], 'spectral');
    lookupTableManager.addLookupTable('Velocity', [5, 150], 'rainbow');

    return (
      <LookupTableManagerControl
        field="Temperature"
        lookupTableManager={lookupTableManager}
      />,
      document.querySelector('.body')
    );
  }
}

export default App;

I'll try more to solve it!

Thank you

[rjsgml5698]

I'll tell you the results of my progress so far. Because it can be a resource for people who are experiencing trial and error.

I modified the path to import the module.

The module is loading as a result.

However, I have removed the import of normlize.css.

App.js

// import 'normalize.css';
...
render() {

    document.body.style.padding = '10px';
    document.body.style.backgroundColor = 'aqua';
    // Create needed property
    const lookupTableManager = new LookupTableManager();

    var g = document.createElement('div');
    g.setAttribute("className", "Div1");

    // Add several LookupTables
    lookupTableManager.addLookupTable('Temperature', [-5, 25], 'cold2warm');
    lookupTableManager.addLookupTable('Pressure', [0, 15000], 'spectral');
    lookupTableManager.addLookupTable('Velocity', [5, 150], 'rainbow');

    return (
      <LookupTableManagerControl
        field="Temperature"
        lookupTableManager={lookupTableManager}
      />,
      document.querySelector('.Div1')
    );
  }
...

I'll try again to implement this...

[jourdain]

It seems that you don't know how to use React. You may want to follow some online tutorial first. That might help you.