Error in react build: native code is not a function - javascript

I am getting a very strange error in my react build that just breaks everything and all I see is a blank page.
This is the error:
Uncaught TypeError: function call() { [native code] } is not a function!
at 128.4c993361.chunk.js:1
at B (128.4c993361.chunk.js:1)
at e (128.4c993361.chunk.js:1)
at 128.4c993361.chunk.js:1
at Object.<anonymous> (128.4c993361.chunk.js:1)
at Object.<anonymous> (128.4c993361.chunk.js:1)
at l ((index):1)
at Module.701 (main.af07ead1.chunk.js:1)
at l ((index):1)
at Module.827 (main.af07ead1.chunk.js:1)
(anonymous) # 128.4c993361.chunk.js:1
B # 128.4c993361.chunk.js:1
e # 128.4c993361.chunk.js:1
(anonymous) # 128.4c993361.chunk.js:1
(anonymous) # 128.4c993361.chunk.js:1
(anonymous) # 128.4c993361.chunk.js:1
l # (index):1
701 # main.af07ead1.chunk.js:1
l # (index):1
827 # main.af07ead1.chunk.js:1
l # (index):1
826 # main.af07ead1.chunk.js:1
l # (index):1
b # (index):1
e # (index):1
(anonymous) # main.af07ead1.chunk.js:1
Usually, if it's an error in my code react just displays a message with a link with the error details but in this case, it seems that it's an error from the build.
I tried to re-build the project and after that I removed the node_modules folder and ran npm install again but I keep getting that error.
I can't see this error when I run the project locally and it works perfectly fine when I use npm start.
I've build the project on my machine, locally and I'm getting the same error with my local build.
Is there any way to debug it so I can see what exactly is causing this error?

Related

firebase-app.js not loading shows net::ERR_CONTENT_DECODING_FAILED 200 (OK)

I am trying to make a website with a booking form which stores the data in firestore. But I am getting error on loading firebase. The error is given below.
GET http://localhost:5000/__/firebase/8.2.1/firebase-app.js
net::ERR_CONTENT_DECODING_FAILED 200 (OK)
There are several more errors like:
index.ts:79 TypeError: Cannot read property 'INTERNAL' of undefined
at index.ts:41
at index.ts:79
at firebase-analytics.js:1
at firebase-analytics.js:1 (anonymous) # index.ts:79 (anonymous) # firebase-analytics.js:1 (anonymous) # firebase-analytics.js:1
index.ts:79 Uncaught Error: Cannot instantiate firebase-analytics.js -
be sure to load firebase-app.js first.
at index.ts:79
at firebase-analytics.js:1
at firebase-analytics.js:1 (anonymous) # index.ts:79 (anonymous) # firebase-analytics.js:1 (anonymous) # firebase-analytics.js:1
init.js:1 Uncaught Error: hosting/init-error: Firebase SDK not
detected. You must include it before /__/firebase/init.js
at init.js:1 (anonymous) # init.js:1 index.ts:38 TypeError: Cannot read property 'SDK_VERSION' of undefined
at version.ts:21
at index.ts:38
at firebase-firestore.js:1
at firebase-firestore.js:1 (anonymous) # index.ts:38 (anonymous) # firebase-firestore.js:1 (anonymous) # firebase-firestore.js:1
index.ts:38 Uncaught Error: Cannot instantiate firebase-firestore.js -
be sure to load firebase-app.js first.
at index.ts:38
at firebase-firestore.js:1
at firebase-firestore.js:1
I am initializing firebase with these lines:
<script src="/__/firebase/8.2.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/8.2.1/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<script src="/__/firebase/7.14.5/firebase-firestore.js"></script>
What is the reason of it and how can I solve it?
Thanks for any kind of help in advance.
First, you just need to use the same version across all libraries. Mixing v7.14.5 with v8.2.1 is going to cause problems.
Second, this is a known firebase-tools issue and they are saying that updating to 8.2.3 resolves it. So my recommendation is to do the following:
Open a cmd or console window and update firebase-tools to the latest version:
firebase i -g firebase-tools
Update the version number of all of your scripts to 8.2.3.

Axios not working on DigitalOcean server after npm update?

