I merged my branch with master, git merge master, and had a few conflicts. When I did this, my app was running and threw parser errors about the <<<<<<<... lines as expected.
I resolved the merges and now I'm getting the same error, but there is nothing in my code!
I can search the project for <<<< and find nothing. I've restarted my app npm run start, even switched branches, and it's stuck there. Made a new folder and recloned the project and that cleared it out. Any idea why/how this happened? How do I make sure this doesn't happen again.
It seems that a cache problem exists between webpack cache and resolving git conflicts.
the solution is:
stop your app
remove node_modules/.cache
start your app
It's possible that when you were trying to resolve the merge conflicts, pieces of your code were not marked as resolved.
A personal tip:
Using a GUI interface when resolving merge conflicts will help tremendously.
Applications like Github Desktop or using Github's own merge conflcit resolve will help better see your changes.
Related
I am currently stuck and unable to locate the error. After building my react application containing the react-tsParticles package, I noticed a immense worse performance after publishing it on my nginx-based webserver. While in local development performance is fine, but the performance when visiting the live page is bad and not comparable to other examples on the internet.
I am not interested in advertising my page, but this is the link to it.
The Code can be found here on Github.
Any advice is appreciated :)
I had this problem too
there is a problem with the build tool or bundle file that occurs when using the npm run build command.
also may be solved by changing the browserslist in package.json.
you can refer to this answer : https://stackoverflow.com/a/70625114/8730051
I'm building an app with NextJs and Typescript. I'm trying to run next build (yarn build) on my local machine to check for typescript warnings and build errors before deploying.
Next build hangs at 'Creating an optimized production build' and hangs forever. Don't even know where to start to address this issue. Can anyone help with this?
Could be a cache issue.
I'd start by removing /.next folder, if it didn't work then both /.next and /node_modules. Whenever you have issues with Next you don't know how to approach or it's just acting weird - removing /.next will solve most of the problems.
Have found the solution to the issue. Apparently the build freeze was caused by empty files located all over my project directory. Removed all of them and next build runs
I had the same issue too.
I solved it by upgrading node version from v16.13.0 to v16.14.0.
Make sure you stoped all servers that running in the background
Use npx kill-port 3000
Tried all the excellent suggestions here, but for me the problem was with optimizing one of the external packages. Since performance wasn't a big issue for me, skipping minifying solved it.
You need this in your next.config.js:
const nextConfig = {
swcMinify: false, // 'minify' in Next versions < 12.0
}
And to make sure this works, I reiterated all the above comments to make sure I wasn't hanging on one of the billion previous attempts :)
So the issue with it was that I had an empty file somewhere in the app. Apparently the empty file was what was hanging the build
You can't have both dev and build at the same time.
I solved it very quickly when I realized that there were several
nodejs processes open when there should only be 1, and killing all the
nodejs processes that were running in the background solved it for me.
It can also happen that a build started to fail and got stuck in the background so you should kill all the nodejs you see running in the task manager. I am using Nextjs 13
I solved it downgrading npm version to v8.5.5. I was testing using v8.12.2 and it always keep in "Checking validity of types"
I recently added google tag manager on a react-app I'm working on and pushed it in a branch called gtm.
AWS Amplify builds the app successfully and it's up and running. I then merged these changes in the master branch with no merge conflicts. However, in the master branch, (where it's hosted on a custom domain) the app fails to build due to this error:
Error: [BABEL] /codebuild/output/src957941865/src/webapp/src/index.js:
Cannot find module '#babel/helper-regex'
Below is the build error displayed in AWS Amplify
(1) First thing to do was obviously perform this:
yarn add #babel/helper-regex
However, deploying with the new changes only creates another
Error: [BABEL] /codebuild/output/src957941865/src/webapp/src/index.js:
but with a different babel module instead, so this creates a long chain of adding packages that don't necessarily fix the underlying issue.
(2) Second fix I did was revert to a version of the app that was successfully deployed. I initially suspected that the google tag manager was the one causing the problem. However, it wasn't the case. The same error was displayed.
(3) Third thing I did was I referred to fix suggested in this issue (https://github.com/facebook/create-react-app/issues/8062). Summarizing the thread, it says that all I needed to do was to perform the following.
Delete node_modules
Delete yarn.lock
Perform yarn install
Unfortunately, this didn't solve the issue and the build error still persists.
(4) Fourth fix I did was I checked the differences between the two branches master and gtm using git diff master..gtm and here was the result.
Seeing that there were differences, out of desperation, I downloaded the **gtm** branch and then copy pasted its contents into the master branch in windows explorer then committed the changes.
Unfortunately, this still didn't fix the issue.
The only thing I haven't tried yet is reconnecting the master branch in AWS amplify but I don't want to risk the website not working since there are active users and if I ever go through with it and it still didn't fix the issue it'll cause more inconvenience. I hope someone already experienced this before and can point me to the right direction.
I had a similar issue recently while tackling a dependency problem for babel-loader with storybook and create-react-app.
After I noticed other preview builds were working correctly, while having the same code as the master branch, I suspected the node_modules cache was the culprit.
I don't know if there's an easier way of cleaning the node_modules cache that amplify uses internally (searched a bit and found nothing), so I just added an extra command in the preBuild phase (rm -rf node_modules)
eg.
version: 1
frontend:
phases:
preBuild:
commands:
- rm -rf node_modules
- yarn install
Once the build was passing, and the cache is regenerated (this is the last step of the build process) you can simply remove the added command and everything works as expected for future builds.
I suggest you also try combining fixes (2) & (3). That is, revert to a version w/out google tag manager followed by a yarn clean-install (i.e. delete node_modules & yarn.lock -> yarn install). The reason for this is your local workspace may still have broken yarn dependencies from the gtm branch even after you revert to a known-good version.
I am using reactstrap in my React app which was originally created by create-react-app.
The problem I'm having is with reactstrap, I'm getting the following console warnings:
./~/reactstrap-tether/dist/js/tether.js
Critical dependencies:
2:479-486 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/reactstrap-tether/dist/js/tether.js 2:479-486
In the project's GitHub issues, I see possible solutions listed like so: "To suppress the warning (for now), add this to your webpack config file...". The problem is, with Facebook's create-react-app I do not have a Webpack configuration file to configure. How can I go about fixing this warning
Looks like this has raised concern for people with create-react-app and a feature request has been put in and is currently being worked on. It should be fixed in the near future so there you shouldn't really worry about it. But to answer the other part of the question, it's possible to get the Webpack, Babel and other configuration files from create-react-app by running npm run eject but since this is an irreversible action and will separate you from future updates, I would highly suggest just waiting for the fix to happen.
In the very beginning, I created the AwesomeProject. Later when I use command
react-native init MyProject, it only created a package.json there. Before that, it could create other files, but very slow.
I searched some ways to fix it, now it only create one file.
It's a known issue that has been fixed (be sure to update react-native-cli): the command seems to hang forever nothing seems to be downloaded.
Try using react-native init MyProject --verbose to see what's happening and/or keep trying. The issue is not coming from your config.