Uncaught ReferenceError: Popper is not defined - reactjs

I just started working on a project that was developed by another developer (reactjs project) , however when I try to start the project I get this error in the browser console :
Uncaught ReferenceError: Popper is not defined
The error is pointing to a specific line of course which is in the file :
node_modules/bootstrap/dist/js/bootstrap.js
the error in the last line of the following :
var bootstrap = (function (exports,$,Popper) {
'use strict';
$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;
// a lot of generated code
}({},$,Popper));
As I said earlier the error shows up pointing to the last line with the error mentioned before
Note : I have searched all other possible answers here in stack overflow but with no luck , including this answer Bootstrap 4: Uncaught ReferenceError: Popper is not defined so please it is not a duplicate

The problem was not in the code , the problem was that I had an old version of nodejs and npm on my machine I thought this might help someone in the future.

Related

howtographql + React tutorial : Error: Cannot find module './generated/prisma.graphql'

I'm following the howtographql + React tutorial right now. I'm currently at the beginning of the tutorial when I have to define my queries, mutation and stuff in my schema.graphql. But according to the tutorial, I have to import prisma.graphql from the generatedfolder by writing the following line :
# import Link, Vote, LinkSubscriptionPayload, VoteSubscriptionPayload from "./generated/prisma.graphql"
I indeed generated the serverfolder which contains everything except this file that is supposed to be generated as well I guess.
Apparently, I should be able to run the server using yarn startbut when I'm doing so, I have this message :
Error: Cannot find module './generated/prisma.graphql'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
at resolveFileName (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:29:39)
at resolveFrom (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:43:9)
at module.exports (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:46:41)
at resolveModuleFilePath (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:150:24)
at /Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:187:30
at Array.forEach (<anonymous>)
at collectDefinitions (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:185:16)
at Object.importSchema (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:73:14)
at mergeTypeDefs (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-yoga/dist/index.js:412:37)
I don't understand what I'm doing wrong...
Do you guys have any idea ?

Drupal Wiris integration

I followed this tutorial to install the Wiris plugin on a new installation of Drupal.
Once the installation was complete and I clicked on the Wiris icon to begin adding a formula, the popup window does NOT load and I get the following error in the console area:
Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '/DrupalQuiz/sites/all/libraries/ckeditor/plugins/ckeditor_wiris/' in a call to 'postMessage'.
at http://*.*.*.*/DrupalQuiz/sites/all/libraries/ckeditor/plugins/ckeditor_wiris/core/core.js:19:22
The code causing the problem is as follows:
e.source.postMessage(postVariable, _wrs_conf_path);
I'm at a loss how to deal with this issue.
I don't have a complete fix but I was able to get it working locally by replacing _wrs_conf_path with the base path of my dev box. _wrs_conf_path was evaluating to a relative path to the plugins folder.
if (typeof(e.source) != 'undefined') {
e.source.postMessage(postVariable, _wrs_conf_path);
}
with
if (typeof(e.source) != 'undefined') {
e.source.postMessage(postVariable, _wrs_currentPath);
}
in the /sites/all/libraries/ckeditor/plugins/ckeditor_wiris/core/core.js file.
Edit: I replaced _wrs_conf_path with one of their internal variables _wrs_currentPath and that seemed to fix the issue.

error ReferenceError: System is not defined file:///E:/PetsDemoAj/index.html Line 17

I am new in angular JS2 and tried this sample project provided in the given link http://embed.plnkr.co/eBv3hZZSk9Tx3joykvSQ/ I have tried this example , and getting error ReferenceError: System is not defined file:///E:/PetsDemoAj/index.html Line 17,in console; PetsDemoAj is my project name. Thanks in adavance
Its about your systemjs.config.js file, you need to declare 'System', because compilator doesnt recognize this, add this line upon line where System is called:
declare var System: any;
this should fix the problem

Grunt uglify fail while with JS Parse error

I've created an Angular app which works fine on locally.
However when I try to build (grunt build) to generate the dist folder that will contain my app with everything minified and ready to deploy, I have a error at the Uglify step.
Error:
JS_Parse_Error {
message: 'Unexpected token operator «=», expected punc «,»',
filename: '../../.tmp/concat/scripts/scripts.js',
...
I've read that people had similar errors, just the operator was a different one in the error message.
If someone has a clue.
My issue came from the function's parameters with a default value.
For example:
function (a = myValue, b) {
...
For some reason, giving that default value was not supported.
I replaced it by doing something like:
function (a, b) {
a = typeof a !== 'undefined' ? a : myValue;
...
You will find explanations of that behaviour by googling (uglify, ES6), I'm just offering the solution of my specific error.

facebookConnectPlugin is not defined (ngCordova, Ionic app)

I'm trying to add native fb connect to my ionic app.
I'm using:
- Ionic
- ngCordova
- http://ngcordova.com/docs/plugins/facebook/
This is my code:
angular.module('starter.controllers', ['ngCordova'])
.config(function($cordovaFacebookProvider) {
var appID = 123456789;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
})
Which leads to this error >
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
ReferenceError: facebookConnectPlugin is not defined
at browserInit (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1576:7)
at http://localhost:8100/js/controllers.js:6:30
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at runInvokeQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11900:35)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11909:11
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11907:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
Tried a couple of things but without any positive result:
- When I build it and run it on my device the app displays a blank screen
Tried the normal cordova js code:
Changed $cordovaFacebookProvider to $cordovaFacebook (based on this thread:
forum.ionicframework.com/t/unknown-provider-cordovaprovider/13305/3
And this is a another related thread, but doesn't help me thought..
forum.ionicframework.com/t/does-ng-crodova-has-facebook-login/9163
I already have a prototype working with the fb auth in the in-app-browser. But I really want to have a native fb connect functionality.
i found a way to resolve this issue.
Thanks to this thread : https://github.com/driftyco/ng-cordova/issues/446
and this tutorial : https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/browser/README.md
1st step : Don't forget the <div id="fb-root"></div> after ur body.
2nd step : I added facebookConnectPlugin to my bower dependencies
See my bower.json :
"dependencies": {
"angular-google-maps": "~2.0.13",
"google-map": "~0.4.1",
"facebook-connect-plugin": "https://cdn.rawgit.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js"
}
See my app.config + code to init:
app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $animateProvider, $httpProvider, $cordovaFacebookProvider) {
var appID = 597135743751760;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
$cordovaFacebookProvider call facebookConnectPlugin()
3th step : After changing this dependencies, don't forget to call bower update from ur CLI.
4th step : Include the new facebookblablabla.js in your index.html.
it can be
<script src='bower_components/facebook-connect-plugin/index.js'></script>
for me it was
<script src='lib/facebook-connect-plugin/index.js'></script>
5th step : add in the Valid OAuth redirect URIs field at your Facebook App :
http://static.ak.facebook.com/connect/xd_arbiter/
Hope it works for you :) !
My answer is not providing a solution for your issue but an advice.
Why using facebook Cordova when you can use HelloJS?
faceBook Cordova is platform dependant, much slower as it runs cordova true node.js and not evolutive.
HelloJS permits to integer various Oauth2 authentication very easily including, facebook / google / twitter / instagram ...
Without to tell that the compilation for facebook cordova is very tricky with the facebook key app. On HelloJS, this is only a parameter that you can easily change.
I don't know if someone still stuck with this thing then please follow the method mentioned my #Alexy and then edit the 'lib/facebook-connect-plugin/index.js' file line from :
if(cordova.platformId === 'browser')
to
if(!window.cordova || (window.cordova && window.cordova.platformId === 'browser'))
Hope this Helps :)

Resources