Compatible with react-scripts-ts?

[mikewheaton]

I'm attempting to get this working with a Create React App project that's using react-scripts-ts. Here's what I've tried:

1. npm install --save-dev babel-plugin-styled-components
2. npm install --save react-app-rewire-styled-components
3. npm install --save-dev react-app-rewired
4. Add a config-overrides.js file to the root:

const rewireStyledComponents = require('react-app-rewire-styled-components');

module.exports = function override(config, env) {
  config = rewireStyledComponents(config, env, {
    displayName: true
  });
  return config;
}

5. Add a .babelrc file to the root:

{
  "plugins": ["babel-plugin-styled-components"]
}

6. Update package.json:

    "start": "react-app-rewired start --scripts-version react-scripts-ts",
    "build": "react-app-rewired build --scripts-version react-scripts-ts",
    "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",

7. npm start

Unfortunately, it doesn't seem to be working as the friendly class names aren't included:

Do you have any ideas on what I might try next to get this working?

[lonyele]

What a coincidence... I just got the exact same issue. After I got this I also tested pure create-react-app, and it worked without a problem. Which means I guess react-scripts-ts can be a problem here.
here are the versions I used. I tested styled-components with both v3 and v4
"react-scripts-ts": "3.1.0",
"react-app-rewired": "^1.6.2",
"react-app-rewire-styled-components": "^3.0.2",

[mikewheaton]

Thanks for confirming this, @lonyele, although I was hoping it wouldn't be the case. I'll leave the issue open in case anyone has ideas on how this might be fixed. With the popularity of react-scripts-ts there are likely others running into this.

[yugandhar-pathi]

Did you guys find any fix for this?

[viny-movember]

@yugandhar-pathi did you find a fix for this?