search

UgnisSoftware / react-spreadsheet-import

Import flow for Excel (.xlsx) and CSV file with automated column matching and validation.
https://ugnissoftware.github.io/react-spreadsheet-import/iframe.html?id=react-spreadsheet-import--basic&args=&viewMode=story
MIT License
444 stars 117 forks source link

What combination of React, Chakra, and etc versions should I have to be able to use this project? #115

Closed komali2 closed 2 years ago

komali2 commented 2 years ago

Hello, this project is awesome, however, I'm struggling to find the right combination of frontend library versions to use in order to use this project.

First, I found out that the project has a potentially unlisted dependency: Chakra. So, I added that.

Now, I'm getting the following error in a view that imports this library: 

chakra-ui-hooks.esm.js:235 Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useId is not a function
    at useId (chakra-ui-hooks.esm.js:235:1)
    at useIds (chakra-ui-hooks.esm.js:261:1)
    at useModal (chakra-ui-modal.esm.js:145:1)
    at Modal (chakra-ui-modal.esm.js:326:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)

I'm wondering if I'm perhaps missing some other dependencies or actions I should take in order to use this library?

Thank you.

Our package.json: 

{
    "name": "app",
    "version": "3.1.0",
    "private": true,
    "dependencies": {
        "@auth0/auth0-spa-js": "^1.19.4",
        "@babel/core": "^7.17.2",
        "@chakra-ui/react": "^2.2.1",
        "@emotion/cache": "^11.7.1",
        "@emotion/react": "^11.7.1",
        "@emotion/styled": "^11.6.0",
        "@fullcalendar/daygrid": "^5.10.1",
        "@fullcalendar/interaction": "^5.10.1",
        "@fullcalendar/list": "^5.10.1",
        "@fullcalendar/react": "^5.10.1",
        "@fullcalendar/timegrid": "^5.10.1",
        "@fullcalendar/timeline": "^5.10.1",
        "@hookform/resolvers": "^2.8.8",
        "@mui/icons-material": "^5.4.1",
        "@mui/lab": "^5.0.0-alpha.68",
        "@mui/material": "^5.4.1",
        "@mui/styles": "^5.4.1",
        "@mui/system": "^5.4.1",
        "@mui/utils": "^5.4.1",
        "@mui/x-data-grid": "^5.10.0",
        "@mui/x-data-grid-pro": "^5.10.0",
        "@mui/x-date-pickers": "^5.0.0-alpha.3",
        "@mui/x-license-pro": "^5.10.0",
        "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
        "@reduxjs/toolkit": "^1.7.2",
        "@svgr/webpack": "5.5.0",
        "@tabler/icons": "^1.53.0",
        "@types/chance": "^1.1.3",
        "@types/draft-js": "^0.11.9",
        "@types/image-to-base64": "^2.1.0",
        "@types/jsonwebtoken": "^8.5.8",
        "@types/react": "^17.0.39",
        "@types/react-beautiful-dnd": "^13.1.2",
        "@types/react-copy-to-clipboard": "^5.0.2",
        "@types/react-currency-format": "^1.0.0",
        "@types/react-dom": "^17.0.11",
        "@types/react-draft-wysiwyg": "^1.13.4",
        "@types/react-google-recaptcha": "^2.1.3",
        "@types/react-redux": "^7.1.22",
        "@types/react-router-dom": "^5.3.3",
        "@types/react-slick": "^0.23.8",
        "@types/react-syntax-highlighter": "^13.5.2",
        "@types/react-window": "^1.8.5",
        "@types/uuid": "^8.3.4",
        "@types/webpack-env": "^1.16.3",
        "@typescript-eslint/eslint-plugin": "4.4.1",
        "@typescript-eslint/parser": "^4.24.0",
        "amazon-cognito-identity-js": "^5.2.6",
        "apexcharts": "^3.33.1",
        "axios": "^0.25.0",
        "axios-mock-adapter": "^1.20.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^26.6.0",
        "babel-loader": "8.1.0",
        "babel-plugin-named-asset-import": "^0.3.7",
        "babel-preset-react-app": "^10.0.0",
        "bfj": "^7.0.2",
        "camelcase": "^6.1.0",
        "case-sensitive-paths-webpack-plugin": "2.3.0",
        "chance": "^1.1.8",
        "css-loader": "4.3.0",
        "csstype": "^3.0.10",
        "date-fns": "^2.28.0",
        "dotenv": "8.2.0",
        "dotenv-expand": "5.1.0",
        "draft-js": "^0.11.7",
        "emoji-picker-react": "^3.5.1",
        "eslint": "^7.27.0",
        "eslint-config-airbnb-typescript": "^12.3.1",
        "eslint-config-prettier": "^8.3.0",
        "eslint-config-react-app": "6.0.0",
        "eslint-import-resolver-typescript": "^2.5.0",
        "eslint-plugin-flowtype": "^5.7.2",
        "eslint-plugin-import": "^2.25.4",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-prettier": "^3.4.0",
        "eslint-plugin-react": "^7.28.0",
        "eslint-plugin-react-hooks": "^4.3.0",
        "eslint-plugin-testing-library": "^3.9.2",
        "eslint-webpack-plugin": "^2.5.2",
        "file-loader": "6.1.1",
        "firebase": "^9.6.6",
        "formik": "^2.2.9",
        "framer-motion": "^4.1.13",
        "fs-extra": "^9.0.1",
        "history": "^5.2.0",
        "html-webpack-plugin": "4.5.0",
        "identity-obj-proxy": "3.0.0",
        "image-to-base64": "^2.2.0",
        "jest": "26.6.0",
        "jest-circus": "26.6.0",
        "jest-resolve": "26.6.0",
        "jest-watch-typeahead": "0.6.1",
        "jsonwebtoken": "^8.5.1",
        "jwt-decode": "^3.1.2",
        "lodash": "^4.17.21",
        "logrocket": "^3.0.0",
        "material-ui-popup-state": "^2.0.0",
        "mini-css-extract-plugin": "0.11.3",
        "optimize-css-assets-webpack-plugin": "5.0.4",
        "pnp-webpack-plugin": "1.6.4",
        "postcss-flexbugs-fixes": "4.2.1",
        "postcss-loader": "3.0.0",
        "postcss-normalize": "8.0.1",
        "postcss-preset-env": "6.7.0",
        "postcss-safe-parser": "5.0.2",
        "prettier": "^2.5.1",
        "prompts": "2.4.0",
        "react": "^17.0.2",
        "react-apexcharts": "^1.3.9",
        "react-app-polyfill": "^2.0.0",
        "react-beautiful-dnd": "^13.1.0",
        "react-copy-to-clipboard": "^5.0.4",
        "react-currency-format": "^1.1.0",
        "react-dev-utils": "^11.0.3",
        "react-dom": "^17.0.2",
        "react-draft-wysiwyg": "^1.14.7",
        "react-draggable": "^4.4.4",
        "react-dropzone": "^12.0.2",
        "react-error-overlay": "6.0.9",
        "react-google-recaptcha": "^2.1.0",
        "react-hook-form": "^7.26.1",
        "react-images": "^1.2.0-beta.7",
        "react-intersection-observer": "^8.33.1",
        "react-intl": "^5.24.6",
        "react-markdown": "^8.0.0",
        "react-number-format": "^4.9.1",
        "react-organizational-chart": "^2.1.1",
        "react-otp-input-rc-17": "^2.4.1-minor",
        "react-perfect-scrollbar": "^1.5.8",
        "react-quill": "^2.0.0-beta.4",
        "react-redux": "^7.2.6",
        "react-refresh": "^0.8.3",
        "react-router-dom": "^6.2.1",
        "react-slick": "^0.28.1",
        "react-spreadsheet-import": "^2.0.6",
        "react-syntax-highlighter": "^15.4.5",
        "react-timer-hook": "^3.0.5",
        "react-to-print": "^2.14.4",
        "react-window": "^1.8.6",
        "redux": "^4.1.2",
        "redux-persist": "^6.0.0",
        "remark-gfm": "^3.0.1",
        "resolve": "1.18.1",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.49.7",
        "sass-loader": "^10.0.5",
        "semver": "7.3.2",
        "slick-carousel": "^1.8.1",
        "style-loader": "1.3.0",
        "stylis-plugin-rtl": "^2.1.1",
        "terser-webpack-plugin": "4.2.3",
        "ts-pnp": "1.2.0",
        "typescript": "^4.5.5",
        "url-loader": "4.1.1",
        "uuid": "^8.3.2",
        "web-vitals": "^2.1.4",
        "webpack": "4.44.2",
        "webpack-dev-server": "3.11.1",
        "webpack-env": "^0.8.0",
        "webpack-manifest-plugin": "2.2.0",
        "workbox-webpack-plugin": "5.1.4",
        "yup": "^0.32.11"
    },
    "resolutions": {
        "@types/react": "17.0.39",
        "@types/react-dom": "17.0.11"
    },
    "scripts": {
        "start": "node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js",
        "lint": "eslint . src/ --ext .js,.jsx,.ts,.tsx",
        "lint:fix": "npm run lint -- --fix"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "babel": {
        "presets": [
            "react-app"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ]
    },
    "devDependencies": {},
    "jest": {
        "roots": [
            "<rootDir>/src"
        ],
        "collectCoverageFrom": [
            "src/**/*.{js,jsx,ts,tsx}",
            "!src/**/*.d.ts"
        ],
        "setupFiles": [
            "react-app-polyfill/jsdom"
        ],
        "setupFilesAfterEnv": [],
        "testMatch": [
            "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
            "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
        ],
        "testEnvironment": "jsdom",
        "testRunner": "/home/caleb/src/xxx/ui/node_modules/jest-circus/runner.js",
        "transform": {
            "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
            "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
            "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
        },
        "transformIgnorePatterns": [
            "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
            "^.+\\.module\\.(css|sass|scss)$"
        ],
        "modulePaths": [
            "/home/caleb/src/xxx/ui/src"
        ],
        "moduleNameMapper": {
            "^react-native$": "react-native-web",
            "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
        },
        "moduleFileExtensions": [
            "web.js",
            "js",
            "web.ts",
            "ts",
            "web.tsx",
            "tsx",
            "json",
            "web.jsx",
            "jsx",
            "node"
        ],
        "watchPlugins": [
            "jest-watch-typeahead/filename",
            "jest-watch-typeahead/testname"
        ],
        "resetMocks": true
    }
}
masiulis commented 2 years ago

Hey @komali2, thanks for sharing the package.json. ~NPM >= 7 should install peer-dependencies automatically. Could you check your npm --version?~ (nevermind, you are using yarn) You have added Chakra v2 (react 18), we use Chakra v1 still, I think that's why you are getting this error.

Let me try to dig a little deeper and see why installing our package just doesn't work out of the box for you.

komali2 commented 2 years ago

Thank you for the tip! Changing my chakra version inside my package.json to as follows fixed it:

        "@chakra-ui/react": "1.8.8",

I also did npm cache clean --force yarn cache clean --force and rm -rf node_modules .