Why gulp-uglify breaks backendless? - javascript

I actually have no idea, which part of code should i show you.
I have a webApp (reactJs, flux, react-router, nodejs+express server);
It works fine, right untill i uglify main.js file.
Here the "search" through backendless database (http://backendless.com/documentation/data/js/data_search_and_query.htm)
var dataQuery = {
condition: conditions,
options: {
pageSize: 18,
relationsDepth: 1
}
}
If I don't use gulp uglify in my Build, it works fine.
If I do use uglify, I'm getting this error:
GET https://api.backendless.com/v1/data/t?pageSize=18&relationsDepth=1 404 (Not Found)
Why does it happen?
full version:
GET https://api.backendless.com/v1/data/t?pageSize=18&relationsDepth=1 404 (Not Found)
e._ajax_for_browser.o # main.js:15
e._ajax_for_browser.a.ignoreCache # main.js:15
e._ajax_for_browser # main.js:15
C.find # main.js:15
r # main.js:15
(anonymous function) # main.js:15
r.$Dispatcher_invokeCallback # main.js:1
r.dispatch # main.js:1
a.handleViewAction # main.js:15
o.search # main.js:12
r.createClass._getInitItems # main.js:13
r.createClass._getAllEstateItems # main.js:13
l.addons.update.$merge.searchByParams # main.js:15
r.createClass.componentDidMount # main.js:13
o.notifyAll # main.js:3
m.close # main.js:9
a.closeAll # main.js:12
a.perform # main.js:12
h # main.js:9
a.perform # main.js:12
d.batchedUpdates # main.js:8
o # main.js:11
$._renderNewRootComponent # main.js:9
r.measure.i # main.js:9
$.render # main.js:9
r.measure.i # main.js:9
(anonymous function) # main.js:15
u.createClass.statics.run.L # main.js:2
(anonymous function) # main.js:2
(anonymous function) # main.js:2
(anonymous function) # main.js:2
r.to # main.js:2
(anonymous function) # main.js:2
r.from # main.js:2
u.createClass.statics.dispatch # main.js:2
u.createClass.statics.refresh # main.js:2
u.createClass.statics.run # main.js:2
r # main.js:3
250.../jsLibs/1. backendless.min # main.js:15
a # main.js:1
e # main.js:1
(anonymous function) # main.js:1
UPD#1
Gulpfile.js:
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');
gulp.task('browserify', function() {
gulp.src('src/js/main.js')
.pipe(browserify({transform: 'reactify'}))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('uglifyjs', function() {
gulp.src('dist/js/main.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
gulp.task('copy', function() {
gulp.src('src/index.html')
.pipe(gulp.dest('dist'));
gulp.src('src/assets/**/*.*')
.pipe(gulp.dest('dist/assets'));
});
gulp.task('default',['browserify', 'copy']);
gulp.task('watch', function() {
gulp.watch('src/**/*.*', ['default']);
});
gulp.task('js', function () {
gulp.src('src/jsLibs/*.js')
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
gulp.task('css', function () {
gulp.src('src/css/*.css')
.pipe(concat('styles.css'))
.pipe(uglifycss())
.pipe(gulp.dest('dist/css'))
})


As it was answered on our support forum:
Our JS SDK forms the url from the name of your constructor-function,
thus if you rename it - the request will query another table, and for
now there is no way to change this logic from your code.
So you're looking in the right direction: the most suitable solution
in this case will be to exclude these constructor-functions names from
uglify's obfuscation list.
Regards,
Mark


Can you give me please code from .js file where from you make query to find data object. I think you do searching in another class.


GET https://api.backendless.com/v1/data/t?pageSize=18&relationsDepth=1 404 (Not Found)
This request goes to table named t. I'm pretty sure your table name is not t.

Related

Removing firestore from Vue project but retaining firebase auth

I'm switching from Firestore to MongoDB, and I'm now trying to remove references to it in my App.vue file. I'm still using Firebase auth.
Where it says this in the console error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
My beforeMount() never had App.initializeApp(), and I'm trying to figure out where that needs to go, but nothing is working. I'm really puzzled as to why this one component is not behaving as expected after removing references to Firestore, as all my other components worked fine. Any advice is greatly appreciated.
Full console error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."
found in
---> <Index> at src/components/Index.vue
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1893
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1871
callHook # vue.runtime.esm.js?2b0e:4235
mountComponent # vue.runtime.esm.js?2b0e:4058
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
merged # vue.runtime.esm.js?2b0e:3322
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3963
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
run # vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4326
eval # vue.runtime.esm.js?2b0e:1989
flushCallbacks # vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1942
nextTick # vue.runtime.esm.js?2b0e:1999
queueWatcher # vue.runtime.esm.js?2b0e:4418
update # vue.runtime.esm.js?2b0e:4560
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
eval # vue-router.esm.js?8c4f:2989
eval # vue-router.esm.js?8c4f:2988
updateRoute # vue-router.esm.js?8c4f:2409
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:2397
step # vue-router.esm.js?8c4f:2001
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
eval # vue-router.esm.js?8c4f:2392
step # vue-router.esm.js?8c4f:2001
eval # vue-router.esm.js?8c4f:2005
eval # vue-router.esm.js?8c4f:2379
eval # vue-router.esm.js?8c4f:2127
eval # vue-router.esm.js?8c4f:2203
Promise.then (async)
eval # vue-router.esm.js?8c4f:2150
eval # vue-router.esm.js?8c4f:2171
eval # vue-router.esm.js?8c4f:2171
flatMapComponents # vue-router.esm.js?8c4f:2170
eval # vue-router.esm.js?8c4f:2106
iterator # vue-router.esm.js?8c4f:2357
step # vue-router.esm.js?8c4f:2004
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
confirmTransition # vue-router.esm.js?8c4f:2387
transitionTo # vue-router.esm.js?8c4f:2260
init # vue-router.esm.js?8c4f:2980
beforeCreate # vue-router.esm.js?8c4f:1298
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1863
callHook # vue.runtime.esm.js?2b0e:4235
Vue._init # vue.runtime.esm.js?2b0e:5018
Vue # vue.runtime.esm.js?2b0e:5099
eval # main.js?56d7:30
./src/main.js # app.js:1225
__webpack_require__ # app.js:854
fn # app.js:151
1 # app.js:1262
__webpack_require__ # app.js:854
checkDeferredModules # app.js:46
(anonymous) # app.js:994
(anonymous) # app.js:997
vue.runtime.esm.js?2b0e:1897 FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at app (index.esm.js?cc84:356:1)
at Object.serviceNamespace [as auth] (index.esm.js?cc84:406:1)
at VueComponent.beforeMount (Index.vue?b484:544:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at callHook (vue.runtime.esm.js?2b0e:4235:1)
at mountComponent (vue.runtime.esm.js?2b0e:4058:1)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459:1)
at init (vue.runtime.esm.js?2b0e:3137:1)
at merged (vue.runtime.esm.js?2b0e:3322:1)
at createComponent (vue.runtime.esm.js?2b0e:6022:1)
logError # vue.runtime.esm.js?2b0e:1897
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1871
callHook # vue.runtime.esm.js?2b0e:4235
mountComponent # vue.runtime.esm.js?2b0e:4058
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
merged # vue.runtime.esm.js?2b0e:3322
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3963
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
run # vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4326
eval # vue.runtime.esm.js?2b0e:1989
flushCallbacks # vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1942
nextTick # vue.runtime.esm.js?2b0e:1999
queueWatcher # vue.runtime.esm.js?2b0e:4418
update # vue.runtime.esm.js?2b0e:4560
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
eval # vue-router.esm.js?8c4f:2989
eval # vue-router.esm.js?8c4f:2988
updateRoute # vue-router.esm.js?8c4f:2409
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:2397
step # vue-router.esm.js?8c4f:2001
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
eval # vue-router.esm.js?8c4f:2392
step # vue-router.esm.js?8c4f:2001
eval # vue-router.esm.js?8c4f:2005
eval # vue-router.esm.js?8c4f:2379
eval # vue-router.esm.js?8c4f:2127
eval # vue-router.esm.js?8c4f:2203
Promise.then (async)
eval # vue-router.esm.js?8c4f:2150
eval # vue-router.esm.js?8c4f:2171
eval # vue-router.esm.js?8c4f:2171
flatMapComponents # vue-router.esm.js?8c4f:2170
eval # vue-router.esm.js?8c4f:2106
iterator # vue-router.esm.js?8c4f:2357
step # vue-router.esm.js?8c4f:2004
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
confirmTransition # vue-router.esm.js?8c4f:2387
transitionTo # vue-router.esm.js?8c4f:2260
init # vue-router.esm.js?8c4f:2980
beforeCreate # vue-router.esm.js?8c4f:1298
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1863
callHook # vue.runtime.esm.js?2b0e:4235
Vue._init # vue.runtime.esm.js?2b0e:5018
Vue # vue.runtime.esm.js?2b0e:5099
eval # main.js?56d7:30
./src/main.js # app.js:1225
__webpack_require__ # app.js:854
fn # app.js:151
1 # app.js:1262
__webpack_require__ # app.js:854
checkDeferredModules # app.js:46
(anonymous) # app.js:994
(anonymous) # app.js:997
firebase/db.js;
import firebase from 'firebase';
import 'firebase/firestore';
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
//[removed for privacy]
};
// Initialize Firebase
export const db = firebase.initializeApp(firebaseConfig).firestore();
firebase.analytics();

I seem to have fixed it by changing my config file to:
import firebase from "firebase/app";
import "firebase/auth";
const firebaseConfig = {
//[hidden]
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
export const auth = firebase.auth();
Then in my App.vue component, I can:
import {auth} from './firebase/db';
And change firebase.auth() ... to just auth. ..., like this:
await auth.signInWithPopup(provider).then(() => {
auth.onAuthStateChanged((user) => {
However in my other components, I can retain the original import firebase from 'firebase'; and firebase.auth() ... and it works without errors. I don't know why this is. Does anyone know why?

How to import client-side HTML into Gatsby/React?

I’m a react noob and self-taught, so I’m sure I am doing something stupid. I’m trying to make a small bit of client-side rendered html into a component within my Gatsby site. Been battling this for 4 days. I'm desperate to get this Vue component into my Gatsby site.
Here's the code for my component:
import React, { Component } from "react"
import { Helmet } from "react-helmet"
import DemoHTML from '../../static/demo.html');
class Model extends Component {
componentDidMount() {
// set up and use external package as needed
const Mount = React.createClass({
render: function(){
return (
<section contentEditable='false' dangerouslySetInnerHTML={{ __html: DemoHTML }} />
);
}
});
}
render(props, Mount) {
return (
<React.Fragment>
<Helmet>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://unpkg.com/zircle"></script></Helmet>
<Mount></Mount>
</React.Fragment>
)
}
}
export default Model;
Then, here is the HTML that is imported:
<div id="app">
<z-canvas :views='$options.components'>
</z-canvas>
</div>
<script>
const one = [
template: `
<z-view style="border-color: #8F6AFA; font-family: 'Montserrat', sans-serif; font-weight: bold; color: #ffffff; border-width: 1px; background-image: linear-gradient(90deg, #292929 2.11%, #000000 104.85%)" />
` ]
<!--- truncated tested working content for readability -->
new Vue({
el: 'app',
components: {
one
},
mounted () {
this.$zircle.setView('one')
}
})
</script>
Lastly, here's my errors in console and on page...
On page error:
Unhandled Runtime Error
Close
One unhandled runtime error found in your files. See the list below to fix it:
Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Model`.
./node_modules/react-dom/cjs/react-dom.development.js:25058
Open in Editor
25056 | {
25057 | {
> 25058 | throw Error( "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " + (type == null ? type : typeof type) + "." + info );
25059 | }
25060 | }
It's helpful to note that the HTML page does render perfectly on its own.
Thank you!
Updated console
DevTools failed to load source map: Could not load content for chrome-extension://fddhonoimfhgiopglkiokmofecgdiedb/MeetingScheduleResource.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
vue:9108 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
vue:634 [Vue warn]: Cannot find element: #app
warn # vue:634
query # vue:5710
Vue.$mount # vue:11931
Vue._init # vue:5026
Vue # vue:5092
(anonymous) # test.js:4
client.js:95 [HMR] connected
client.js:195 [HMR] bundle has 1 warnings
client.js:196 Critical dependency: the request of a dependency is an expression
react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at model.js:27.
at Model (webpack-internal:///./src/pages/model.js:21:23)
at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:41:30)
at RouteHandler
at div
at FocusHandlerImpl (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:359:5)
at FocusHandler (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:330:19)
at RouterImpl (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:235:5)
at Location (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:64:23)
at Router
at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
at RouteUpdates (webpack-internal:///./.cache/navigation.js:285:32)
at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
at LocationHandler (webpack-internal:///./.cache/root.js:69:29)
at LocationProvider (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:84:5)
at Location (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:64:23)
at Root
at pe (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-8ac214e0.js:889:13)
at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:131:32)
at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
at RootWrappedWithOverlayAndProvider
at App (webpack-internal:///./.cache/app.js:205:68)
printWarning # react.development.js:220
error # react.development.js:196
createElementWithValidation # react.development.js:2215
render # model.js:26
finishClassComponent # react-dom.development.js:17485
updateClassComponent # react-dom.development.js:17435
beginWork # react-dom.development.js:19073
beginWork$1 # react-dom.development.js:23940
performUnitOfWork # react-dom.development.js:22776
workLoopSync # react-dom.development.js:22707
renderRootSync # react-dom.development.js:22670
performSyncWorkOnRoot # react-dom.development.js:22293
scheduleUpdateOnFiber # react-dom.development.js:21881
updateContainer # react-dom.development.js:25482
eval # react-dom.development.js:26021
unbatchedUpdates # react-dom.development.js:22431
legacyRenderSubtreeIntoContainer # react-dom.development.js:26020
render # react-dom.development.js:26103
runRender # app.js:230
eval # app.js:242
setTimeout (async)
eval # app.js:241
Promise.then (async)
eval # app.js:171
Promise.then (async)
eval # app.js:51
./.cache/app.js # commons.js:1663
options.factory # commons.js:4121
__webpack_require__ # commons.js:3478
(anonymous) # commons.js:4831
__webpack_require__.O # commons.js:3527
(anonymous) # commons.js:4832
(anonymous) # commons.js:4834
react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at model.js:27.
at Model (webpack-internal:///./src/pages/model.js:21:23)
at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:41:30)
at RouteHandler
at div
at FocusHandlerImpl (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:359:5)
at FocusHandler (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:330:19)
at RouterImpl (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:235:5)
at Location (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:64:23)
at Router
at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
at RouteUpdates (webpack-internal:///./.cache/navigation.js:285:32)
at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
at LocationHandler (webpack-internal:///./.cache/root.js:69:29)
at LocationProvider (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:84:5)
at Location (webpack-internal:///./node_modules/#gatsbyjs/reach-router/es/index.js:64:23)
at Root
at pe (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-8ac214e0.js:889:13)
at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:131:32)
at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
at RootWrappedWithOverlayAndProvider
at App (webpack-internal:///./.cache/app.js:205:68)
printWarning # react.development.js:220
error # react.development.js:196
createElementWithValidation # react.development.js:2215
render # model.js:26
finishClassComponent # react-dom.development.js:17485
updateClassComponent # react-dom.development.js:17435
beginWork # react-dom.development.js:19073
callCallback # react-dom.development.js:3945
invokeGuardedCallbackDev # react-dom.development.js:3994
invokeGuardedCallback # react-dom.development.js:4056
beginWork$1 # react-dom.development.js:23964
performUnitOfWork # react-dom.development.js:22776
workLoopSync # react-dom.development.js:22707
renderRootSync # react-dom.development.js:22670
performSyncWorkOnRoot # react-dom.development.js:22293
scheduleUpdateOnFiber # react-dom.development.js:21881
updateContainer # react-dom.development.js:25482
eval # react-dom.development.js:26021
unbatchedUpdates # react-dom.development.js:22431
legacyRenderSubtreeIntoContainer # react-dom.development.js:26020
render # react-dom.development.js:26103
runRender # app.js:230
eval # app.js:242
setTimeout (async)
eval # app.js:241
Promise.then (async)
eval # app.js:171
Promise.then (async)
eval # app.js:51
./.cache/app.js # commons.js:1663
options.factory # commons.js:4121
__webpack_require__ # commons.js:3478
(anonymous) # commons.js:4831
__webpack_require__.O # commons.js:3527
(anonymous) # commons.js:4832
(anonymous) # commons.js:4834
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Model`.
at createFiberFromTypeAndProps (react-dom.development.js:25058)
at createFiberFromElement (react-dom.development.js:25086)
at createChild (react-dom.development.js:13446)
at reconcileChildrenArray (react-dom.development.js:13719)
at reconcileChildFibers (react-dom.development.js:14125)
at reconcileChildren (react-dom.development.js:16990)
at finishClassComponent (react-dom.development.js:17511)
at updateClassComponent (react-dom.development.js:17435)
at beginWork (react-dom.development.js:19073)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
createFiberFromTypeAndProps # react-dom.development.js:25058
createFiberFromElement # react-dom.development.js:25086
createChild # react-dom.development.js:13446
reconcileChildrenArray # react-dom.development.js:13719
reconcileChildFibers # react-dom.development.js:14125
reconcileChildren # react-dom.development.js:16990
finishClassComponent # react-dom.development.js:17511
updateClassComponent # react-dom.development.js:17435
beginWork # react-dom.development.js:19073
callCallback # react-dom.development.js:3945
invokeGuardedCallbackDev # react-dom.development.js:3994
invokeGuardedCallback # react-dom.development.js:4056
beginWork$1 # react-dom.development.js:23964
performUnitOfWork # react-dom.development.js:22776
workLoopSync # react-dom.development.js:22707
renderRootSync # react-dom.development.js:22670
performSyncWorkOnRoot # react-dom.development.js:22293
scheduleUpdateOnFiber # react-dom.development.js:21881
updateContainer # react-dom.development.js:25482
eval # react-dom.development.js:26021
unbatchedUpdates # react-dom.development.js:22431
legacyRenderSubtreeIntoContainer # react-dom.development.js:26020
render # react-dom.development.js:26103
runRender # app.js:230
eval # app.js:242
setTimeout (async)
eval # app.js:241
Promise.then (async)
eval # app.js:171
Promise.then (async)
eval # app.js:51
./.cache/app.js # commons.js:1663
options.factory # commons.js:4121
__webpack_require__ # commons.js:3478
(anonymous) # commons.js:4831
__webpack_require__.O # commons.js:3527
(anonymous) # commons.js:4832
(anonymous) # commons.js:4834
UPDATE
I have made the suggested update to ESM (and also updated in the question. One thing I wanted to share with you all, in case it warrants consideration. The reason this script must be rendered on client side is it is a vue library. (See Zircle.github.io)
If everything is loaded client side, I don't see why this would be an issue. But, just an FYI.

First step to getting this to work is to add support for HTML modules. Gatsby doesn't recognize them out-of-the-box.
Install html-loader using:
$ npm i -D html-loader
In gatsby-node.js
exports.onCreateWebpackConfig = ({
actions,
}) => {
actions.setWebpackConfig({
module: {
rules: [
{
test: /\.html$/,
loader: require.resolve('html-loader'),
options: {
minimize: false,
},
},
],
},
})
}
Also make sure you don't fix ESM imports and commonjs require(). Stick to static ESM imports/exports. So as already suggested remove the require() call and use imports for getting the HTML contents of ../../static/demo.html.
import DemoHtml from '../../static/demo.html';
Can't foresee what other problems you might get into but try the above and report back.

Got zircle integrated into React/Gatsby.
The useScript hook is necessary wait till the vue and then zircle library is fully loaded.
Install package dangerously-set-html-content - as you need Javascript inside HTML to be executed.
I used useScript code from https://usehooks.com/useScript/
import React, { Component } from "react";
import DemoHTML from "../../static/zircle.html";
import InnerHTML from "dangerously-set-html-content";
import "zircle/dist/zircle.css";
import useScript from "../hooks/useScript";
export default function LoadVue() {
const status = useScript("https://unpkg.com/vue");
return <>{status === "ready" && <Zircle />}</>;
}
function Zircle() {
const status = useScript("https://unpkg.com/zircle");
return <>{status === "ready" && <InnerHTML html={DemoHTML} />}</>;
}
and the zircle.html is
<div> Hello Zircle</div>
<div id="app2">
<z-canvas :views="$options.components"></z-canvas>
</div>
<script>
const home = {
template: `<z-view>Hello World!</z-view>`
}
new Vue({
el: '#app2',
components: {
home
},
mounted () {
this.$zircle.setView('home')
}
})
</script>

system.js:4 Uncaught (in promise) error while writing ES6 code in plunker

I'm getting my feet wet with ES6. i'm using plunker. I've got traceur and systemjs loaded. But i'm getting the foll errors:
GET https://traceur-compiler.googlecode.com/git/bin/traceur.js 404 ()
VM490 system.js:4 GET https://run.plnkr.co/nouZKWksqlQWsCPz/traceur 404 ()G # VM490 system.js:4(anonymous function) # VM490 system.js:4(anonymous function) # VM490 system.js:4(anonymous function) # VM490 system.js:5(anonymous function) # VM490 system.js:5(anonymous function) # VM490 system.js:5(anonymous function) # VM490 system.js:5(anonymous function) # VM490 system.js:5(anonymous function) # VM490 system.js:5(anonymous function) # VM490 system.js:4
system.js:4 Uncaught (in promise) Error: (SystemJS) XHR error (404) loading https://run.plnkr.co/nouZKWksqlQWsCPz/traceur(…)
The following is the plunker:
https://plnkr.co/edit/IOn58GkbGmaZrluLiB3B?p=preview
Can you please help me identify what i could be missing here.
Thanks

I faced the same issue but I resolved it by adding traceur-runtime and traceur-compiler to plunk.
Here is the working Plunk:
[http://plnkr.co/edit/P0QV925JtInZYIqRXiW3][1]

Loading highcharts with bower and Yeoman gives reference error

I have a highcharts graph that works fine as a stand alone HTML document.
When I try to integrate it into my web application infrastructure generated by Yeoman I get an error:
ReferenceError: Highcharts is not defined
at HTMLDocument.eval (eval at <anonymous> (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:3:5)
at fire (http://localhost:9000/bower_components/jquery/dist/jquery.js:3187:31)
at Object.self.add [as done] (http://localhost:9000/bower_components/jquery/dist/jquery.js:3246:7)
at jQuery.fn.ready (http://localhost:9000/bower_components/jquery/dist/jquery.js:3496:25)
at jQuery.fn.init (http://localhost:9000/bower_components/jquery/dist/jquery.js:2927:10)
at jQuery (http://localhost:9000/bower_components/jquery/dist/jquery.js:75:10)
at eval (eval at <anonymous> (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:1:1)
at eval (native)
at Function.jQuery.extend.globalEval (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5)
at domManip (http://localhost:9000/bower_components/jquery/dist/jquery.js:5290:15) <div ng-view="" class="ng-scope" data-ng-animate="1">(anonymous function) # angular.js:13550(anonymous function) # angular.js:10225invokeLinkFn # angular.js:9696nodeLinkFn # angular.js:9093compositeLinkFn # angular.js:8397publicLinkFn # angular.js:8277lazyCompilation # angular.js:8615boundTranscludeFn # angular.js:8414controllersBoundTransclude # angular.js:9143update # angular-route.js:968Scope.$broadcast # angular.js:17552(anonymous function) # angular-route.js:643processQueue # angular.js:15961(anonymous function) # angular.js:15977Scope.$eval # angular.js:17229Scope.$digest # angular.js:17045Scope.$apply # angular.js:17337done # angular.js:11572completeRequest # angular.js:11778requestLoaded # angular.js:11711
exporting.js?_=1461240740374:9 Uncaught ReferenceError: Highcharts is not defined
On the stand alone document the header file looks like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
I'm using the same header file in my Yeoman web application view, but Bower seems to default to a different version of Jquery, and I get that error.
How can I solve this?

Getting a really crypric message in react.js when changing routes

Upon changing my application route via history.replace(PATH), I get this really cryptic error message. The stack shows the error originating in redux's applyMiddleware. I use thunk and redux-promise for middleware.
I've tried tracing the rendering path through each of my components, and my breakpoint never gets to the render method of the state I'm trying to load.
I've also tried updating my npm modules and rebuilding the project.
I'm using React 15.0.2.
ReactReconciler.js:54 Uncaught (in promise) TypeError: Cannot read
property 'getNativeNode' of null(…)getNativeNode #
ReactReconciler.js:54getNativeNode #
ReactCompositeComponent.js:303getNativeNode #
ReactReconciler.js:54updateChildren #
ReactChildReconciler.js:89_reconcilerUpdateChildren #
ReactMultiChild.js:178_updateChildren #
ReactMultiChild.js:271updateChildren #
ReactMultiChild.js:259_updateDOMChildren #
ReactDOMComponent.js:845updateComponent #
ReactDOMComponent.js:691receiveComponent #
ReactDOMComponent.js:647ReactDOMComponent_receiveComponent #
ReactPerf.js:66receiveComponent # ReactReconciler.js:103updateChildren
# ReactChildReconciler.js:85_reconcilerUpdateChildren #
ReactMultiChild.js:178_updateChildren #
ReactMultiChild.js:271updateChildren #
ReactMultiChild.js:259_updateDOMChildren #
ReactDOMComponent.js:845updateComponent #
ReactDOMComponent.js:691receiveComponent #
ReactDOMComponent.js:647ReactDOMComponent_receiveComponent #
ReactPerf.js:66receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66performUpdateIfNecessary #
ReactCompositeComponent.js:511performUpdateIfNecessary #
ReactReconciler.js:122runBatchedUpdates # ReactUpdates.js:143perform #
Transaction.js:136perform # Transaction.js:136perform #
ReactUpdates.js:89flushBatchedUpdates #
ReactUpdates.js:165ReactUpdates_flushBatchedUpdates #
ReactPerf.js:66closeAll # Transaction.js:202perform #
Transaction.js:149batchedUpdates #
ReactDefaultBatchingStrategy.js:63enqueueUpdate #
ReactUpdates.js:194enqueueUpdate #
ReactUpdateQueue.js:22enqueueSetState #
ReactUpdateQueue.js:201ReactComponent.setState #
ReactComponent.js:67handleChange # connect.js:301dispatch #
createStore.js:186(anonymous function) # index.js:28(anonymous
function) # index.js:9dispatch # applyMiddleware.js:45

Solved the issue. Turns out it was caused by attempting to map over an array to generate child components in the render method of the component navigated to. I wish the error message were a bit more descriptive.

Also encountered this error. Just like ThinkingInBits, I was mapping over an array creating components. I made a change to the mapping function, leaving one of the variables undefined. This is the error that I kept getting and once I fixed the undefined variable issue, it disappeared. It is quite nasty in the way it is masking the actual problem.

Categories

Resources