import gives ts1005... lots of them

Copper 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?