Can't start with storybook!

[misha-erm]

Describe the bug

React-scripts can be started as higher version of webpack is found higher in the tree

After analyzing package-lock.json I can say that storybook requires webpack ^4.33 so probably it installs 4.41.2 which is incompatible.

Did you try recovering your dependencies?

npm 6.12.0

Which terms did you search for in User Guide?

found similar issue with storybook, cra and babel-loader. Tried to re-init storybook like npx -p @storybook/cli sb init --type react_scripts -f but didn't help

Environment

Environment Info:

System: OS: macOS 10.15 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Binaries: Node: 12.13.0 - /usr/local/bin/node Yarn: 1.19.1 - /usr/local/bin/yarn npm: 6.12.0 - /usr/local/bin/npm Browsers: Chrome: 78.0.3904.70 Firefox: 68.0.2 Safari: 13.0.2 npmPackages: react: 16.11.0 react-dom: 16.11.0 react-scripts: 3.2.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. npm install
2. npm start

Expected behavior

App should start

Actual behavior

App can't start

[misha-erm]

Thanks in advance for any help 🙏

[misha-erm]

One more note. I'm trying to setup repo with lerna. Here are my package.json s:

Root package.json:

{
    "name": "cast-calls",
    "private": true,
    "scripts": {
        "start": "lerna run start",
        "bootstrap": "lerna bootstrap --hoist",
        "format": "prettier --write \"**/*.{js,jsx,json,css,md,html}\"",
        "lint": "eslint 'src/**/*.{js,jsx}' && prettier --check '**/*.{js,jsx,json,css,md,html}'",
        "lint:css": "stylelint 'src/**/*.{js,jsx,css}'"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "pre-push": "cross-env CI=true npm test"
        }
    },
    "lint-staged": {
        "src/**/*.{js,jsx}": [
            "eslint --fix",
            "stylelint --fix",
            "prettier --write",
            "git add"
        ],
        "src/**/*.{json,css,md,html}": [
            "prettier --write",
            "git add"
        ]
    },
    "devDependencies": {
        "lerna": "^3.18.3",
        "babel-plugin-macros": "^2.6.1",
        "require-context.macro": "^1.2.2",
        "cross-env": "^6.0.3",
        "eslint-config-airbnb": "^18.0.1",
        "eslint-config-prettier": "^6.3.0",
        "eslint-plugin-prettier": "^3.1.1",
        "husky": "^3.0.9",
        "lint-staged": "^9.4.1",
        "prettier": "^1.18.2",
        "stylelint": "^11.0.0",
        "stylelint-config-prettier": "^6.0.0",
        "stylelint-config-recommended": "^3.0.0",
        "stylelint-config-styled-components": "^0.1.1",
        "stylelint-prettier": "^1.1.1",
        "stylelint-processor-styled-components": "^1.8.0"
    }
}

CRA package.json:

{
    "name": "client",
    "version": "0.0.1",
    "dependencies": {
        "@babel/runtime": "^7.6.2",
        "@fortawesome/fontawesome-svg-core": "^1.2.25",
        "@fortawesome/free-brands-svg-icons": "^5.11.2",
        "@fortawesome/free-regular-svg-icons": "^5.11.2",
        "@fortawesome/free-solid-svg-icons": "^5.11.2",
        "@fortawesome/react-fontawesome": "^0.1.5",
        "axios": "^0.19.0",
        "bodybuilder": "^2.2.17",
        "classnames": "^2.2.6",
        "cropperjs": "^1.5.6",
        "draft-js": "^0.11.1",
        "formik": "^1.5.8",
        "history": "^4.10.1",
        "i18next": "^17.0.18",
        "i18next-browser-languagedetector": "^3.1.1",
        "lodash": "^4.17.15",
        "moment": "^2.24.0",
        "normalize.css": "^8.0.1",
        "prop-types": "^15.7.2",
        "qs": "^6.9.0",
        "rc-slider": "^8.7.1",
        "react": "^16.10.2",
        "react-cropper": "^1.3.0",
        "react-dom": "^16.10.2",
        "react-google-login": "^5.0.5",
        "react-i18next": "^10.13.1",
        "react-number-format": "^4.3.0",
        "react-redux": "^7.1.1",
        "react-router": "^5.1.2",
        "react-router-dom": "^5.1.2",
        "react-scripts": "^3.2.0",
        "react-select": "^3.0.8",
        "react-toastify": "^5.4.0",
        "react-use-data-loader": "0.0.3",
        "reactjs-popup": "^1.5.0",
        "redux": "^4.0.4",
        "redux-starter-kit": "^0.7.0",
        "reselect": "^4.0.0",
        "styled-components": "^4.4.0",
        "use-debounce": "^3.0.1",
        "uuid": "^3.3.3",
        "yup": "^0.27.0"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "flow": "flow",
        "storybook": "start-storybook -p 9009 -s public",
        "build-storybook": "build-storybook -s public",
        "i18n-scan": "i18next-scanner"
    },
    "devDependencies": {
        "@storybook/addon-actions": "^5.2.5",
        "@storybook/addon-centered": "^5.2.1",
        "@storybook/addon-contexts": "^5.2.1",
        "@storybook/addon-knobs": "^5.2.1",
        "@storybook/addon-links": "^5.2.5",
        "@storybook/addon-storyshots": "^5.2.1",
        "@storybook/addon-viewport": "^5.2.1",
        "@storybook/addons": "^5.2.5",
        "@storybook/react": "^5.2.5",
        "flow-bin": "^0.109.0",
        "flow-remove-types": "^2.109.0",
        "flow-typed": "^2.6.1",
        "i18next-scanner": "^2.10.3",
        "i18next-xhr-backend": "^3.2.0",
        "jest-localstorage-mock": "^2.4.0",
        "react-test-renderer": "^16.10.2",
        "storybook-react-router": "^1.0.8"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "babelMacros": {
        "styledComponents": {
            "pure": true
        }
    }
}

[vsubbotskyy]

Until the issue resolved, I just added 4.41.0 as dev dependency in my package.json "webpack": "4.41.0"

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.