styled-components not working with create-react-library

[RoyPog]

*** DISCALMER
I know this isn't really relevant here, but styled-components works fine with create react app, so why isn't working with create react library?

---

Here is my stackoverflow question: https://stackoverflow.com/questions/61854712/styled-components-not-working-with-create-react-library

I'm trying to import styled-components in a create-react-library module. However, when i run it I get the following error message:

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

at C:\Users\roypo\Projects\Web Development\wiit-ui\node_modules\styled-components\dist\styled-components.browser.esm.js:1:9

1: import { typeOf, isElement, isValidElementType } from 'react-is';
            ^
2: import React, { useState, useContext, useMemo, useEffect, useRef, createElement, useDebugValue } from 'react';
3: import shallowequal from 'shallowequal';

I import styled-components like:

import styled from 'styled-components'

I added it to both the peerDependencies and devDependencies (and the regular dependencies) as follows:

//code above

"peerDependencies": {
        "react": "^16.0.0",
        "styled-components": "^5.1.0"
    },
    "devDependencies": {
        "microbundle-crl": "^0.13.10",
        "babel-eslint": "^10.0.3",
        "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",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.0.4",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "^3.4.1",
        "styled-components": "^5.1.0"
    },
    "dependencies": {
        "styled-components": "^5.1.0"
    }

(it's not intended, it's just a formatting problem)

It works fine when I use just create-react-app.

How can I fix it? Thanks in advance

[gersongams]

Any update on this?

[RoyPog]

No. I left it because I didn't have time for this but I'll check it, maybe the problem is solved.

[jestrickler]

Try removing it from dependencies, so it is only in peerDependencies and devDependencies. I finally got it working this way. You probably also have to remove node_modules and package-lock.json and redo npm install.

[RoyPog]

thanks!