Compile failure - RadioGroup

[Anton-vanderTuijn]

Hi everyone, I followed the getting started instructions and face this compilation failure after starting debugging the project by hitting the F5 key in Visual Studio Code.

Failed to compile.

./node_modules/@fluent-blocks/react/esm/inputs/RadioGroup/RadioGroup.js
Attempted import error: 'Radio' is not exported from '@fluentui/react-components/unstable'.

My package.json looks like this:

{
  "name": "teamsfx-template-tab",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fluent-blocks/react": "^9.1.0-next.1",
    "@fluentui/react-components": "^9.0.0-rc.6",
    "@fluentui/react-icons": "^2.0.159-beta.10",
    "@microsoft/mgt-element": "2.4.1-next.teamsfx.3511fba",
    "@microsoft/mgt-react": "2.4.1-next.teamsfx.3511fba",
    "@microsoft/mgt-teamsfx-provider": "2.4.1-next.teamsfx.3511fba",
    "@microsoft/microsoft-graph-client": "^3.0.1",
    "@microsoft/teams-js": "^2.0.0-beta.6",
    "@microsoft/teamsfx": "^0.6.0",
    "axios": "^0.21.1",
    "msteams-react-base-component": "^3.1.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-responsive": "^9.0.0-beta.6",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^4.0.3"
  },
  "devDependencies": {
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "cross-env": "^7.0.3",
    "env-cmd": "^10.1.0",
    "react-error-overlay": "6.0.9",
    "typescript": "^4.1.2"
  },
  "scripts": {
    "dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:teamsfx": "cross-env-shell \"env-cmd -f .env.teamsfx.${TEAMS_FX_ENV} npm run build\"",
    "build:teamsfx:dev": "cross-env TEAMS_FX_ENV=dev npm run build:teamsfx",
    "eject": "react-scripts eject",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "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"
    ]
  },
  "homepage": "."
}

Edit:

My short-term solution is to edit the imports in ./node_modules/@fluent-blocks/react/esm/inputs/RadioGroup/RadioGroup.js:

import { RadioGroup as FluentRadioGroup, Label, Radio, } from '@fluentui/react-components/unstable';

replace by

import { Label } from '@fluentui/react-components/unstable';
import { RadioGroup as FluentRadioGroup,  Radio, } from '@fluentui/react-components';

[thure]

Hi @Anton-vanderTuijn, I found this issue as well. Please bear with us as this project is still quite fresh and under active development, as noted in the Readme (in parallel with @fluentui/react-components which is also changing almost daily).

It does look like @fluentui/react-components moved that component out of its unstable exports which essentially broke this library. I’ll release a fix as soon as I can.

[thure]

Hi @Anton-vanderTuijn — I've published a fixed version to NPM as @fluent-blocks/react@9.1.0-next.4. To switch to the fixed version, you can change the dependency in your package.json to "@fluent-blocks/react": "9.1.0-next.4" and run your package manager's install command.

Let me know if that resolves the issue for you!