pnp/docker-spfx

Facing problem with gulp serve

Closed this issue · 11 comments

shrirampophali commented

New spfx app gets created without any problem with yomen generator. But facing problem with gulp serve command. It says local gulp not found in /usr/app/spfx.

My host is Windows 10 enterprise.

spfx@8aeab8fef1fd:/usr/app/spfx$ gulp serve
[14:33:30] Local gulp not found in /usr/app/spfx
[14:33:30] Try running: npm install gulp
spfx@8aeab8fef1fd:/usr/app/spfx$

When trying installing gulp it says

ENOSYS: function not implemented, scandir '/usr/app/spfx/node_modules/.staging/source-map-88fecb73/lib'

waldekmastykarz commented

Which command have you used to create a new project? Did you install dependencies after scaffolding files and did the installation succeed?

shrirampophali commented

Hi @waldekmastykarz I used "yo @microsoft/sharepoint" command to create new project. And after this when i ran "gulp serve" it thrown above error. I was following steps mentioned in this video https://www.youtube.com/watch?v=S9mkUrJ_v6c

shrirampophali commented

Earlier I used 1.4.1 version and now I am using latest one 1.10.0

and using this command to pull docker to local:

docker run -it --rm --name spfx1 -v "C:\All\Docker\SPFx":/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx

waldekmastykarz commented

Can you reproduce it with a different project? Alternatively, could you try to delete the node_modules folder, execute npm install to reinstall dependencies and then run gulp serve to see if it's working as expected?

westerdaled commented

I am facing a similar issue:

In my case, I want to build React Script Editor Web Part for a client.

  1. I ran Git Pull to update my local copy of the the SPFx Web Parts repo
  2. cd react-script-editor ( now I am not sure if Docker will 'see' the SPFx webpart source once I create the container)
  3. Changed the systray Docker popup menu to accept linux containers
  4. in my Win 10 Terminal / PS 7.1 I ran docker run -it --rm --name react-script-editor -v ${PWD}:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx:1.10.0
    looks good
  5. Next I ran npm install which seemed to work with a number of npm warnings

[21:10:26] Local gulp not found in /usr/app/spfx
[21:10:26] Try running: npm install gulp
spfx@347b122c66e3:/usr/app/spfx$ type  /home/spfx/.npm/_logs/2021-05-04T21_09_51_359Z-debug.log
bash: type: /home/spfx/.npm/_logs/2021-05-04T21_09_51_359Z-debug.log: not found
spfx@347b122c66e3:/usr/app/spfx$ dir

Was gulp meant be installed in the container or is this something I need to do?

waldekmastykarz commented

Could it be that one of the warnings, when restoring dependencies, was related to gulp? Running npm install should install all dependencies required by SPFx including gulp. Global gulp is already present in the container, so all that's left is local gulp which should be covered by npm install

westerdaled commented

I did npm install yesterday evening. Please see the output:
Gulp issue .txt
PS sorry for the terse response I am also on a Teams call 😑.

@waldekmastykarz , just checked:

npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
np
waldekmastykarz commented

If you look at the log, there are some errors in there:

npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /usr/app/spfx/node_modules/eslint-plugin-tsdoc/node_modules/@microsoft/tsdoc
npm ERR! dest /usr/app/spfx/node_modules/eslint-plugin-tsdoc/node_modules/@microsoft/.tsdoc.DELETE
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, rename '/usr/app/spfx/node_modules/eslint-plugin-tsdoc/node_modules/@microsoft/tsdoc' -> '/usr/app/spfx/node_modules/eslint-plugin-tsdoc/node_modules/@microsoft/.tsdoc.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/spfx/.npm/_logs/2021-05-04T21_09_51_359Z-debug.log

Have you granted Docker write access to the folder with your SPFx project?

westerdaled commented

Ah , now this bit the pre-reqs did confuse me . I don't have the File Sharing option in Docker Settings
as I have WSL 2 enabled
Docker WSL2

Just seem this on the Docker forum
"Windows 10 Home can only run Docker in WSL 2 mode because Windows 10 Home can't run Hyper-V. But WSL 2 is better anyway. You don't need the file sharing options because all your files are already available to WSL 2."

I will check to see if WSL 2 is set up correctly with a default distro.

  • 👍1
westerdaled commented

Well upgrading Ubuntu 20 and setting it as the default distro in docker seems to have mode the issue along.

Now, not sure if the issue below seems to be more linked to the project files, rather than your docker image

Error: ENOENT: no such file or directory, scandir '/usr/app/spfx/node_modules/node-sass/vendor'

Node-sass missing.txt

Update! just ran
npm rebuild node-sass

Now

spfx@aedfeed9578c:/usr/app/spfx$ gulp clean
Build target: DEBUG
[15:17:09] Using gulpfile /usr/app/spfx/gulpfile.js
[15:17:09] Starting gulp
[15:17:09] Starting 'clean'...
[15:17:09] Starting subtask 'clean'...
[15:17:09] Finished subtask 'clean' after 35 ms
[15:17:09] Finished 'clean' after 36 ms
[15:17:10] ==================[ Finished ]==================
[15:17:10] Project pnp-script-editor version:1.0.0
[15:17:10] Build tools version:3.12.1
[15:17:10] Node version:v10.18.1
[15:17:10] Total duration:45 s

Is this proper hacking😁

THanks for your responses , really helped: just packaged the solution.

  • ❤️1
waldekmastykarz commented

Brilliant! Great to hear it worked. Thanks for all the details along the way. I'm sure they will help others.