I updated npm on my DigitalOcean droplet, now the axios post call in my authentication (log in) function isn't working. I added a console.log and know that the function is triggered, but the axios post request is not working on the live site. The axios post request still works on my localhost.
I'm getting this error code on the live site:
POST https://www.myexamplesite.com/auth/login 504 (Gateway Time-out) - xhr.js:175
(anonymous) # 2.d105a7aa.chunk.js:1
e.exports # 2.d105a7aa.chunk.js:1
e.exports # 2.d105a7aa.chunk.js:1
Promise.then (async)
u.request # 2.d105a7aa.chunk.js:1
r.forEach.u.<computed> # 2.d105a7aa.chunk.js:1
(anonymous) # 2.d105a7aa.chunk.js:1
onClick # main.84d90956.chunk.js:1
l # 2.d105a7aa.chunk.js:1
d # 2.d105a7aa.chunk.js:1
(anonymous) # 2.d105a7aa.chunk.js:1
m # 2.d105a7aa.chunk.js:1
at # 2.d105a7aa.chunk.js:1
ot # 2.d105a7aa.chunk.js:1
lt # 2.d105a7aa.chunk.js:1
dt # 2.d105a7aa.chunk.js:1
D # 2.d105a7aa.chunk.js:1
F # 2.d105a7aa.chunk.js:1
Xt # 2.d105a7aa.chunk.js:1
Zt # 2.d105a7aa.chunk.js:1
t.unstable_runWithPriority # 2.d105a7aa.chunk.js:1
Ho # 2.d105a7aa.chunk.js:1
M # 2.d105a7aa.chunk.js:1
Gt # 2.d105a7aa.chunk.js:1
Again, the axios post request works fine on the localhost. But the live site sends this error since updating npm (I think it was npm that I updated; there's a chance it was something else). Also, every once and a while I think I've gotten an error about something wrong with a Promise. But that error hasn't appeared for a while.
Any thoughts on how to fix this?
The issue with the new update was that it would no longer allow self certification. I had to add this to the server:
process.env.NODE_TLS_REJECT_UNAUTHORIZED='0';
That is a temporary fix until I'm able to get the website certification working properly. I still think there may be an issue with the new npm update because I didn't self-certify my site, I used an official certification system. Don't know why this error happened. Still trying to figure out how to make the app work again without the process.env.NODE_TLS_REJECT_UNAUTHORIZED='0'; in the server.

Using Apache as a proxy for backend JavaScript (Strapi) server

I am trying to get a Strapi.io installation set up so that it works on an existing Apache site running on Port 80.
Details:
The Strapi server is running on Port 1337.
The Strapi server has both a front page at / and an admin panel /admin
My Apache site is running at http://example.com on port 80
I have edited my apache configuration file and added the following lines:
ProxyPass /admin http://localhost:1337/admin
ProxyPassReverse /admin http://localhost:1337/admin
ProxyPass /api http://localhost:1337/
ProxyPassReverse /api http://localhost:1337/
Currently that works fine for the /api page, but not the admin page. On the Admin page I get the following console errors:
main.js:40 Uncaught (in promise) SyntaxError: Unexpected token < in
JSON at position 0
at r (main.js:40) r # main.js:40 Promise.then (async) u # main.js:1 ./node_modules/strapi-helper-plugin/lib/src/app.js #
main.js:40 t # main.js:1 (anonymous) # main.js:1 (anonymous) #
main.js:1
main.js:45 Uncaught (in promise) SyntaxError: Unexpected
token < in JSON at position 0
at t (main.js:45) t # main.js:45 Promise.then (async) u # main.js:1 ./node_modules/strapi-helper-plugin/lib/src/app.js #
main.js:45 a # main.js:1 (anonymous) # main.js:1 (anonymous) #
main.js:1 main.js:40 Uncaught (in promise) SyntaxError: Unexpected
token < in JSON at position 0
at n (main.js:40)
If I refresh the page, some or all of the main.js show as admin.js. Not sure if it makes a difference:
main.js:40 Uncaught (in promise) SyntaxError: Unexpected token < in
JSON at position 0
at r (main.js:40) r # main.js:40 Promise.then (async) u # main.js:1 ./node_modules/strapi-helper-plugin/lib/src/app.js #
main.js:40 t # main.js:1 (anonymous) # main.js:1 (anonymous) #
main.js:1
admin:1 Uncaught (in promise) SyntaxError: Unexpected token
< in JSON at position 0 Promise.then (async) u # main.js:1
./node_modules/strapi-helper-plugin/lib/src/app.js # main.js:40 t #
main.js:1 (anonymous) # main.js:1 (anonymous) # main.js:1
admin:1
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at
position 0
Why am I experiencing this problem. What do I have to do to get this working correctly with my Apache server?
To clarify:
This was a very simple two minute install. I have not started to add any content to the site yet. I'm just trying to get the admin panel to work through Apache.
Apache serves by default index.html in response to any request it gets.
Therefore, my first thoughts would be adding
DirectoryIndex disabled
to .htaccess, since strapi.io API runs at / root folder and apache returns the default Apache .html file instead, which is overriding the API request.
What is happening there exactly?
1.- Your JavaScript App (strapi.io) asks for data.json at your API point and it gets the contents of an index.html.
2.- Since the contents of index.html are not JSON, and start with a <, it throws the error message. A JSON file cannot start with <.
You're probably running into issues because Strapi doesn't currently implement URL prefixes.
To get around this, you will probably want to use a subdomain or run Strapi on port 80 from the root directory with "/" instead of "/api". If you have other projects or apps on the same Apache server, you can use ProxyPassMatch to ignore those paths. For example:
ProxyPassMatch ^/otherproject !
ProxyPass "/" http://localhost:1337/
ProxyPassReverse "/" http://localhost:1337/
In this case the "/admin" route will also work without further modifications.
Alternatively, some people use Strapi middleware to apply prefixes to their routes (see example here).

Uncaught ReferenceError: process is not defined react-bootstrap

I am trying to include react-bootstrap js files into my project for a couple of hours. I am new to react and I will only use it for client side. I tried to include from CDN, could not get it worked (React-Bootsrap Uncaught ReferenceError: require is not defined)
This time I have downloaded packages via npm and then copy whole node_modules folder in my spring boot project.I tried to include files as below, and did not wrote any other code, just included.
<script src="${pageContext.request.contextPath}/node_modules/react/cjs/react.development.js"></script>
<script src="${pageContext.request.contextPath}/node_modules/react-dom/cjs/react-dom.development.js"></script>
<script src="${pageContext.request.contextPath}/node_modules/react-bootstrap/dist/react-bootstrap.js"></script>
However I am getting error below :
react.development.js:14 Uncaught ReferenceError: process is not defined
at react.development.js:14
(anonymous) # react.development.js:14
react-dom.development.js:14 Uncaught ReferenceError: process is not defined
at react-dom.development.js:14
(anonymous) # react-dom.development.js:14
react-bootstrap.js:2218 Uncaught TypeError: Cannot read property 'Component' of undefined
at Object.exports.__esModule (react-bootstrap.js:2218)
at __webpack_require__ (react-bootstrap.js:30)
at Object.exports.__esModule (react-bootstrap.js:450)
at __webpack_require__ (react-bootstrap.js:30)
at Object.exports.__esModule (react-bootstrap.js:62)
at __webpack_require__ (react-bootstrap.js:30)
at exports.__esModule (react-bootstrap.js:50)
at react-bootstrap.js:53
at webpackUniversalModuleDefinition (react-bootstrap.js:9)
at react-bootstrap.js:10
exports.__esModule # react-bootstrap.js:2218
__webpack_require__ # react-bootstrap.js:30
exports.__esModule # react-bootstrap.js:450
__webpack_require__ # react-bootstrap.js:30
exports.__esModule # react-bootstrap.js:62
__webpack_require__ # react-bootstrap.js:30
exports.__esModule # react-bootstrap.js:50
(anonymous) # react-bootstrap.js:53
webpackUniversalModuleDefinition # react-bootstrap.js:9
(anonymous) # react-bootstrap.js:10
1:85 Uncaught ReferenceError: ReactBootstrap is not defined
at 1:85

What should I do with these Javascript-console errors (Wordpress)?

reset.css Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-migrate.js:23 JQMIGRATE: Migrate is installed with logging active, version 1.4.1
jquery-migrate.js:45 JQMIGRATE: jQuery.fn.load() is deprecated
migrateWarn # jquery-migrate.js:45
jquery-migrate.js:47 console.trace
migrateWarn # jquery-migrate.js:47
reset.css Failed to load resource: the server responded with a status of 404 (Not Found)
More info:
Some of my plugins' Javascript is not working but only on the home page. I've tried disabling all non-related plugins but this doesn't solve the problem.
jquery-migrate.js appears to be located in wp-includes/js/jquery/. I'm assuming this is the correct file location.
In the very beginning I including a file called reset.css but long ago deleted the file plus any reference to it (for example, in functions.php) so I'm not sure what the issue is there. It is correct that the file is not available but it also shouldn't be looking for it.
Can any tell me step by step what I need to do/change? If any other info necessary please ask! Many thanks.
EDIT: after deactivating debugging in wp-config the console changed to this:
GET http://match.onesquad.nl/wp-content/themes/match-theme/reset.css
jquery-migrate.js?ver=1.4.1:23 JQMIGRATE: Migrate is installed with logging active, version 1.4.1
jquery-migrate.js?ver=1.4.1:45 JQMIGRATE: jQuery.fn.load() is deprecated
migrateWarn # jquery-migrate.js?ver=1.4.1:45
jQuery.fn.(anonymous function) # jquery-migrate.js?ver=1.4.1:560
(anonymous) # (index):368
i # jquery.js?ver=1.12.4:2
fireWith # jquery.js?ver=1.12.4:2
ready # jquery.js?ver=1.12.4:2
K # jquery.js?ver=1.12.4:2
jquery-migrate.js?ver=1.4.1:47 console.trace
migrateWarn # jquery-migrate.js?ver=1.4.1:47
jQuery.fn.(anonymous function) # jquery-migrate.js?ver=1.4.1:560
(anonymous) # (index):368
i # jquery.js?ver=1.12.4:2
fireWith # jquery.js?ver=1.12.4:2
ready # jquery.js?ver=1.12.4:2
K # jquery.js?ver=1.12.4:2

Categories