react/19/replace-default-props does not add ES6 default parameters

[quarhodron]

The example nicely shows that default props from defaultProps will be added to the component props as shown in this example https://github.com/codemod-com/codemod/tree/main/packages/codemods/react/19/replace-default-props.

However, when I am running npx codemod react/19/replace-default-props it only removes defaultProps and not adding default props to destructured component props. Even when I tried to just have the exact code from the mentioned example, it only removed this block:

Button.defaultProps = {
    size: '16px',
    color: 'blue'
}

and the rest was left untouched

const Button = ({ size, color }) => {
    return <button style={{ color, fontSize: size }}>Click me</button>;
}

I worked on codemod in version 0.13.3. Tested on project either in pure js or TS with tsx files. Tested either on Node 18.17.1 or 20.15.1. Tested on React either 18.3.1 and 18.2.0. Not sure if it matters. All of them resulted in removing only defaultProps and not adding ES6 default parameters to component.

[quarhodron]

@DmytroHryshyn I saw you were contributing the most to the codemod. Can you look into that 🙏 ?

[mohab-sameh]

Thanks for reporting this @quarhodron! @DmytroHryshyn will be away for some time. @arybitskiy can you please take a look at this?

[quarhodron]

@mohab-sameh do you think @arybitskiy will be able to still look at it because it seems he hasn't done any commits recently

[xander-marjoram]

I'm also seeing the same issue.

[email protected]
[email protected]
[email protected]
[email protected]

Initially the codemod was returning "No changes were made during the codemod run.". I think this is because much of our code is in the following format:

const defaultProps = {
    size: '16px',
    color: 'blue',
};

const Button = ({ size, color }) => {
    return <button style={{ color, fontSize: size }}>Click me</button>;
}

Button.defaultProps = defaultProps;

If I manually remove the defaultProps variable to match the example, the Button.defaultProps assignment is simply removed without updating the destructured props.

[alexbit-codemod]

@amirabbas-gh and I pushed a fix to the registry. try it out and let me know if there’s still an issue. Just run:

npx codemod@latest react/19/replace-default-props --no-cache

@rickhanlonii, we should be good to close this issue now.

(fyi, this codemod was never checked into this repo or the official migration guide. It lives here: https://github.com/codemod-com/Commons/tree/main/codemods/react/19/replace-default-props and in the registry)

[kevinrodrigues]

I seem to have a similar issue with running codemod too. It does update some files but leaves out the majority of files. It also seems to remove the defaultProps variable without actually assigning the removed props to the destructured prop. I'm running version 0.15.0 of codemod at the moment. Below is an example of what is happening:

Before running codemod:

const Button = ({ size, color }) => {
    return <button style={{ color, fontSize: size }}>Click me</button>;
}

Button.defaultProps = {
    size: '16px',
    color: 'blue'
}

After running codemod:

// Note: props not being updated.
const Button = ({ size, color }) => {
    return <button style={{ color, fontSize: size }}>Click me</button>;
}

Expected:

const Button = ({ size = '16px', color = 'blue' }) => {
    return <button style={{ color, fontSize: size }}>Click me</button>;
}

[mohab-sameh]

Hi @kevinrodrigues. Can you please specify which version of react/19/replace-default-props are you running?

[kevinrodrigues]

Hi @kevinrodrigues. Can you please specify which version of react/19/replace-default-props are you running?

Hi @mohab-sameh Thanks for responding. So I'm running the below command which I believe uses the latest version.

npx codemod@latest react/19/replace-default-props --no-cache

[mohab-sameh]

Hi @kevinrodrigues! Yup, in this case you should be running v1.0.01 (latest). Supposedly, https://github.com/codemod-com/commons/pull/1 addressed the mentioned issue. Seems that the issue still occurs. @amirabbas-gh are you able to reproduce this? If so, let me know so we can reopen this issue and investigate it further.

[amirabbas-gh]

Thanks to everyone who reported this issue 🙏. After reviewing, I identified the problem and have fixed it, and published it (v1.0.4) ✅. You can now use this codemod with codemod react/19/replace-default-props without any issues! 🎉

The related tests for this issue have also been added to the codemod files 📝, and you can check them out! 👍

[quarhodron]

Thank you very much. It works great 🎉

[kevinrodrigues]

Thanks to everyone who reported this issue 🙏. After reviewing, I identified the problem and have fixed it, and published it (v1.0.4) ✅. You can now use this codemod with codemod react/19/replace-default-props without any issues! 🎉

The related tests for this issue have also been added to the codemod files 📝, and you can check them out! 👍

@amirabbas-gh thanks alot for sorting this fix out, much appreciated ❤

I did notice that there is a particular format which is required for codemod react/19/replace-default-props to run successfully. I was wondering if you have considered covering cases where there is a variable being used to set the default props too. I've left an example of what I mean below:

This format works fine:

const Button = ({ size, color }) => {
  return <button style={{ color, fontSize: size }}>Click me</button>;
};

Button.defaultProps = {
  size: "16px",
  color: "blue",
};

This format doesn't work:

Where there is a const / variable being used to set the defaultProps codemod doesn't seem to pick up these files. I tested it by manually removing the const defaultProps = { ... and modified it to Button.defaultProps = {.... Re-ran the command and then the files update correctly.

const Button = ({ size, color }) => {
  return <button style={{ color, fontSize: size }}>Click me</button>;
};

const defaultProps = {
  size: "16px",
  color: "blue",
};

Button.defaultProps = defaultProps;