1

I am creating an SPFx 1.11 web part where I have imported Dropdown, IDropdownProps, IDropdownOption from office-ui-fabric-react as:

  import {   
  Dropdown,
  IDropdownProps,
  IDropdownOption  
} from 'office-ui-fabric-react';

However I need to Style the Label of the DropDown for which I need to import IDropdownStyles as well. However when I try to import IDropDownStyles, I get the below error:

office-ui-fabric-react/lib/Dropdown"' has no exported member 'IDropdownStyles

Please find the attached code screenshot. The dependencies from package.json are listed below :

"dependencies": {
    "@fluentui/react": "^8.8.0",
    "@microsoft/sp-core-library": "~1.4.1",
    "@microsoft/sp-lodash-subset": "~1.4.1",
    "@microsoft/sp-office-ui-fabric-core": "^1.11.0",
    "@microsoft/sp-webpart-base": "~1.4.1",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "ajv": "~5.2.2"
  }

Can anyone guide me on what I may be doing wrong here?

enter image description here

1
  • It ran well when I tested it, try running npm install again.
    – Amos
    Apr 5, 2021 at 7:09

1 Answer 1

0

It does not seem you have office-ui-fabric-react in package.json. You can try installing it:

npm install office-ui-fabric-react --save

For comparison, this is what I have in the package.json file:

  "dependencies": {
    "@microsoft/sp-core-library": "1.11.0",
    "@microsoft/sp-lodash-subset": "1.11.0",
    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
    "@microsoft/sp-property-pane": "1.11.0",
    "@microsoft/sp-webpart-base": "1.11.0",
    "office-ui-fabric-react": "^6.189.2",
    "react": "16.8.5",
    "react-dom": "16.8.5"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
    "@microsoft/sp-build-web": "1.11.0",
    "@microsoft/sp-module-interfaces": "1.11.0",
    "@microsoft/sp-tslint-rules": "1.11.0",
    "@microsoft/sp-webpart-workbench": "1.11.0",
    "@types/chai": "3.4.34",
    "@types/es6-promise": "0.0.33",
    "@types/mocha": "2.2.38",
    "@types/react": "^16.9.17",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-dom": "16.8.3",
    "@types/webpack-env": "1.13.1",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "gulp-sequence": "1.0.0",
    "gulp-stylelint": "^13.0.0",
    "lodash": "^4.17.15",
    "spfx-uifabric-themes": "^0.8.0",
    "stylelint": "^13.6.1",
    "stylelint-config-css-modules": "^2.2.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.18.0",
    "webpack-bundle-analyzer": "^3.8.0"
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.