2

I successfully followed and executed 6 of the 7 SPX tutorials. In the last one "Document Card Example", I get the following error during build:

[16:20:50] Starting subtask 'configure-webpack'...
[16:20:51] Finished subtask 'configure-webpack' after 806 ms
[16:20:51] Starting subtask 'webpack'...
[16:20:53] Error - [webpack] 'dist':
./lib/webparts/documentCardExample/DocumentCardExampleWebPart.js
Module not found: Error: Can't resolve 'set-webpack-public-path' in 'D:\Dennis\OneDrive - Paeroa Community Support Trust\spfx\documentcardexample-webpart\lib\webparts\documentCardExample'
resolve 'set-webpack-public-path' in 'D:\Dennis\OneDrive - Paeroa Community Support Trust\spfx\documentcardexample-webpart\lib\webparts\documentCardExample'
  Parsed request is a module
  using description file: D:\Dennis\OneDrive - Paeroa Community Support Trust\spfx\documentcardexample-webpart\package.json (relative path: ./lib/webparts/documentCardExample)
  after using description file: D:\Dennis\OneDrive - Paeroa Community Support Trust\spfx\documentcardexample-webpart\package.json (relative path: ./lib/webparts/documentCardExample)
    resolve as module
      D:\Dennis\OneDrive - Paeroa Community Support Trust\spfx\documentcardexample-webpart\lib\webparts\node_modules doesn't exist or is not a directory
      D:\Dennis\OneDrive - Paeroa Community Support Trust\spfx\documentcardexample-webpart\lib\webparts\documentCardExample\node_modules doesn't exist or is not a directory
      D:\Dennis\OneDrive - Paeroa Community Support Trust\spfx\documentcardexample-webpart\lib\node_modules doesn't exist or is not a directory
      D:\Dennis\OneDrive - Paeroa Community Support Trust\spfx\node_modules doesn't exist or is not a directory
      D:\Dennis\OneDrive - Paeroa Community Support Trust\node_modules doesn't exist or is not a directory

If I run the "Document Card Example" from a Git clone, it works. If I try to run the "React-Todo-Basic" sample from the same clone, I get a very similar the same error as above:

[16:01:36] Starting subtask 'configure-webpack'...
[16:01:37] Finished subtask 'configure-webpack' after 945 ms
[16:01:37] Starting subtask 'webpack'...
[16:01:46] Error - [webpack] 'dist':
./lib/webparts/todo/components/TodoContainer/TodoContainer.module.scss.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./TodoContainer.module.css in D:\sp-dev-fx-webparts\samples\react-todo-basic\lib\webparts\todo\components\TodoContainer
resolve file
  D:\sp-dev-fx-webparts\samples\react-todo-basic\lib\webparts\todo\components\TodoContainer\TodoContainer.module.css doesn't exist
  D:\sp-dev-fx-webparts\samples\react-todo-basic\lib\webparts\todo\components\TodoContainer\TodoContainer.module.css.webpack.js doesn't exist

Any help would be greatly appreciated :-)

Improve this question
1
  • Welcome to SharePoint StackExchange :) , Could you please take a quick tour at sharepoint.stackexchange.com/tour to get informed badge! Thank you for your contribution Commented Jun 14, 2017 at 11:23

3 Answers 3

Reset to default
3

There are issues for two specific scenarios in this issue, so let's tackle them one-by-one. First would recommend ensuring that you have the latest version of the Yeoman templates by executing npm install -g @microsoft/generator-sharepoint, which will update your Yeoman package for the tutorial work.

Issues around the Document Card tutorial

There were some issues around the steps due to the recent update to webpack 2.x so just updated the tutorial steps to reflect those changes. Would recommend retesting the tutorial after package update with updated guidance.

Issues around the react-todo-basic

This has been indeed updated to GA version and should work without any issues. I just pulled the version down to a clean machine and tested that with gulp serve without any issues. Could it be that you are using different node or npm versions than recommended in our development environment setup?

Improve this answer
4
  • Hi Vesa, thanks for your time. I downloaded the standard version during the last couple of days. I just run gulp serve in the react-todo-basic and it showed the following versions, plus the npm: Project react-todo-basic version: 0.0.1 Build tools version: 2.5.3 Node version: v6.11.0 npm version: 5.0.3 I try to redo the Document Cards tomorrow morning :-) Commented Jun 15, 2017 at 10:00
  • Hi Dennis, was able to figure out the issue in the react-todo-basic after some investigation with clean W10 machine. There were some accidental files checked to GitHub which should not be in there... leftovers from the webpack execution. There are two ways to now solve this. #1) pull down latest version for GitHub or #2) run gulp clean and then your local version is cleaned. That will remove unnecessary files and you'll be good to go again. Commented Jun 15, 2017 at 19:07
  • Cheers Vesa, gulp clean worked like a charm for react-todo-basic :-) I should get back to redo the Document Card soon. A quick off topic question, if you can. I am evaluating SPFx to find out if it is supporting the sharepoint features we like. Does SPFx at the current stage support Enterprise Keywords fully? Could I code a WebPart to use (new,edit,view) Enterprise Keywords? Commented Jun 15, 2017 at 19:09
  • Thanks Vesa, I followed the updated tutorial and it worked sweet as. Local Workbench, Online Workbench and deployed using Azure CDN. Keep up the great work :-) Commented Jun 15, 2017 at 20:32
0

The sp-dev-fx-webparts git repository contains examples build using developer preview version of SPFx (from drop 5 and RC0). From then the SPFx code changed a lot and SPFx is still under development.

The tutorials are to give you an idea how to work in SPFx environment. In order to run those tutorial, follow this git tutorial to update RC0 build to GA.

Improve this answer
4
  • Hi thanks for your reply. I did the tutorials "manual", with the latest downloads, from earlier this week. The 7th tutorial gives me the error with webpack, that it can't find the images. When I run it from the Github clone it works. I can't find/see a difference and any pointer would be appreciated. The React-Todo-Basic states in the Readme.md that has been updated to GA recently: 1.0.2|May 4th, 2017|Updated to SPFx GA 1.0.1|February 1st, 2017|Updated to SPFx drop RC0 1.0.0|October 12th, 2016|Initial release Is there maybe somewhere a webpack option I'm missing? Commented Jun 14, 2017 at 18:41
  • can you confirm you are referring to same git directory? Git SPFx WebPart Tutorials Commented Jun 15, 2017 at 7:38
  • Yes it was the correct rep. Thanks for the help :-) Sorry I got the time locker when replying before :-) Commented Jun 15, 2017 at 20:35
  • I tested the repository for Document Card web part and its working fine. I run into an issue, when my command prompt is not opened as administrator. It was not able to download few of the dependencies. Try running your command prompt as administrator, delete the node_module folder and finally run command npm install. Commented Jun 16, 2017 at 6:55
0

gulp clean saved my day when I got this error in one of my own projects that were copied between machines!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.