import gives ts1005... lots of them

%3CLINGO-SUB%20id%3D%22lingo-sub-1966921%22%20slang%3D%22en-US%22%3Eimport%20gives%20ts1005...%20lots%20of%20them%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1966921%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20a%20problem%20that%20should%20be%20easy%20enough%20to%20pinpoint%2C%20but%20I'm%20at%20a%20loss.%20Can%20anyone%20please%20help%20me%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20trying%20to%20use%20the%20Panel%20element%20from%20Fluent%20UI%20(as%20described%20here%3A%20%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffluentui%23%2Fcontrols%2Fweb%2Fpanel%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffluentui%23%2Fcontrols%2Fweb%2Fpanel%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20used%20other%20elments%20from%20Fluent%20before%2C%20but%20the%20problem%20is%20that%20the%20sample%20code%20imports%20'useBoolean'%20from%20%40uifabric%2Freact-hooks.%20For%20some%20reason%20I%20can't%20build%20my%20project%20when%20I%20put%20the%20import%20statement%20in.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20started%20by%20installing%20the%20package%20like%20this%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Enpm%20i%20%40uifabric%2Freact-hooks%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3EThen%20I%20put%20the%20import%20statement%20in%20my%20tsx%20file%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20%7B%20useBoolean%20%7D%20from%20'%40uifabric%2Freact-hooks'%3B%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3EWhen%20I%20try%20to%20run%20gulp%20build%2C%20it%20gives%20me%20this%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3EError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FDeepPartial.d.ts(4%2C26)%3A%20error%20TS1005%3A%20'%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FDeepPartial.d.ts(4%2C41)%3A%20error%20TS1005%3A%20')'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FDeepPartial.d.ts(4%2C42)%3A%20error%20TS1005%3A%20'%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FDeepPartial.d.ts(4%2C72)%3A%20error%20TS1005%3A%20'%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FDeepPartial.d.ts(4%2C107)%3A%20error%20TS1005%3A%20'('%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FDeepPartial.d.ts(4%2C113)%3A%20error%20TS1005%3A%20')'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FDeepPartial.d.ts(5%2C0)%3A%20error%20TS1128%3A%20Declaration%20or%20statement%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(17%2C66)%3A%20error%20TS1005%3A%20'%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(17%2C113)%3A%20error%20TS1005%3A%20'('%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(17%2C135)%3A%20error%20TS1005%3A%20'('%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(50%2C106)%3A%20error%20TS1005%3A%20'%26gt%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(50%2C114)%3A%20error%20TS1131%3A%20Property%20or%20signature%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(50%2C120)%3A%20error%20TS1005%3A%20'%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(50%2C127)%3A%20error%20TS1005%3A%20')'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(50%2C141)%3A%20error%20TS1005%3A%20'%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(50%2C157)%3A%20error%20TS1005%3A%20'%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(50%2C159)%3A%20error%20TS1128%3A%20Declaration%20or%20statement%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(50%2C167)%3A%20error%20TS1109%3A%20Expression%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(51%2C4)%3A%20error%20TS1128%3A%20Declaration%20or%20statement%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FIStyleSet.d.ts(52%2C0)%3A%20error%20TS1128%3A%20Declaration%20or%20statement%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FObjectOnly.d.ts(0%2C44)%3A%20error%20TS1005%3A%20'%3B'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Fmerge-styles%2Flib%2FObjectOnly.d.ts(0%2C55)%3A%20error%20TS1128%3A%20Declaration%20or%20statement%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Futilities%2Flib%2Fselection%2FSelection.d.ts(45%2C34)%3A%20error%20TS1005%3A%20'%2C'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Futilities%2Flib%2Fselection%2FSelection.d.ts(45%2C59)%3A%20error%20TS1005%3A%20'%3D'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Futilities%2Flib%2Fselection%2FSelection.d.ts(45%2C89)%3A%20error%20TS1005%3A%20'('%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Futilities%2Flib%2Fselection%2FSelection.d.ts(45%2C91)%3A%20error%20TS1005%3A%20'%2C'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Futilities%2Flib%2Fselection%2FSelection.d.ts(45%2C129)%3A%20error%20TS1005%3A%20'%3D'%20expected.%0AError%20-%20typescript%20-%20node_modules%2F%40uifabric%2Freact-hooks%2Fnode_modules%2F%40uifabric%2Futilities%2Flib%2Fselection%2FSelection.d.ts(45%2C136)%3A%20error%20TS1109%3A%20Expression%20expected.%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3EI'm%20on%20SharePoint%202019%20(on%20prem)%20so%20I%20can't%20go%20higher%20than%20SPFx%201.4.%3C%2FP%3E%3CP%3EThis%20is%20my%20dependencies%20section%20in%20package.json%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%22dependencies%22%3A%20%7B%0A%22%40microsoft%2Fsp-core-library%22%3A%20%22~1.4.0%22%2C%0A%22%40microsoft%2Fsp-lodash-subset%22%3A%20%22~1.4.0%22%2C%0A%22%40microsoft%2Fsp-office-ui-fabric-core%22%3A%20%22~1.4.0%22%2C%0A%22%40microsoft%2Fsp-webpart-base%22%3A%20%22~1.4.0%22%2C%0A%22%40types%2Fes6-promise%22%3A%20%220.0.33%22%2C%0A%22%40types%2Freact%22%3A%20%2215.6.6%22%2C%0A%22%40types%2Freact-dom%22%3A%20%2215.5.6%22%2C%0A%22%40types%2Fwebpack-env%22%3A%20%221.13.1%22%2C%0A%22%40uifabric%2Freact-hooks%22%3A%20%22%5E7.13.9%22%2C%0A%22react%22%3A%20%2215.6.2%22%2C%0A%22react-dom%22%3A%20%2215.6.2%22%0A%7D%2C%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3BThere%20are%20no%20red%20squigglies%20in%20my%20code%20in%20VS%20Code%2C%20but%20the%20project%20doesn't%20build.%20If%20I%20comment%20out%20the%20import%20statement%2C%20the%20project%20builds%20fine.%20I%20think%20there's%20a%20version%20mismatch%20somewhere%2C%20but%20I%20haven't%20got%20a%20clue.%20Can%20anyone%20please%20help%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1966921%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1979462%22%20slang%3D%22en-US%22%3ERe%3A%20import%20gives%20ts1005...%20lots%20of%20them%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1979462%22%20slang%3D%22en-US%22%3E%3CP%3EWell%2C%20I%20got%20the%20first%20bit%20working.%20I%20was%20indeed%20a%20version%20mismatch%2C%20my%20TypeScript%20version%20was%20too%20old.%20A%20clever%20fellow%20explains%20exactly%20how%20this%20can%20be%20solved%20%3CA%20href%3D%22https%3A%2F%2Fmedium.com%2F%40droopytersen%2Fusing-react-hooks-and-the-latest-office-ui-fabric-in-spfx-projects-c81d089df1c%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehere%3C%2FA%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20I%20can%20build%20and%20deploy%20the%20sppkg%20file%20without%20errors%2C%20but%20when%20add%20the%20web%20part%20to%20a%20modern%20page%20(or%20in%20local%20workbench)%20I%20get%20the%20error%20below.%20Any%20help%20would%20be%20deeply%20appreciated.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3E%5BSPLoaderError.loadComponentError%5D%3A%20***Failed%20to%20load%20component%20%222868156c-188c-4226-b07b-9322796e38b4%22%20(FluentTesterWebPart).%20Original%20error%3A%20***Failed%20to%20load%20entry%20point%20from%20component%20%222868156c-188c-4226-b07b-9322796e38b4%22%20(FluentTesterWebPart).%20Original%20error%3A%20Error%20loading%20%3CA%20href%3D%22https%3A%2F%2Fcomponent-id.invalid%2F2868156c-188c-4226-b07b-9322796e38b4_0.0.1%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcomponent-id.invalid%2F2868156c-188c-4226-b07b-9322796e38b4_0.0.1%3C%2FA%3E%20__WEBPACK_IMPORTED_MODULE_0_react__.createContext%20is%20not%20a%20function%3C%2FSTRONG%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

