SPFx solution is giving error while cleaning the solution - sharepoint

I have created a SharePoint extension with SPFx framework. initially I ran the solution and it is working fine. But in second run I want to clean the solution. So I executed gulp clean command, but it is failing and producing different kind of errors seems each time. Sometimes error is coming on gulp package-solution, sometimes with gulp build command.
Below is sample error:
Error - Unknown
EPERM: operation not permitted, open 'E:\Practice\SharePoint\SPFx\Extensions2\HeaderFooter\temp\deploy\sp-fx-header-footer-application-customizer_4851d776c4c9f9fd9ef72c1f266114dc.js'

remove temp folder and try gulp build again.
temp folder is created whenever we use gulp bundle or gulp package-solution to bundle js file. it also create a deploy folder. Js files in that folder will be paste to cdn folder on deployment time.

Related

"tmpnodejsnpm-cache" folder is getting created in every project created using npm command

Whenever I create Vue and React projects using npm, it generates a "tmpnodejsnpm-cache" folder in my project directory.
And after deleting this folder also project runs properly but if I hit the "npm i" command again it will again create same folder, I want to get rid of it.

Vue-repo "Module build failed: Error: No ESLint configuration found"

My Vue project is running fine locally, but when upload it to github repo, download it back from there and npm install, then npm run dev, it throws error Module build failed: Error: No ESLint configuration found.
When I unzip my downloaded repo-files, there's no .eslintrc etc. files that are present when I'm uploading my project, and to my knowledge that is one reason causing this ESLint problem.
Here's the very basic vue init webpack HelloWorld.vue uploaded to my test-repo without any modifications to show how it fails to build after downloading.
Link to my test repo to reproduce the error: https://github.com/tuuchen/vue-movie-app
How can I fix this issue with eslint?
EDIT: I made a fresh project without eslint, and when downloading it from my git repo, It's throwing Failed to compile error, asset optimization[copy-webpack-plugin] WARNING - unable to locate '<path>\myvueapp\static'
EDIT 2: Also .postcssrc is missing when initiating npm install
EDIT 3: Problem solved. I was using webpack for creating my vue project, and it caused all kinds of issues when downloading the project back from git repo. npm install -g #vue/cli did a project that worked without issues.
Sorry for being such a noob.
This issue came up as I created a new project by copying from another project on my Mac. However, the hidden files were not copied!
Solution
The issue got resolved by having these hidden files as well in the new project:
.babelrc,
.editorconfig
.eslintignore
.eslintrc.js
.postcssrc.js
There are other solutions that many have proposed in this Vue Issue that you can refer to if this does not solve your problem.
In my case, I just delete the folder Node.Js and try reinstall node modules using yarn/npm.
if it still did not work, you can try to add file .eslintignore on the root folder and add there the path to the folder we want to omit.
For example, in this scenario, .build/test.js is the desired file to allowlist. Because all dot-folders and their children are ignored by default, .build must first be allowlisted so that eslint becomes aware of its children. Then, .build/test.js must be explicitly allowlisted, while the rest of the content is denylisted. This is done with the following .eslintignore file:
# Allowlist 'test.js' in the '.build' folder
# But do not allow anything else in the '.build' folder to be linted
!.build
.build/*
!.build/test.js
more documentation https://eslint.org/docs/user-guide/configuring/ignoring-code#the-eslintignore-file

Pre-build event grunt on build server, not finding grunt

I have been using CoffeeScript files within a project and have installed grunt into the project to compile them.
I am using Grunt Launcher to compile the files manually, but I wanted to be able to do so automatically when the project is built. To this end I put the following in the pre-build event command line under the project properties:
CD $(ProjectDir)
grunt build
This seems to work locally, but when I commit to the build server it comes back with this error:
C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1063,5): error MSB3073: grunt build" exited with code 9009
My research suggest that this is essentially a file not found; I presume for grunt. Some posts (here and here) suggest that added the full path is the answer, but what is the full path for grunt? Is it something like:
"path-to-project\node_modules\grunt\lib\grunt.js"
Grunt is installed both locally in the project and globally on my PC. I'm using Visual Studio 2012.
Is there anyway to get the build server to run grunt?
Thank you in advanced for any help.
Thank you to anyone who had a look at this question.
After a bit of experimenting I found putting this into the pre-build event command line works:
CD $(ProjectDir)
cmd.exe grunt build

Loading external libraries in a SharePoint WebPart

I am working with SharePoint Framework and building a custom WebPart for SharePoint Online. Following the instructions here, I can't get any libraries loaded from external CDNs.
This is the error I get every time: The entry point for component "my-component-id-here" (SalesNavigationWebPart) has a dependency on "#microsoft/sp-loader" that is not declared in the manifest.
I tried to load it by adding an entry to externals: {} in config.json, but the error is still there. Any ideas on how to fix this?
In my case, I uploaded the .sppkg without importing the sp-loader (in code) first time. Next time even if you add the sp-loaded and deploy the cdn files it won't work.
you need to use below commands and redeploy .sppkg file in app catalog.
gulp clean
gulp bundle --ship
gulp package-solution --ship
Further reading,
While you execute the gulp bundle --ship command inside the temp/deploy folder there will be a .json file with the GUID of your web part. It has the reference to the sp-loader module.

NodeJS NEXE bundle error

I was trying to use NEXE to bundle my express 4 project. The bundling was sucessful, and a http_server.nex was generated. However, when I was trying to run the bundled file, I got the following error:
Error: ENOENT, no such file or directory '..../release/types/mime.types'
And I checked the release folder, the types folder and the mime.types file was never created. Any suggestions?
Or in general, what's the best way to deploy node project in a package? I tried several tools but none seem work so far. We need some level of obfuscation / compilation to have some code security.
Thank you in advance!

Resources