Installing bootstrap with npm is throwing errors - css

I am basically trying to install bootstrap (sass version) with npm and I have done so by following this guide here: https://getbootstrap.com/docs/4.0/getting-started/download/ (see the npm part).
then I continued setting it up by following this guide here: https://getbootstrap.com/docs/4.0/getting-started/build-tools/ so that I could compile the sass into css.
The issue is that when I am running the command npm run dist I get the below error:
I can't figure out such error and have also tried researching the web for a similar error but could not find anything. I can't understand why such a popular framework is so frustrating to get up and running.
Any insights please?
Update:
Here is the debug.log

Related

No valid exports main found on npm (tailwind css)

i am learning tailwind css and in tutorial they write a command like this npx tailwindcss-cli build css/tailwind.css -o build/tailwind.css
and it build a different folder name "tailwind.css" in same directory
but in my case it gives a error
No valid exports main found for 'C:\Users\HHH\AppData\Roaming\npm-cache\_npx\4952\node_modules\tailwindcss-cli\node_modules\postcss'
I don't have any idea what it means and whats wrong with the setup.
please help.
I find the solution.
Just install the current node.js and reinstall the specific version.
download here
After that install it and everything works fine.
Note: It works in when you follow the tailwindcss cli method.
follow first part of video

Unable to install tailwind css in react using npm

I recently started learning React js. I familiar with tailwind css ands tart instlaling it using documentation. At the third step when i have to install craco i start facing error. I too intsall the older version which work. but after that at last npm start i start facing error again. what to do. anybody help me out.
https://v2.tailwindcss.com/docs/guides/create-react-app
npm run start
using npm run start

Next.js build failing to compile ( HookWebpackError: <css input>:61:1: Missed semicolon)

The Problem:
next.js is failing to run the build command, even though I can run it in development mode with no problems. Its saying there is a missing semicolon in the css. Of course there isn't one, it wouldn't compile in dev mode if there was. And for general information, I am using css modules for this project. So all my css is name.module.css.
here is the warning the console gives, and it is the entire stack trace. Doesn't change if I run --debug flag either. and Im running npm run build which corresponds to the script "build": "next build" in my package.json.
> projectName#0.1.0 build
> next build
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
Failed to compile.
HookWebpackError: <css input>:61:1: Missed semicolon
> Build error occurred
Error: > Build failed because of webpack errors
at /Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/build/index.js:17:924
at async Span.traceAsyncFn (/Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/telemetry/trace/trace.js:6:584)
What I have tried:
First I looked up the issue here. I found a few posts with similar errors.
Post 1 From post claification: this is my full stack trace shown.
Post 2 I ran npm install and it found nothing to update. and changed my import to "next/app" instead. Didn't help either.
Other than posts I did a dive into the next.js code in node_modules to try to understand what was happening and I got no where because its a webpack thing, which I did not realize. I also saw another post that I cannot find that said that this error happens with importing google fonts sometimes, so I commented out all my google fonts and this is still happening. I do not quite understand how it could give errors on build but not on dev.
Closing thoughts
I suspect that something is being imported into some file somewhere, as that seemed to be the issue in the other post I read (the one I cannot find), however I cannot find it. That or my lack of next.config.js file is causing the issue ( I am a next.js beginner). Also, I am using typescript, if that helps.
Any help is really appreciated.
Thank you everyone 😄

Warning: StringMap expected string key Use --force to continue

grunt build command failed with following results
Please help me....
NOTE:
ngAnnotate:dist reading happened but after that writing is not happening...
bower minification is working. controllers,services js files unable to ngAnnotate
None of controller have any ES6 features (no arrow funtion ==>, no Let,const keywords used to declare)
my package.json file has below modules
I was using "grunt-ng-annotate": "1.0.1" and got the same error. I tried to upgrade but it didn't work.
Since I needed a quick fix, I had to downgrade to 0.10.0 and now it's working fine.
I removed the current version: npm uninstall grunt-ng-annotate --save-dev
And installed the older one: npm install grunt-ng-annotate#0.10.0 --save-dev
I hope it helps!

Why is Visual Studio looking for my gulpfile in the wrong folder?

Backstory
I've been trying to set up a project in Visual Studio, which uses GulpJS to compile Sass. I was told that VS should automatically recognize the package.json inside a project and run npm install, but I had to do that manually through a command line. Even then, when I opened Task Runner Explorer, it says that there are (No tasks found). My coworker and I looked up solutions that worked for other people, many of which reported having success after restarting VS, clearing some cached data, or reinstalling the node modules; however none of those worked for me. Here are some solutions I've attempted:
Visual Studio 2015 RC Gulp task runner not detecting tasks (All Answers)
https://stackoverflow.com/a/37437209/6425704
Basically the entire first page of Google for "visual studio gulp no tasks found"
The Problem
After some digging, I came across the Package Manager Console and decided that maybe I can run gulp through that instead of opening a separate CMD window. However, when I did, I got the following:
[11:27:43] Local gulp not found in C:\
[11:27:43] Try running: npm install gulp
My immediate thought was that I might need to reinstall the dependencies, so I ran npm install and got this output:
npm : npm WARN enoent ENOENT: no such file or directory, open 'C:\package.json'
At line:1 char:1
+ npm install
+ ~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (npm WARN enoent...:\package.json':String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError
npm WARN !invalid#1 No description
npm WARN !invalid#1 No repository field.
npm WARN !invalid#1 No README data
npm
WARN
!invalid#1 No license field.
This is when I noticed that it is looking for C:\package.json instead of the one inside my Project directory. However, when I ran ls, it clearly shows that it's inside the Solution root, at C:\Dev\solution-name. I tried navigating to the specific Project, using cd Presentation\Nop.Web, but I still get the result of it looking in the C:\ root. Can anyone explain why this is happening and how I can fix it?
I finally figured it out (one more day, and I would've offered a bounty for this question), and it's not a problem with VS. Back when I first started using this specific computer and was still using Windows' default Command Prompt, I didn't like it starting in %USERPROFILE% by default. So I looked for a way change the default and stumbled upon a registry "hack" which essentially runs cd C:/ on cmd.exe startup. However, it turns out that this causes other command line tools, including Powershell and VS's Package Manager to run that command.
If anyone else is experiencing this issue (which, due to the nature of this situation, I doubt anyone has), you can try following these steps:
Open up Registry Editor. I did it by using the Windows Run tool (Win + R) and typing regedit.
Navigate to HKEY_CURRENT_USER > SOFTWARE > Microsoft > Command Processor.
Remove AutoRun (or change its value to something that won't interfere with your workflow).
More info here.
Original Registry Tutorial (Note that if I had scrolled down a bit more, I might have avoided this situation.)

Resources