keiya01 / react-simple-wheel-picker

react-simple-wheel-picker is simple and smooth component for React
MIT License
8 stars 8 forks source link

Cannot complile package — Module not found: Error: Can't resolve 'styled-components' #43

Open AndlerRL opened 3 years ago

AndlerRL commented 3 years ago

Hi, I started to use this package and it seems that it got an issue with package.json file. Looks like whenever I start to run yarn add react-simple-wheel-picker and immediately run yarn with the component ready to render and it crash, because it says:

ERROR in ./node_modules/react-simple-wheel-picker/dist/components/WheelPickerItem.js
Module not found: Error: Can't resolve 'styled-components' in '<my-root-path-to-cloned-repo>/react-simple-wheel-picker/example/node_modules/react-simple-wheel-picker/dist/components'
 @ ./node_modules/react-simple-wheel-picker/dist/components/WheelPickerItem.js 11:41-69
 @ ./node_modules/react-simple-wheel-picker/dist/components/WheelPicker.js
 @ ./node_modules/react-simple-wheel-picker/dist/index.js
 @ ./src/Form.tsx
 @ ./src/App.tsx
 @ ./src/index.tsx
ℹ 「wdm」: Failed to compile.

It's logical to think that this is related with the styled-components package inside. I proceeded to dig-up and did npm i styled-components, waited to compile and done, fixed.

This is what it changed from package, nothing more. This is though avoiding to proceed the use of the package, the example has same issue as root.

{
    "name": "react-simple-wheel-picker",
    "version": "1.2.0",
    "main": "dist/index.js",
    "files": [
        "dist"
    ],
    "license": "MIT",
    "author": {
        "name": "Keiya Sasaki",
        "url": "https://keiya01.github.io/portfolio"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/keiya01/react-simple-wheel-picker.git"
    },
    "keywords": [
        "react",
        "select",
        "wheel",
        "picker",
        "accessibility",
        "drum"
    ],
    "bugs": {
        "url": "https://github.com/keiya01/react-simple-wheel-picker/issues"
    },
    "homepage": "https://github.com/keiya01/react-simple-wheel-picker#readme",
    "scripts": {
        "build": "tsc",
        "prepublishOnly": "yarn build",
        "test": "jest",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "src/**/*.{ts, tsx}": [
            "jest --bail --findRelatedTests",
            "eslint --fix",
            "git add"
        ]
    },
    "resolutions": {
        "@types/react": "^16.9.13"
    },
    "devDependencies": {
        "@babel/core": "^7.7.4",
        "@babel/preset-env": "^7.7.4",
        "@babel/preset-react": "^7.7.4",
        "@babel/preset-typescript": "^7.7.4",
        "@storybook/addon-actions": "^5.2.6",
        "@storybook/addon-links": "^5.2.6",
        "@storybook/addon-storyshots": "^5.2.6",
        "@storybook/addons": "^5.2.6",
        "@storybook/react": "^5.2.6",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/react-hooks": "^3.2.1",
        "@types/jest": "^24.0.23",
        "@types/react": "^16.9.13",
        "@types/react-dom": "^16.9.4",
        "@types/styled-components": "^4.4.0",
        "@typescript-eslint/eslint-plugin": "^2.9.0",
        "@typescript-eslint/parser": "^2.9.0",
        "babel-jest": "^24.9.0",
        "babel-loader": "^8.0.6",
        "babel-plugin-require-context-hook": "^1.0.0",
        "eslint": "^6.7.1",
        "eslint-config-prettier": "^6.7.0",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.17.0",
        "eslint-plugin-react-hooks": "^2.3.0",
        "husky": "^3.1.0",
        "jest": "^24.9.0",
        "jest-dom": "^4.0.0",
        "lint-staged": "^9.5.0",
        "prettier": "^1.19.1",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-test-renderer": "^16.12.0",
        "styled-components": ">=4.4.0",
        "ts-loader": "^6.2.1",
        "typescript": "^3.7.2",
        "webpack": "^4.41.2"
    },
    "peerDependencies": {
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
        "styled-components": "^5.2.1"
    }
}
zeeman05 commented 3 years ago

Ran into similar issue as well.

Long live SO: https://stackoverflow.com/questions/54961117/module-not-found-cant-resolve-styled-component