how to make it work with styled-components?

[Mazuh]

When I try to use with with styled-components, I get this error:

Error: 'typeOf' is not exported by node_modules/react-is/index.js, imported by node_modules/styled-components/dist/styled-components.browser.esm.js

all the solutions are related to providing fixs on rollup config, but the boilerplate uses microbundle. Should I assume that there's no support for it rn?

[davidkhierl]

this issue really giving us hiccups to our projects, hope this get resolve soon.

[nsisodiya]

@Mazuh can you give an example repo to showcase the issue. will have a look on it.

[justinhessdev]

I was able to fix it in my project. I did a few things:

I added .bablerc file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["babel-plugin-styled-components"]
}

I'm using typescript and added "types": ["react", "jest"] to compilerOptions in tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "target": "es5",
    "types": ["react", "jest"], --->> Added types here
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "example"]
}

In package.json I added styled-components to peerDependencies & devDependencies. Then I added @types/styled-components to devDependencies:

  "peerDependencies": {
    "react": "^16.0.0",
    "styled-components": "^5.1.0" --->> Added styled-components here and below in devDependencies
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
    "@types/react": "^16.9.27",
    "@types/styled-components": "^5.1.0", --->> Added @types/styled-components here
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "babel-eslint": "^10.0.3",
    "babel-plugin-styled-components": "^1.10.7",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle-crl": "^0.13.8",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "styled-components": "^5.1.0" --->> Added styled-components here
  },