I have a problem that should be easy enough to pinpoint, but I'm at a loss. Can anyone please help me?

 

I'm trying to use the Panel element from Fluent UI (as described here: https://developer.microsoft.com/en-us/fluentui#/controls/web/panel 

 

I've used other elments from Fluent before, but the problem is that the sample code imports 'useBoolean' from @uifabric/react-hooks. For some reason I can't build my project when I put the import statement in.

 

I started by installing the package like this:

npm i @uifabric/react-hooks

Then I put the import statement in my tsx file:

import { useBoolean } from '@uifabric/react-hooks';

When I try to run gulp build, it gives me this:

Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,26): error TS1005: ';' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,41): error TS1005: ')' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,42): error TS1005: ';' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,72): error TS1005: ';' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,107): error TS1005: '(' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(4,113): error TS1005: ')' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/DeepPartial.d.ts(5,0): error TS1128: Declaration or statement expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(17,66): error TS1005: ';' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(17,113): error TS1005: '(' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(17,135): error TS1005: '(' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(50,106): error TS1005: '>' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(50,114): error TS1131: Property or signature expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(50,120): error TS1005: ';' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(50,127): error TS1005: ')' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(50,141): error TS1005: ';' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(50,157): error TS1005: ';' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(50,159): error TS1128: Declaration or statement expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(50,167): error TS1109: Expression expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(51,4): error TS1128: Declaration or statement expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(52,0): error TS1128: Declaration or statement expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/ObjectOnly.d.ts(0,44): error TS1005: ';' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/merge-styles/lib/ObjectOnly.d.ts(0,55): error TS1128: Declaration or statement expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/utilities/lib/selection/Selection.d.ts(45,34): error TS1005: ',' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/utilities/lib/selection/Selection.d.ts(45,59): error TS1005: '=' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/utilities/lib/selection/Selection.d.ts(45,89): error TS1005: '(' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/utilities/lib/selection/Selection.d.ts(45,91): error TS1005: ',' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/utilities/lib/selection/Selection.d.ts(45,129): error TS1005: '=' expected.
Error - typescript - node_modules/@uifabric/react-hooks/node_modules/@uifabric/utilities/lib/selection/Selection.d.ts(45,136): error TS1109: Expression expected.

