Problem importing Placeholder from @microsoft/sp-webpart-base

Question

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.

Answer 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