React Widgets static without interaction

[marvinrea]

Hi, I launched a React project with create-react-app then I ejected webpack config and I installed paraviewweb as this doc : https://kitware.github.io/paraviewweb/docs/setup.html

but .mcss files seems to not work when I add a React Widget like LookupTableWidget :

Is this a common issue ? I did not find anything

[jourdain]

How do you build your app? mcss is just a modular css where class composition can be achieved as well as name mangling. A rule should be defined to load them. Otherwise you should get an error message when building. Based on the information you are provided, it is hard to pin-point the missing part.

[marvinrea]

Thank you, RemoteRenderer works fine in my app but not widgets

I have no error message when building This is my webpack config to build the app: I import the rules :

and I include paraviewweb and wslink paths in loaders:

Here is the file (converted in txt for git): webpack.config.prod.txt

[jourdain]

So the part you commented was indeed wrong

/*
      {
        test: /\.(sass|scss|mcss)$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader', 'mcss-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
            },
          }],
      },
*/

Here is the rule that we use to load mcss in ParaViewWeb https://github.com/Kitware/paraviewweb/blob/master/config/rules-pvw.js#L21-L39

[marvinrea]

Ok now I have these errors:

and this on opera:

webpack.config.dev.txt

[jourdain]

It seems you are using Webpack 1? Why is your configuration file so complex? Can you use a more recent version? What about using this as a starting point? http://kitware.github.io/paraviewweb/docs/setup.html#Creating-your-own-project

[marvinrea]

I started with create-react-app which creates its own configuration, if you want to customize it you have to run the eject script that give you a lot of complex files.

[jourdain]

You can see here how the loaders are defined for webpack@1.

https://github.com/Kitware/paraviewweb/blob/v2.5.4/config/webpack.loaders.js#L19-L22

[jourdain]

as well as the config https://github.com/Kitware/paraviewweb/blob/v2.5.4/documentation/content/docs/setup.md

[jourdain]

By using such an old version of webpack you will be missing a lot of optimization... You should really try to setup your project by yourself.

[marvinrea]

Ok I tried this, it seems to work

{ test: /.mcss$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name][local][hash:base64:5]!postcss', },

Thank you I will try to setup by myself with webpack 2

[jourdain]

Go with webpack 4 if you can...