So I'm following a React NextJS tutorial and everything was fine yesterday, but today I had trouble accessing Sanity backend. After Googling the solution was to comment out tailwindcss: {}, in postcss.config.js.
But then all the styles in the app stopped working, even if I un-commented tailwindcss: {},
Remembering that everything worked last time I pushed to GitHub yesterday I cloned the repo but the issue persists.
Then I started the tutorial from scratch, and both Tailwind and Sanity were working perfectly and they still are. But I was trying to figure out what stops my original app from working.
Been bashing my head for hours now and still can't come up with a solution. I even pushed the now working app, cloned it again, and the clone doesn't work while the original of the clone still works.
I ran both npm i --legacy-peer-deps and Tailwinds installation
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
The npx command told me that tailwind.config.js and postcss.config.js already exist.
So I tried cloning the repo, deleting tailwind.config.js, postcss.config,js, and package-lock.json. Also ran uninstall command for Tailwind. And then again ran npm i and Tailwinds installation. But it still doesn't work.
Here's the repo - https://github.com/RUSHWAYC/tikdok-test.git
Here's how it looks like:
Here's how it should look like:
Am I missing anything? Any commands that I should be running in the terminal?
Any help would be appreciated.
Steps you can follow to fix this issue:
Uncomment tailwindcss: {} from postcss.config.js, then re-run your development server.
Completely remove everything, start from scratch, then only copy/import files you need from the started repository.
After hours of fewer induced hallucinations I figured it out.
So I found a way on how to fix the Tailwind styles not applying.
Clone the last push to GitHub
Delete tailwind.config.js | postcss.config.js | package.json | package-lock.json
Remake tailwind files and package.json (or in my case copy them from the dude whose project I'm copying)
npm i --legacy-peer-deps
cd backend (to go to Sanity backend folder)
npm i --legacy-peer-deps
cd ..
Don't forget to comment out tailwindcss: {}, in postcss.config.js as it messes up Sanity
npm run dev
So it works now and shows Tailwind CSS applied to the project.
But then, if you git add . there are these errors:
warning: in the working copy of 'package.json', CRLF will be replaced by LF the next time Git touches it
warning: in the working copy of 'postcss.config.js', CRLF will be replaced by LF the next time Git touches it
warning: in the working copy of 'tailwind.config.js', CRLF will be replaced by LF the next time Git touches it
So git reset that.
Found this useful post about the first error. - Git replacing LF with CRLF
Basically, it's something dumb that I'm even dumber to understand.
But at the end of the post, they linked this answered question here about git add --renormalize . that fixes the issue - Git: how to renormalize line endings in all files in all revisions?
So after doing all the steps above and writing some code, one should run:
git add --renormalize . and then git commit -m "Message."
There should be no errors like previously this time, and every time you git commit next there shouldn't be any issues (unless you edit the files in question).
I also changed the config autocrlf settings to input from true after reading the first article I linked. Not sure if I should, but I did and the article I followed on how to do it can be found here - How to change line-ending settings
Related
I just finished the ReactJS.org tutorial and it was functional. Then I added a bunch of comments to explain each block of code, closed down the local server, and went home. When I re-opened it to start tweaking it and trying advanced options, it broke, with several errors (webpack, eslint, child compilation failed...). The only thing that changed was a VS Code update.
The main error seems to be related to webpack, but I don't have a webpack config file, and I'm not using it to my knowledge. I used create-react-app to build the app, and deleted the files in the src/ directory to start from scratch like the tutorial says to do.
Errors: (see image)
When doing npm start, it says 1 ERROR in child compilations... in the terminal
Must use import to load ES module...
Child compilation failed...
Troubleshooting:
I removed and re-inserted ESLint config options in package.json
I tried npm uninstall eslint
Did a git checkout of the previous commit (the finished tutorial) which was functional, but it's broken now
Also did an npm ls for reference (see images)
I have reproduced this problem, but my problem is that I created a project based on create-react-app in the V16.* version of Node, but I ran it with the V12.* version of Node. So when I re-run the 16.* version it will work, hopefully that will help you
Trying to fork pancakeswap from https://github.com/pancakeswap/pancake-frontend.
Steps what I did,
Clone Repo
Run npm install command
Run npm start command
Solve some no-used props error by commenting that props. After that also 2 errors are still in application.
Error1: JSX props should not use functions react/jsx-no-bind
Error2: defaultProp "expanded" has no corresponding propTypes declaration react/default-props-match-prop-types
Help me to solve this. Stuck more than 5 days. Searched many pages but no use. Most of them are suggested to change jsx functions. Is there is any simple way to solve these errors?
I did the same yesterday and it worked. There are still some elements that I need to figure out, but to make it running on localhost wasn't hard.
Before running pancakeswap frontend we need to have nodejs installed. Should work with any version 16, my was v16.14.0. Second is to have installed yarn as they don't use npm. This we know because the project has yarn.lock file. Third is have nextjs installed globally like yarn. With this we should be able to install and run the app.
Next steps would be:
Clone repo or just download it, will work as well
Run yarn install command (or just yarn - works the same)
Run yarn build (this will call next build)
Run yarn start (this will call next start)
After last step the app should start on localhost:3000
This is what I did and it worked. Keep in mind that this is valid for the current version and could change in future.
Appearing out of nowhere, this error has me stomped. It appears any time I try to import a css file, whether in full or as a module.
E.g.
import "./index.css"
or
import styles from "./button.module.css"
It MAY have been due to the latest macOS beta at least it seems to have coincided with its release. I tried rolling back from it, but that didn't work.
Failed to compile
./src/index.css (./node_modules/css-loader/dist/cjs.js?modules=true!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
CssSyntax error: Unknown word (1:1)
> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 | var content = require("!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!../node_modules/postcss-loader/src/index.js??postcss!./index.css");
3 |
This error occurred during the build time and cannot be dismissed.
I've tried manually adding web pack, checked everything for syntax errors, re-installed the whole repo, went back several commits and so on. Nothing seems to do anything. Happy to supply more context.
(I found one other person mentioning the same problem on SO 15 hours ago, but he hadn't supplied debugging information so the ticket was closed).
Note: The same codebase runs perfectly well on my MacBook, no problems!
It's seems like your npm project setup is broken. This type of problem famously called Failed to compile generally occurs when we are moving one branch to another branch more often and we sometimes forgot to do npm install and continue to work on another branch which has new packages without doing npm install and many more cases which is very hard to tell that in which cases your npm setup is broken.
There are couple of ways of solving this issue.
First way
Delete the node_modules directory and package-lock.json file.
Close the editor and open it again and in new terminal do npm i. Then check whether it is compiled or not.
If that didn't work then follow the second way.
Second way
Clear the npm cache forcefully of your project setup.
npm cache clear -f
Then restart the system for closing all the node service for this session. After restart do npm i and check again.
If that didn't work then follow the third way which I think that fail compilation issue will be easily solved.
Third way
Just clone your project again in another directory and do npm install.
Can you try this?
👉 Delete these folders: node_modules and package-lock.json.
(You can also delete a cache folder if there is)
🚧 Run this Commands:
With yarn: yarn
With npm: npm install
👋 You can also try to change your import method:
import * as styles from ...
This might help hopefully!
The code is right. There may not be a problem with code.
The steps mentioned below might help:
Delete node_modules folder.
run npm install
run npm cache clean -f (try without -f first)
*first 2 steps worked for me.
Tried to run npm start on a project I hadn't looked at in a couple weeks and when I did it opens up localhost:3000/myname/partofmyprojectname instead of just localhost:3000/
When I go to localhost:3000/ there's an error in my terminal
Really confusing because it worked last time I tried it and I didn't change anything I don't think.
As I was making this question I found the solution from this post:
In my package.json, "homepage"'s value was the path to the readme in the github repo: "https://github.com/myname/my-app-frontend#readme" (don't know how that happened). I just changed that to '/'.
I'm thinking maybe my version of react-scripts updated and npm start was deferring to the homepage key in the package.json but not totally sure.
I've been using create-react-app to make some projects in react and also for practicing, and usually the way to run the project is to use the command npm start from the root directory of that project in the terminal. This has since stopped working for both my old projects which I haven't touched or completely new ones, and followed the exact instructions given by the error already to no effect.
An image of the error, the very top of the terminal is immediately after the npm start command:
I have been googling this over the past two days and I simply can't figure it out. I'm hoping someone with better knowledge would know the root of why npm start has stopped working. Please keep in mind that I already tried the suggestions provided by the error in the terminal.
What's really mind boggling is I haven't changed pcs or done any editing in the old projects such as the one in the picture above, re-installed a bunch of stuff I thought might have been causing issues like npm or babel but they simply don't launch anymore.
Also almost forgot the error log, which has been even more confusing to figure out or google:
You have problem with your dependencies. Please run
npm i
inside project directory.
As your console shows, you can try
remove your node_modules directory
delete file package-lock
I suggest clean npm cache (npm cache clean -f)
and reinstall node_modules using
npm i
There are many reasons to cause this problem.Some suggestions here:
1.uninstall babel-loader and create-react-app globally
npm uninstall -g babel-loader
npm install -g create-react-app
2.remove the error package
rm -rf ~/node_modules/babel-loader
3.stop all the command then clean up the cache of npm