Sp-dev-docs: SpLoader Error with SPFx 1.5.1 and Fabric-UI-React 6.53.0

[heythisispaul]

Category

• [ ] Question
• [ ] Typo
• [x ] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Including Office Fabric UI components into an SPFx React project.

Observed Behavior

I've used Fabric UI React before - however with the newest version it's causing a webpack error on build. I get the below error message on both the local and live workbench:

INNERERROR:
*Failed to load entry point from component "d833ce43-1235-4e82-9b57-e63e75971a6b" (HelloWorldWebPart).
Original error: Error loading https://component-id.invalid/d833ce43-1235-4e82-9b57-e63e75971a6b_0.0.1
external__react_.createContext is not a function
**CALLSTACK:
Error
at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:8502:24)
at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:4359:28)
at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:3884:21)
at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:3796:21)
at https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_en-us.js:6805:47

Steps to Reproduce

I generated the SPFx scaffold by running yo @microsoft/sharepoint and then added React Fabric to the project by running npm i --save office-ui-fabric-react. The dependencies look like:

  "dependencies": {
    "@microsoft/sp-core-library": "1.5.1",
    "@microsoft/sp-lodash-subset": "1.5.1",
    "@microsoft/sp-office-ui-fabric-core": "1.5.1",
    "@microsoft/sp-webpart-base": "1.5.1",
    "@types/es6-promise": "0.0.33",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@types/webpack-env": "1.13.1",
    "office-ui-fabric-react": "^6.53.0",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.5.1",
    "@microsoft/sp-module-interfaces": "1.5.1",
    "@microsoft/sp-webpart-workbench": "1.5.1",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2"
  }

Does the newest version of Fabric UI React need a newer version of React?

Thank you for your help.

Thanks for your contribution! Sharing is caring.

[agzertuche]

You are right, the latest releases of office-ui-fabric-react have React 16: https://github.com/OfficeDev/office-ui-fabric-react/releases

I had the same issue, so I just installed v5.8.0 and everything worked again
"office-ui-fabric-react": "5.8.0",

[heythisispaul]

@agzertuche Thanks that worked perfectly.

[nmnikolov]

The latest release that you can use in SPFx solution (even 1.6.0) at the moment is
_"office-ui-fabric-react": "5.123.0"_

With the next release of SPFx 1.7 they plan to add support for react 16.

[AlRoome]

I'm getting this same error and found the code causing the issue but not a way to fix it.
The issue arises when you add the import { css } from '@uifabric/utilities/lib'; and add this css('') to the className. Anyone have an idea of why this is happening or what could fix it? This worked in past projects from a month ago and now causes the error?

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues