Error: Default condition should be last one

[Rutger-Knijnenburg]

Describe the bug
I'm trying to implement the sample code into my project, however even the sample code gives me a weird error.

To Reproduce
Steps to reproduce the behavior:

1. New project
2. Install dependencies
3. Build project
4. Error pops up

Expected behavior
No error of course ;)

Desktop (please complete the following information):

• Windows 11
• Chrome
• Version 121.0.6167.140

Additional context

This are my current dependencies. It might be something with versions or something? But I have no idea which one could be the issue. If I remove the Color picker code my project builds fine :)

"dependencies": {
    "@date-io/date-fns": "^2.16.0",
    "@draft-js-plugins/alignment": "^5.0.3",
    "@draft-js-plugins/editor": "^4.1.3",
    "@draft-js-plugins/focus": "^4.1.3",
    "@draft-js-plugins/static-toolbar": "^4.1.3",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.14.7",
    "@mui/lab": "^5.0.0-alpha.108",
    "@mui/material": "^5.14.7",
    "@mui/styles": "^5.14.11",
    "@react-pdf/renderer": "^3.0.1",
    "@reduxjs/toolkit": "^1.9.0",
    "ajv": "^8.12.0",
    "axios": "^1.4.0",
    "date-fns": "^2.29.3",
    "dotenv": "^16.0.3",
    "draft-convert": "^2.1.13",
    "draft-js": "^0.11.7",
    "file-loader": "^6.2.0",
    "html-react-parser": "^4.2.2",
    "lodash-es": "^4.17.21",
    "moment": "^2.29.4",
    "mui-color-input": "^2.0.1",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-images": "^1.2.0-beta.7",
    "react-mui-dropzone": "^4.0.7",
    "react-photo-gallery": "^8.0.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-scroll": "^1.8.8",
    "react-spring": "^9.5.5",
    "react-use-gesture": "^9.0.4",
    "redux": "^4.2.0",
    "rxjs": "^7.5.7",
    "sass": "^1.56.1",
    "sweetalert2": "^11.6.9",
    "typewriter-effect": "2.19.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@types/node": "^20.7.1",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.2",
    "eslint": "^8.27.0",
    "eslint-plugin-react": "^7.31.10",
    "html-webpack-plugin": "^5.5.0",
    "prettier": "^2.7.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.1",
    "typescript": "^4.9.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1"
  }

[viclafouch]

Hello !

I can't help without any codesandbox reproduction.. Sorry :/

[isibley765]

@viclafouch I can't promise this is functional, since I can't test that it works via my yarn build, but I can share code:

const [inputs, setInputs] = useState({
        . . .
        "inputColor": "#f0f0f688",  /* testing if this works */
        . . .
    });


<FormLabel htmlFor="input-color">Input Color:</FormLabel>
<MuiColorInput
    style={{ "width": "75%", "alignSelf": "center" }}
    aria-label="Input Color" name="Input Color"
    value={inputs['inputColor']}
    onChange={handleChange}
/>

If I comment this out for my project, & then build, this error goes away:

ERROR in ./src/components/InputForm/InputForm.tsx 79:24-50  # <-- line & column are misleading and wrong here, ignore
Module not found: Error: Default condition should be last one  # <-- this might be something that typescript cares about? Maybe?
 @ ./src/components/App/App.tsx 30:18-63
 @ ./src/index.tsx 9:12-45

webpack 5.90.0 compiled with 1 error in 44992 ms
error Command failed with exit code 1.

Just a react + typescript + mui project, using mui-color-input version 2.0.2:

project> npm --version
10.4.0
project> yarn --version
1.22.10
project> node --version
v20.11.0

edit: if the package.json sections help:

    "scripts": {
        "start": "react-scripts start",
        "dev-server": "webpack --watch",
        "lint": "eslint --fix ./src/**",
        "build": "webpack",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "dependencies": {
        "@emotion/react": "^11.11.3",
        "@emotion/styled": "^11.11.0",
        "@fontsource/roboto": "^5.0.8",
        "@mui/icons-material": "^5.15.8",
        "@mui/lab": "^5.0.0-alpha.164",
        "@mui/material": "^5.15.7",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^14.1.2",
        "@testing-library/user-event": "^13.5.0",
        "@typescript-eslint/eslint-plugin": "^6.19.1",
        "css-loader": "^6.9.1",
        "eslint": "^8.56.0",
        "eslint-config-standard-with-typescript": "^43.0.1",
        "eslint-plugin-import": "^2.25.2",
        "eslint-plugin-n": "^15.0.0",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.33.2",
        "http-server": "^14.1.1",
        "mui-color-input": "^2.0.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "svg-inline-loader": "^0.8.2",
        "ts-loader": "^9.5.1",
        "typescript": "*",
        "web-vitals": "^2.1.4",
        "webpack": "^5.90.0",
        "yarn": "^1.22.21"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@typescript-eslint/parser": "^6.19.1",
        "webpack-cli": "^5.1.4"
    },
    "peerDependencies": {
        "react": "^17.0.0 || ^18.0.0",
        "react-dom": "^17.0.0 || ^18.0.0"
    }

[viclafouch]

Could you please try with the version 2.0.3 :)

[Rutger-Knijnenburg]

@viclafouch Works like a charm ;) Sorry for the late response, and thanks for your fix!!