use viv as react component

[rogertrullo]

Hi,
First, thanks for sharing these amazing tools!
I have been trying to use viv as a React component without any success so far. I don't have a lot of experience in javascript nor web development so I might be doing something wrong.
This is the process I have been following so far:

1. create a React app with npx create-react-app my-app
2. Install deckgl and viv with npm install @hms-dbmi/viv and npm install deck.gl @luma.gl/core
   I make sure that they are added to dependencies and are correctly in nodes_modules
3. I import functions to the App.js like this :

 getChannelStats,
 loadOmeTiff,
 loadBioformatsZarr,
 PictureInPictureViewer,
} from '@hms-dbmi/viv';

4)I execute npm start
Just doing that I get this error:

Would you have any idea what can be going on?
I am using node v14.18.1 and npm 6.14.15 in CentOS 7.

Thanks!!

[ilan-gold]

cc @manzt I think we've seen this before?

[ilan-gold]

Ah, ok please try adding the @babel/plugin-proposal-class-property plugin to your build process (you should try craco for altering create-react-app if you are looking for a recommendation)

[ilan-gold]

This is what my craco.config.js file looks like for using viv with create-react-app - I also needed to install craco-alias:

const CracoAlias = require("craco-alias");
module.exports = {
  babel: {
    plugins: ["@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-class-properties"],
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "options",
        baseUrl: "./",
        aliases: {
          "txml/txml": "./node_modules/txml/dist/txml",
        }
      }
    }
  ],
};

[rogertrullo]

Thank you very much @ilan-gold ! I can include the libraries now :)
Is this something that maybe should be included in the documentation?

[ilan-gold]

This is something that is specific to the build tools that create-react-app uses at the moment. Once they upgrade I believe all of these problems will go away. I think leaving this here for now is ok in terms of documenting of it unless you have other thoughts @manzt

[manzt]

Glad you were able to come to a solution! Thanks, ilan.

As far as adding to documentation, I think we should be able to point folks here if they are struggling with CRA specifically. I do see this as a temporal issue that will be resolve if/when react-scripts update webpack internally.