I'm working on two React projects.
In both projects, the manifest.json file is set up correctly and The serviceworker is also registered.
In one of the projects, the question of adding to the home screen is not asked.
From the research I've done, I've found that a project that doesn't work properly can't find a file in .license format, but in a project that works properly, it's a file with a .license.txt format.
What makes the difference between the two files when it is taken from the building project? How can this problem be solved?
Photo of the project that works properly and displays the install app prompt
The project photo does not work properly and does not show the install app prompt
error message in console
Finally I found the solution to the problem. If you have ejected the project, you can add a field called extractComments with a false value in the webpack.config.js file in the TerserPlugin section. If you have not ejected the project, you can solve this problem by creating a webpack.config.js file and adding the Terser module with the default settings and adding the extractComments field with a false value. The following links may be helpful in understanding and resolving the issue.
license-to-kill-your-PWA
terser-plugin
Related
I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.
Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.
When I'm running my code in development (React-scripts start) everything is working as expected.
I can create the editor, the schema gets implemented correctly and autocompletion is also working.
BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.
I always get these errors in production:
I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.
I also tried to use the worker loader to load the workers, but it also didnt help
Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?
Thanks in advance
What I tried: Monaco Webpack Plugin, plain webpack, worker-loader
Expected Behaviour: Monaco Editor with Monaco Yaml working in production build.
Current behaviour: Working fine in development build, cannot load workers in production.
The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.
yesterday I wanted to create a landingpage for a subcategory if my website. The site it build with create react app. I created the sub-page using react router. On lokal machine everything works fine.
But after I deployed it on AWS (amplify) the included fonts in the whole app (old site and new one) are not working anymore.
I am getting the "Failed to decode downloaded font: " and "OTS parsing error: invalid version tag" errors.
I didn't changes anything in the index.scss/index.html files.
After I`m running the build command the fonts-files are in the right folder ...
This is how my index.scss looks like:
#font-face {
font-family: "SF Compact Display";
src: url("./assets/fonts/SF-Compact-Display-Regular.otf");
}
#font-face {
font-family: "SF Compact Display Semi";
src: url("./assets/fonts/SF-Compact-Display-Semibold.otf");
}
I also tried it with absolute path :
enter code here src: url("assets/fonts/SF-Compact-Display-Semibold.otf");
But it doesn't work.
I imported the index.scss into my index.tsx import './index.scss'
Both files are living in the src root.
I have read lots of other stories that are similar to my problem. But nothing works.
Does anyone have a guess why I am getting this problem? Is there maybe a redirecting issue with aws as this is the only think which I changed?
(as i said before I included the react router the fonts where working fine ). I also tried to remove the react router and get the old page with the right fonts. But now I have the same issue there.
On aws rewrites I included </^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf|otf)$)([^.]+$)/> with /index.html and 200 Rewrite.
Im trying to fix it for hours now, but I don't have any clue what the issue could be.
I hope anyone had the same issue in the past and can help me.
Bests
Not sure if you already solved this, but here're some thoughts to help.
The Failed to decode downloaded font error is almost certainly because the app responded to the browser's request for the font with html. This would likely happen if there's a catch-all route configured for the SPA (e.g. respond with the root index page or a not-found page).
From the info you've shared, the most likely issue is that the relative path to the font files is being broken in the build process. The key insight here is that url("assets/fonts/SF-Compact-Display-Semibold.otf"); isn't actually an absolute path because it's missing the / prefix. If your build's putting the font file in /assets/fonts/SF-Compact-Display-Semibold.otf, what you want is: url("/assets/fonts/SF-Compact-Display-Semibold.otf");.
A useful way to check the directory structure produced by building is to run npm run build (see https://create-react-app.dev/docs/production-build/). This produces a production build in a directory called build. When creating an AWS Amplify project, it automatically sets up running the build process for you (see https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html). By default, for create react app apps, this means it'll do npm run build prior to deploy.
I have a React app created using Create React App that was running fine until today. Something must have updated the last time I installed a new package. Anyhow, so whenever I try to start the app, it complains that there are .ts files (within node_modules folder) and forces me to install TypeScript.
Is there any way to stop this behaviour? Because currently, installing TypeScript just opens a bottle of worms, where I need to resolve the TypeScript errors that arises.
Also, as the screenshot suggests, removing the tsconfig.json file doesn't resolve the issue, it gets automatically created on every run..
Currently because it's preventing me to work, I've done the following modification until they fix it on the Create React App:
Current solution until they fix the create react app
On the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, find the definition of verifyNoTypeScript() (line 24). Replace the function to the following:
function verifyNoTypeScript() {
return true;
}
Recently, I downloaded mern.io. The nice thing is they have bundled everything for me. But I am kind of lost. In my last project whenever I changed something on client I could refresh browser and see the changes. With MERN I always see:
webpack building...
webpack built e9c15d7d435381a63771 in 1043ms
At first it was replacing the code on client. Now, I can't make it to propagate changes any more.
Maybe it's an issue with https://github.com/gaearon/react-hot-loader
What am I missing?
Do I have to clean the webpack or caches somehow?
EDIT
The config files can be seen here: https://github.com/Hashnode/mern-starter
The webpack ones are webpack.config.*.js
EDIT 2
The computer restart helped me but only for the first load of the page. I have found this message in the console:
XMLHttpRequest cannot load http://0.0.0.0:8000/50d9888579520587227e.hot-update.json
Which led me here: https://github.com/gaearon/react-hot-loader/issues/56
I am new to meteor + angular and i am learning this from http://www.angular-meteor.com/
When i reach 3-way data binding section and create folder called collections in socially folder and create file called parties.ts it is giving me error i write following two lines in that file.
import {Mongo} from 'meteor/mongo';
export let Parties = new Mongo.Collection('parties');
here is the error log.
C:\<user>\AppData\Local\.meteor\packages\meteor-tool\1.3.2_4\mt-os.windows.x86_32\dev_bundle\server-lib\node_modules\fibers\future.js:245
throw(ex);
^
Error: A method named '/parties/insert' is already defined
at packages/ddp-server/livedata_server.js:1548:15
at Function._.each._.forEach (packages/underscore/underscore.js:113:1)
at Server.methods (packages/ddp-server/livedata_server.js:1544:7)
at packages/allow-deny/allow-deny.js:191:24
at [object Object].CollectionPrototype._defineMutationMethods (packages/allow-deny/allow-deny.js:190:5)
at new Mongo.Collection (packages/mongo/collection.js:226:8)
at meteorInstall.collections.parties.js (collections/parties.ts:2:22)
at fileEvaluate (packages/modules-runtime/.npm/package/node_modules/install/install.js:141:1)
at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:75:1)
at collections/parties.ts:2:54
Exited with code: 8
Your application is crashing. Waiting for file change.
I hope i will get help from this community. Thanks.
I had the same problem and successfully fixed it. I was also using Atom with the Atom TypeScript plugin, which was automatically compiling the TypeScript files to JavaScript separate from Meteor and creating unnecessary files.
Here are the steps that I took to fix the problem:
Check your tsconfig.json file and make sure it has these lines (add or change them if necessary):
"buildOnSave": false,
"compileOnSave": false,
Close and restart Atom to make sure the Atom TypeScript plugin uses the new settings and stops automatically compiling TypeScript to JavaScript on save.
Delete all *.js and *.map files in your "client", "server", and "both" directories.
Stop your Meteor instance if it is currently running (probably "ctrl-c" or "command-c", depending on your OS).
Run "meteor reset" on the command line.
Run "meteor" on the command line to recompile your TypeScript files and restart Meteor.
After that, everything worked fine for me.
Problem could be sometime type script might not be compiled properly into js. Try deleting js file in that folder , edit your typescript file and save. Next recompilation should remove this error.
I have the same error. Did you ever figure it out?
I ended up solving my issue and I had to add "compileOnSave": false" to my tsconfig file. I'm using Atom and it was automatically compiling.