Verovio does not work with latest CRA

[hector]

I updated this example to use the latest Create-React-App ("react-scripts": "3.0.1") and it does not work anymore. npm start si failing with a JavaScript heap out of memory error caused by the verovio.toolkit() call. I tried allocating more memory but the same still happens.

Any idea how this could be fixed?

[lpugin]

Please check this repository with the Verovio App https://github.com/lpugin/verovio-app-react

[hector]

Thanks for the link. I used a similar solution: import verovio from my "public/index.html". I see you are doing basically the same but through JS in componentDidMount.

Those solutions are just a workaround because you are not really importing the verovio library that you installed from package.json. I think we should make it work through importing.

[WolfgangDrescher]

I agree. I also had problems importing verovio as a npm package. Since the file is more than 10MB webpack could not manage it anymore. As a workaround i let webpack copy the file directly with CopyWebpackPlugin and added it as a <script> source to the index.html. I furthermore added verovio as a webpack external which allowed me to import verovio later on in my app as a module with import verovio from 'verovio';.

If anyone has the same problem:

// webpack.config.js
{
    externals: {
        verovio: 'verovio',
    },
    plugins: [
        new CopyWebpackPlugin([{
            from: 'node_modules/verovio',
            to: 'verovio',
        }]),
    ],
}

[cambiata]

Hi! Stumbled on this. Unfortunately I didn't get your solution to work, @WolfgangDrescher. (There seems to be some issues between copy-webpack-plugin 9.0.1 and the webpack version that current react-script 4.0.3 uses. Also, the CopyWebpackPlugin parameters has changed...)

What solves it for me is to remove the current react-script version (4.0.3)...

yarn remove react-sctipts

and adding the old version used in the https://github.com/lpugin/verovio-app-react example:

yarn add react-scripts@1.0.14

Would be great to have an updated react/verovio example that works with the current version of create-react-app!

[lpugin]

Yes, that would be great. Could you make a PR? Thanks

[cambiata]

I really would like to, but the workaround is not a good one, reverting the react-scripts from current 4.0.3 to an old 1.0.14 will most likely cause other troubles - it does for me.

I will keep on trying to find a solution, and if I can find one, i will make a PR for sure.