I'm developing a site that will be ran inside Kiosk Pro and as such, it will need to be ran without a server.
I've added homepage to my package.json file and started using HashRouter, but after running the build and accessing the index.html file, I get this error in the browser: react-dom.production.min.js:4636 TypeError: Cannot read property 'pathname' of undefined
Is there something else I need to add to my configuration?
The solution:
I was getting TypeError: Cannot read property 'pathname' of undefined due to one of the navigation components relying on stateOpts, which don't work with HashRouter, and not setting the pathname of the NavLink. I moved this logic into the component itself (which makes more sense anyway) and it worked!
Related
I'm using react pdf to render my component as PDF & allow user to download that PDF on button the PDF was working well after applying pollyfills changes but for my lead (who is using MAC) the PDF was not rendering and giving the
Error: react_devtools_backend.js:4026 TypeError: zlibWEBPACK_IMPORTED_MODULE_3.createDeflate is not a function
On deployment it's even works well on his system but locally he can't render it, does anyone have idea what issue that would which causing this things?
I tried to clone the repo in another folder & installed all the dependencies again but nothing works yet
Here's the screenshot of console error: https://cdn.discordapp.com/attachments/990645691531534370/1012846396296138833/Screen_Shot_2022-08-26_at_3.09.51_PM.png
I found the similar issue opened as well source: https://github.com/diegomura/react-pdf/issues/1935
But it's closed without any proper explanation
Any time I import Amplify into my React Native project's App.js file, I get the following error:
TypeError: null is not an object (evaluating 'keys.filter')
Here is how I'm importing it:
I run the project using Expo only. If I comment the import Amplify line out, any other files which use anything related to Amplify cause the same error to occur.
Initially, when I was loading this project for the first time, I had other errors to deal with like first needing to create the aws-exports.js file. I copied this over from an old project (Because this is meant to be a re-do of another project that's already set up). Once I included that file I had to update a few lines in that file because of an improper reference to Linking from expo. Once I fixed that, it throw this error I'm referencing here. Now, even if I delete the aws-exports file it will throw this error as soon as Amplify is imported into the App.js file.
-- Update
I've found where the error is occurring. Some of my code gets executed but the error happens inside of the reactnative.js file when syncing between two memory software.
I've tried to reproduce this error inside a fresh react application by copying the package.js file and then importing Amplify into the App.js file but it doesn't throw this error.
Here is a screenshot of where the error is taking place. I'm still trying to figure out how to pinpoint where in my code this error begins.
According to Expo, you have to follow these steps
it would be best if you imported Amplify
import Amplify from '#aws-amplify/core'
All you need to follow those steps it sees the configuration issue result data is not coming that's why it gives a null value and crashes.
Follow steps below will fix your problem
https://blog.expo.dev/how-to-build-cloud-powered-mobile-apps-with-expo-aws-amplify-2fddc898f9a2
The problem seems to be resolved by changing the slug attribute in the react app.json file. I changed the slug from being a camel case to an all lower case slug.
After this the error has gone away for what seems permanent. I've been able to replicate the error in small sample apps. I don't understand why this causes these errors.
I referred this article https://dev.to/ronyfr3/web-push-notification-using-react-and-node-js-oc9 to integrate WebPush notifications to ReactJs application and after configuring all the things I am getting an error when adding the following lines to custom-sw.js
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);
self.__WB_MANIFEST is a symbol that's meant to be replaced by one of the InjectManifest build tools.
If you want something that works for testing purposes without having to run a build tool, you can use
precacheAndRoute(self.__WB_MANIFEST || []);
to pass in an empty precache manifest array when self.__WB_MANIFEST is undefined.
I added Engagespot SDK code to my index.html page. But, I get this error on the login page.
Uncaught (in promise) TypeError: Cannot read property 'classList' of null
at t._showNotificationCenter (EngagespotSDK.2.0.js:1)
at EngagespotSDK.2.0.js:1
Installing Engagespot on a SPA (Like React, Vue, etc) is a bit different as mentioned in this article - https://docs.engagespot.co/how-to-install-engagespot/how-to-set-up-engagespot-in-single-page-applications
The above error occurs when the script is unable to find an HTML element (Placeholder element) that you've configured in your account.
Usually, this happens in apps that have a login screen. The element may not exist on the login page, but only on the page that comes after the login screen.
To solve this, you need to make that the Engagespot.init() function is executed only on the page that has your placeholder element. So, you can remove this function from the main Engagespot SDK code that you have in your index.html. And, place it the mount life cycle of your placeholder element.
I have tried asking on Super User community before, but didn't get any answers so I'm trying my luck here.
I'm running an Apache web server and decided to host a React application. I have a nano-react-app folder which contains the files shown below. I can render the website in debug mode so I know my code is working properly. But when I go online, I get this error :
Uncaught SyntaxError: Cannot use import statement outside a module (index.js:1)
which points to the line import React from 'react'; in index.js. To be honest, I don't really understand what the error is telling me so I don't know where and how to look. All I could figure out is that my Index.js file — with a capital i — is called from index.html with a lowercase i and it changes nothing locally but on server-side it returns this error when capitalizing i:
GET http://mywebsite/src/Index.js net::ERR_ABORTED 404 (Not Found)
Now.. I have read in another SO question that I should add type="module" when calling index.js in script tag but now I get this error :
Uncaught SyntaxError: Unexpected token '<' (index.js:5)
I would highly appreciate any solutions... Thanks!
Browsers don't support JSX natively. You need to transpile your code to JavaScript by creating a production build. How you do that depends on the toolchain you have selected and is covered in the React documentation.