Issues while installing CRACO on CRA 5

[martinscola-hwm]

Hi everyone, I'm unable to install CRACO on a CRA 5 app. Unfortunately, due to a change asked on an already developed app, I need to access the CRA config and CRACO seemed the way to go about it. But unfortunately, the npm installation fails, since It's unable to reconcile the react-scripts 5 already in the app with the RS4 CRACO uses. I've seen no progress on the update to CRA5 support and can't comment on the thread where that was discussed, so I'm reaching out for help with this matter. Any and all help will be welcomed.

[dilanx]

I'm still working on CRA 5 support, but progress has been made. You can install the alpha version to use craco with CRA 5.

$ npm i @craco/craco@alpha

You were probably looking at the old thread but there's a new one at #426.

[martinscola-hwm]

Thank you for replying so soon dilanx. I actually installed the alpha version and I'm not sure I'm using it correctly. At this time, I only need it to copy a folader from node_modules to src, because the npm package is busted and can't access its ServiceWorkers to run and their support told me to do that for the time being. So, I created craco.config.js and added ONLY this:

// const { when, whenDev, whenProd, whenTest, ESLINT_MODES, POSTCSS_MODES } = require("@craco/craco");

// const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

// const path = require( 'path' );

module.exports = {
    plugins: [
        // new HtmlWebpackPlugin( {
        //     template: path.join( __dirname, "public", "index.html" ),
        // } ),

        // Copy THEOplayer workers needed for TS transmuxing.
        {
            plugin: new CopyWebpackPlugin( {
                patterns: [
                    { from: 'node_modules/theoplayer', to: 'src/resources/theoplayer' },
                ],
            } ),
        },
    ],
}

I can't tell if it's doing what it's supposed to do, but the app isn't working. Have i missed anything else? I modified the start scripts to

"scripts": {
    "start:dev": "env-cmd -f .env.dev craco start",
    "start-80:prod": "sudo PORT=80 env-cmd -f .env.prod craco start",
    "start-80:dev": "sudo PORT=80 env-cmd -f .env.dev craco start",
    "build:prod": "sudo env-cmd -f .env.prod craco build",
    "build:dev": "sudo env-cmd -f .env.dev craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

But still not working... Any help would be appreciated

[Gu-Miao]

@martinscola-hwm I think maybe it is due to the copy-webpack-plugin? In development mode, the plugin doesn't seem to copy the file on the hard drive, but rather serves the file and gives it an accessible address. So you could try to access your files by visiting http://ip:port/PUBLIC_URL/src/resources/theoplayer/**

[a7madgamal]

how stable is this alpha? I know it's an "alpha" but is it crazy to use on production? :D

[paveu]

@dilanx any ETA when the alpha moves to stable ?

[dilanx]

@martinscola-hwm sorry for the super late response. I think your issue is that you're adding copy-webpack-plugin as a craco plugin rather than a webpack plugin. You should try doing something like this:

/* craco.config.js */

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new CopyWebpackPlugin({
          patterns: [
            { from: 'node_modules/theoplayer', to: 'src/resources/theoplayer' },
          ],
        }),
      ],
    },
  },
};

[dilanx]

@dilanx any ETA when the alpha moves to stable ?

@paveu hopefully soon! I can't give an exact ETA, but I don't believe there have been any major problems specifically related to craco 7 with CRA 5, so I think it's very close.