Referencing Images in a SharePoint Framework WebPart

Question

I'm trying to create a simple SharePoint Online WebPart containing a image. The problem is that the image that is packed within the WebPart is not shown.

I have found this solution: https://mattjimison.com/2017/06/03/referencing-images-sharepoint-framework-webpart/

But the problem is that I get an error when i do gulp serve:

[10:19:10] Finished subtask 'post-copy' after 4.25 ms
[10:19:10] Starting subtask 'collectLocalizedResources'...
  Request: '/node_modules/@microsoft/sp-page-context/dist/sp-page-context.js'
[10:19:10] Finished subtask 'collectLocalizedResources' after 26 ms
[10:19:10] Starting subtask 'configure-webpack'...
[10:19:11] Finished subtask 'configure-webpack' after 561 ms
[10:19:11] Starting subtask 'webpack'...
  Request: '/node_modules/@microsoft/sp-component-base/dist/sp-component-base.js'
  Request: '/node_modules/@microsoft/sp-extension-base/dist/sp-extension-base_en-us.js'
  Request: '/node_modules/@microsoft/sp-application-base/dist/sp-application-base_en-us.js'
  Request: '/node_modules/react/dist/react.js'
  Request: '/node_modules/react-dom/dist/react-dom.js'
[10:19:11] Error - [webpack] 'dist':
./lib/webparts/socialLinks/SocialLinksWebPart.js
Module not found: Error: Can't resolve 'set-webpack-public-path' in 'c:\runemy\git\spfx-social-links\lib\webparts\socialLinks'
resolve 'set-webpack-public-path' in 'c:\runemy\git\spfx-social-links\lib\webparts\socialLinks'
  Parsed request is a module
  using description file: c:\runemy\git\spfx-social-links\package.json (relative path: ./lib/webparts/socialLinks)
  after using description file: c:\runemy\git\spfx-social-links\package.json (relative path: ./lib/webparts/socialLinks)
    resolve as module
      c:\runemy\git\spfx-social-links\lib\webparts\socialLinks\node_modules doesn't exist or is not a directory
      c:\runemy\git\spfx-social-links\lib\webparts\node_modules doesn't exist or is not a directory
      c:\runemy\git\spfx-social-links\lib\node_modules doesn't exist or is not a directory
      c:\runemy\git\node_modules doesn't exist or is not a directory
      c:\runemy\node_modules doesn't exist or is not a directory
      looking for modules in c:\runemy\git\spfx-social-links\node_modules
        using description file: c:\runemy\git\spfx-social-links\package.json (relative path: ./node_modules)

Seems like that it is a missing module? How can I get this up and running?

Rune Myrhaug Rune Myrhaug · Accepted Answer · 2018-05-02T09:59:25

Case closed

Case is solved with:

npm install @microsoft/loader-set-webpack-public-path
npm install @microsoft/set-webpack-public-path-plugin --save-dev

And replacing require('set-webpack-public-path!') with require("@microsoft/loader-set-webpack-public-path!");

-Rune

Referencing Images in a SharePoint Framework WebPart

1 Answers