webpack “Module not found: Error: Cannot resolve 'file' or 'directory”

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/218138

  •  24-12-2020
  •  | 
  •  

Question

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 :-)

Was it helpful?

Solution

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?

OTHER TIPS

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.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top