1

I try to create a SPFx React WebPart using the component pattern as described in the React-Todo-Basic sample. I get stuck in the container component when I try to

import { Placeholder } from '@microsoft/sp-webpart-base';

I get the error when hovering over it:

[ts] Module '"d:/spfx/iLogger-webpart/node_modules/@microsoft/sp-webpart-base/lib/index"' has no exported member 'Placeholder'.

I did the following steps today to create the project:

D:\spfx
λ npm outdated -g

D:\spfx
λ npm ls @microsoft/generator-sharepoint -g --depth=0
C:\Users\denni\AppData\Roaming\npm
`-- @microsoft/generator-sharepoint@1.1.1

   ╭─────────────────────────────────────╮
   │                                     │
   │   Update available 5.0.3 → 5.0.4    │
   │     Run npm i -g npm to update      │
   │                                     │
   ╰─────────────────────────────────────╯
D:\spfx
λ npm i -g npm to update
C:\Users\denni\AppData\Roaming\npm\update -> C:\Users\denni\AppData\Roaming\npm\node_modules\update\bin\update.js
C:\Users\denni\AppData\Roaming\npm\npm -> C:\Users\denni\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
+ to@0.2.9
+ update@0.7.4
+ npm@5.0.4
added 556 packages and updated 6 packages in 267.968s

mkdir iLogger-webpart
cd iLogger-webpart
yo @microsoft/sharepoint
    ? What is your solution name? i-logger-webpart
    ? Which type of client-side component to create? WebPart
    ? What is your WebPart name? iLogger
    ? What is your WebPart description? Staff - Client Interaction Logger
    ? Which framework would you like to use? React
type package.json                                  
    {                                                    
      "name": "i-logger-webpart",                        
      "version": "0.0.1",                                
      "private": true,                                   
      "engines": {                                       
        "node": ">=0.10.0"                               
      },                                                 
      "dependencies": {                                  
        "@microsoft/sp-core-library": "~1.1.0",          
        "@microsoft/sp-webpart-base": "~1.1.1",          
        "@types/webpack-env": ">=1.12.1 <1.14.0",        
        "react": "15.4.2",                               
        "react-dom": "15.4.2",                           
        "@types/react": "0.14.46",                       
        "@types/react-dom": "0.14.18",                   
        "@types/react-addons-shallow-compare": "0.14.17",
        "@types/react-addons-update": "0.14.14",         
        "@types/react-addons-test-utils": "0.14.15"      
      },                                                 
      "devDependencies": {                               
        "@microsoft/sp-build-web": "~1.1.0",             
        "@microsoft/sp-module-interfaces": "~1.1.0",     
        "@microsoft/sp-webpart-workbench": "~1.1.0",     
        "gulp": "~3.9.1",                                
        "@types/chai": ">=3.4.34 <3.6.0",                
        "@types/mocha": ">=2.2.33 <2.6.0"                
      },                                                 
      "scripts": {                                       
        "build": "gulp bundle",                          
        "clean": "gulp clean",                           
        "test": "gulp test"                              
      }                                                  
    }                                                    

gulp serve
    [11:31:07] Server started https://localhost:4321
    [11:31:07] LiveReload started on port 35729
    [11:31:07] Opening https://localhost:5432/workbench using the default OS app
    [11:31:08] Project i-logger-webpart version: 0.0.1
    [11:31:08] Build tools version: 2.5.3
    [11:31:08] Node version: v6.11.0
    localhost and online workbench work
code .

Up to here everything works fine, localhost and online workbench.

In "src/webparts/iLogger/components"

  • Delete all files
  • Create folder "ILoggerContainer" and in it create the files
    • ILoggerContainer.tsx
    • IILoggerContainerProps.ts
    • IILoggerContainerState.ts
    • ILoggerContainer.module.scss

Added code according to React-Todo-Basic sample. I implemented only the Container component, with one Property webPartDisplayMode.

It seems to me, that I am not referencing the correct "@microsoft/sp-webpart-base" library. How could I fix that? Or is something else going wrong? Any help is much appreciated.

  • I faced the same problem few week ago, where my custom web part stopped working after updating npm packages (including SPFx). On debugging I identified that the problem is caused by Placeholder and it is no more available. – ThinkB4Code Jun 29 '17 at 4:38
  • Do you reckon, if I continue, without the Placeholder, I will not face further issues as a continuation from this? – Dennis Kuhn Jun 29 '17 at 5:32
  • 1
    No, I only faced issue with Placeholder. Rest every component I used is available in update. I developed my custom component to solve this issue. I tried exploring the API but didnt find with the Placeholder name. Either its removed or renamed. – ThinkB4Code Jun 29 '17 at 6:10
1

Looks like it has been removed in the latest SPFx update or moved to a different location.

I can see that the below statement works but it is for extensions and not full page:

import { Placeholder } from '@microsoft/sp-application-base';

An issue has also been opened at the SPFx dev docs git repo:

References -

Placeholder JSX control is missing

Where did the Placehoder class move to ?

I would suggest that you wait for official MS response on this.

Or, you can delete the node_modules folder, and update your package.json as below and then do npm i again and run gulp. It will run the webpart at SPFx 1.0.0 which is the older version:

"dependencies": {                                  
        "@microsoft/sp-core-library": "1.0.0",          
        "@microsoft/sp-webpart-base": "1.0.0",          
        "@types/webpack-env": ">=1.12.1 <1.14.0",        
        "react": "15.4.2",                               
        "react-dom": "15.4.2",                           
        "@types/react": "0.14.46",                       
        "@types/react-dom": "0.14.18",                   
        "@types/react-addons-shallow-compare": "0.14.17",
        "@types/react-addons-update": "0.14.14",         
        "@types/react-addons-test-utils": "0.14.15"      
      },                                                 
      "devDependencies": {                               
        "@microsoft/sp-build-web": "1.0.0",             
        "@microsoft/sp-module-interfaces": "1.0.0",     
        "@microsoft/sp-webpart-workbench": "1.0.0",     
        "gulp": "~3.9.1",                                
        "@types/chai": ">=3.4.34 <3.6.0",                
        "@types/mocha": ">=2.2.33 <2.6.0"                
      },        

Also, i see that you have updated to npm 5. SPFx currently doesnt support it, so you should downgrade it as below:

npm install -g npm@3

  • Thanks for your detailed reply, now I know where to look for bugs :-) Sorry. – Dennis Kuhn Jun 29 '17 at 18:02
  • In regards of the npm version, I got no clue how that happened. I just noticed the note on link stating NodeJS LTS version (v6.11.0) installs npm v3.10.10.. I will downgrade as you stated. Or do you recommend to wipe my set up and start from scratch? – Dennis Kuhn Jun 29 '17 at 18:13
  • 1
    Welcome , happy to help ! No need to wipeout, a downgrade would be good enough. – Gautam Sheth Jun 29 '17 at 18:19
  • Just to wrap up: I downgraded and did not use the Placeholder, everything worked pretty sweet so far :-) I am following the two links to the raised issue by Robin Güldenpfennig. Thanks again :-) – Dennis Kuhn Jul 2 '17 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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