I'm on SharePoint 2019 (on prem) so I can't go higher than SPFx 1.4.

This is my dependencies section in package.json:

"dependencies": {
"@microsoft/sp-core-library": "~1.4.0",
"@microsoft/sp-lodash-subset": "~1.4.0",
"@microsoft/sp-office-ui-fabric-core": "~1.4.0",
"@microsoft/sp-webpart-base": "~1.4.0",
"@types/es6-promise": "0.0.33",
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
"@types/webpack-env": "1.13.1",
"@uifabric/react-hooks": "^7.13.9",
"react": "15.6.2",
"react-dom": "15.6.2"
},

 There are no red squigglies in my code in VS Code, but the project doesn't build. If I comment out the import statement, the project builds fine. I think there's a version mismatch somewhere, but I haven't got a clue. Can anyone please help?

2 Replies

Well, I got the first bit working. I was indeed a version mismatch, my TypeScript version was too old. A clever fellow explains exactly how this can be solved here.

 

So I can build and deploy the sppkg file without errors, but when add the web part to a modern page (or in local workbench) I get the error below. Any help would be deeply appreciated.

 

[SPLoaderError.loadComponentError]: ***Failed to load component "2868156c-188c-4226-b07b-9322796e38b4" (FluentTesterWebPart). Original error: ***Failed to load entry point from component "2868156c-188c-4226-b07b-9322796e38b4" (FluentTesterWebPart). Original error: Error loading https://component-id.invalid/2868156c-188c-4226-b07b-9322796e38b4_0.0.1 __WEBPACK_IMPORTED_MODULE_0_react__.createContext is not a function

Any chance you could clear your node_modules folder and do an re-install of all your modules?