Including react in ApplicationCustomizer

[sparkitect]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

Expect no errors when executing gulp package-solution --ship
Note that other gulp tasks execute without error.

Observed Behavior

Following errors when executing gulp package-solution --ship
[18:43:03] Starting subtask 'package-solution'... [18:43:03] [package-solution] Ignoring manifest due to validation error: (/usr/app/spfx/temp/deploy/37e57283-39f3-4cd0-a31c-2083dcf0607a.json) use '--verbose' for more information [18:43:03] [package-solution] (#/) Data does not match any schemas from 'oneOf' (#/) Missing required property: description (#/loaderConfig) Data does not match any schemas from 'oneOf' (#/loaderConfig/scriptResources/react-dom) Data does not match any schemas from 'oneOf' (#/scriptResources/react-dom/version) Data does not match any schemas from 'oneOf' (#/version) String is too short (0 chars), minimum 5 (#/version) No enum match for: (#/scriptResources/react-dom) Missing required property: path (#/scriptResources/react-dom) Missing required property: defaultPath (#/loaderConfig) Expected type null but found type object (#/componentType) No enum match for: Extension (#/) Missing required property: preconfiguredEntries (#/) Missing required property: items (#/) Missing required property: rootComponentId

[VesaJuvonen]

This indicates that you have a reference on old json files... with different versions which are being used. We would need to understand what versions of SPFx is being used in the package as this is not getting reproduces with you create a clean package from SPFx 1.5.1. Can you confirm what's the status with a clean solution and what versions you are using? Thx.

[sparkitect]

Using SPFx 1.5.0 in this case.

We are using React in a placeholder and since the Yeoman SharePoint Generator doesn't offer to add a framework when creating an Application Customizer, we had to add it ourselves. It seems two developers did it differently and package[-lock].json was incorrect. Suffice it to say, npm insall react gave us v16 of React while SPFx still needs v15 or something to that effect. Specifying the version of React while doing npm install seems to have fixed it.

Is there official documentation (or even tips) on the correct procedure to add React to an existing project?

[andrewconnell]

@sparkitect No... not that I'm aware of... but all that's required is to add the two React packages to the package.json's dependencies section (React & React-DOM) & two packages tot he devDependencies section (the equivalent TypeScript type declarations).

Which package versions to use for each of the 4? Create a react web part project using the version of SPFx that you're currently using and inspect package.json for what's supported by SPFx.

[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