Develop Reference

React Admin Tutorial by Marmelab not working

I am trying to follow this React-Admin tutorial by marmelab.com : https://marmelab.com/react-admin/Tutorial.html
After the following setup:
> npm create-react-app test-admin
> cd test-admin/
> npm install react-admin ra-data-json-server prop-types
> npm start
I tried running the following code as mentioned in the tutorial:
// in src/App.js
import * as React from "react";
import { Admin } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const App = () => <Admin dataProvider={dataProvider} />;
export default App;
This gives me no output and a list of errors as follows:
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning # react-dom.development.js:86
error # react-dom.development.js:60
render # react-dom.development.js:29404
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at CoreAdminContext (CoreAdminContext.js:12:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
at invokeGuardedCallback (react-dom.development.js:4270:1)
at beginWork$1 (react-dom.development.js:27243:1)
resolveDispatcher # react.development.js:1476
useContext # react.development.js:1484
CoreAdminContext # CoreAdminContext.js:12
renderWithHooks # react-dom.development.js:16141
mountIndeterminateComponent # react-dom.development.js:20838
beginWork # react-dom.development.js:22342
callCallback # react-dom.development.js:4157
invokeGuardedCallbackDev # react-dom.development.js:4206
invokeGuardedCallback # react-dom.development.js:4270
beginWork$1 # react-dom.development.js:27243
performUnitOfWork # react-dom.development.js:26392
workLoopSync # react-dom.development.js:26303
renderRootSync # react-dom.development.js:26271
performSyncWorkOnRoot # react-dom.development.js:25924
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react-dom.development.js:18525 The above error occurred in the <CoreAdminContext> component:
at CoreAdminContext (http://localhost:3000/static/js/bundle.js:92536:28)
at AdminContext
at Admin (http://localhost:3000/static/js/bundle.js:102485:25)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:18525
update.callback # react-dom.development.js:18558
callCallback # react-dom.development.js:13092
commitUpdateQueue # react-dom.development.js:13113
commitLayoutEffectOnFiber # react-dom.development.js:23204
commitLayoutMountEffects_complete # react-dom.development.js:24461
commitLayoutEffects_begin # react-dom.development.js:24447
commitLayoutEffects # react-dom.development.js:24385
commitRootImpl # react-dom.development.js:26651
commitRoot # react-dom.development.js:26517
performSyncWorkOnRoot # react-dom.development.js:25956
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at CoreAdminContext (CoreAdminContext.js:12:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at beginWork$1 (react-dom.development.js:27219:1)
at performUnitOfWork (react-dom.development.js:26392:1)
at workLoopSync (react-dom.development.js:26303:1)
at renderRootSync (react-dom.development.js:26271:1)
resolveDispatcher # react.development.js:1476
useContext # react.development.js:1484
CoreAdminContext # CoreAdminContext.js:12
renderWithHooks # react-dom.development.js:16141
mountIndeterminateComponent # react-dom.development.js:20838
beginWork # react-dom.development.js:22342
beginWork$1 # react-dom.development.js:27219
performUnitOfWork # react-dom.development.js:26392
workLoopSync # react-dom.development.js:26303
renderRootSync # react-dom.development.js:26271
performSyncWorkOnRoot # react-dom.development.js:25924
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
I am sure I am following the tutorial correctly.
Does this have anything to do with conflicting versions?
How do I fix this issue and continue with the tutorial?
My React version:
$ npm view react version
18.0.0

React 18 no longer supports ReactDOM.render, as they have replaced it with createRoot.
You can learn more about it here: React v18.0
You can continue with the tutorial by just downgrading to React 17:
npm install --save react#17.0.2 react-dom#17.0.2

You must change index.js file.
import ReactDom from 'react-dom/client'
const root = ReactDOM.creatorRoot(document.getElementById('root'));
root.render(<App/>);

Cannot resolve RouterLink tag

Vanilla Vue CLI installation aside from a handful of pre-installed stuff via NPM.
I've read the online docs, I've read the forums but cannot get the Vue router to work.
I've tried a number of different ways of importing the vue router, but the official document has import VueRouter from 'vue-router' and Vue.use(VueRouter).
adding router object results in "Uncaught ReferenceError: router is not defined"
// main.js
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//import axios from 'axios'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
Vue.config.productionTip = false
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(faUserSecret)
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{ path: '/', component: () => import('./views/Home.vue') },
// { path: '/login', component: Login },
// { path: '/about', component: About }
]
})
new Vue({
render: h => h(App),
}).$mount('#app')
// App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/groups">Events Near Me</router-link>
</div>
<img alt="Vue logo" src="./assets/logo.png">
</div>
</template>
<script>
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
Results in:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"
found in
---> <RouterLink>
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 12 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'resolve' of undefined
at Proxy.render (vue-router.esm.js?8c4f:1026)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at new Watcher (vue.runtime.esm.js?2b0e:4462)
at mountComponent (vue.runtime.esm.js?2b0e:4067)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5972)
at createElm (vue.runtime.esm.js?2b0e:5919)
logError # vue.runtime.esm.js?2b0e:1888
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 11 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"
found in
---> <RouterLink>
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 12 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'resolve' of undefined
at Proxy.render (vue-router.esm.js?8c4f:1026)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at new Watcher (vue.runtime.esm.js?2b0e:4462)
at mountComponent (vue.runtime.esm.js?2b0e:4067)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5972)
at createElm (vue.runtime.esm.js?2b0e:5919)
logError # vue.runtime.esm.js?2b0e:1888
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 11 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"
found in
---> <RouterLink>
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 12 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'resolve' of undefined
at Proxy.render (vue-router.esm.js?8c4f:1026)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at new Watcher (vue.runtime.esm.js?2b0e:4462)
at mountComponent (vue.runtime.esm.js?2b0e:4067)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5972)
at createElm (vue.runtime.esm.js?2b0e:5919)

Just provide router object to new Vue({}).
const router = new VueRouter({
routes: [
{ path: '/', component: () => import('./views/Home.vue') },
// { path: '/login', component: Login },
// { path: '/about', component: About }
]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')

ReactJS with Google Tag Manager

I am trying to track my application with Google Tag Manager. I found a package here: https://www.npmjs.com/package/react-google-tag-manager which seems to be popular but I am unsure how to configure it properly despite the instructions!!
I took the example from the website and created a new script called google-tag-manager.js.
I have then included this on one of the pages I want to track: import GoogleTagManager from '../components/google-tag-manager'
I then simply added the tag to within my render() function <GoogleTagManager gtmId='GTM-XXXXX' />.
I am guessing I don't fully understand as I am now getting an error of:
TypeError: Cannot read property 'string' of undefined
./src/components/google-tag-manager.js
src/components/google-tag-manager.js:36
33 | }
34 |
35 | GoogleTagManager.propTypes = {
> 36 | gtmId: React.PropTypes.string.isRequired,
37 | dataLayerName: React.PropTypes.string,
38 | additionalEvents: React.PropTypes.object,
39 | previewVariables: React.PropTypes.string,
Have I missed something or am I doing something wrong?
Thanks
Side issue:
proxyConsole.js:54 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null
__stack_frame_overlay_proxy_console__ # proxyConsole.js:54
printWarning # warning.js:33
warning # warning.js:57
mountIndeterminateComponent # react-dom.development.js:10439
beginWork # react-dom.development.js:10601
performUnitOfWork # react-dom.development.js:12573
workLoop # react-dom.development.js:12682
callCallback # react-dom.development.js:1299
invokeGuardedCallbackDev # react-dom.development.js:1338
invokeGuardedCallback # react-dom.development.js:1195
performWork # react-dom.development.js:12800
scheduleUpdateImpl # react-dom.development.js:13185
scheduleUpdate # react-dom.development.js:13124
enqueueSetState # react-dom.development.js:9646
./node_modules/react/cjs/react.development.js.ReactComponent.setState # react.development.js:218
(anonymous) # base.js:29
Promise resolved (async)
componentDidMount # base.js:23
commitLifeCycles # react-dom.development.js:11505
commitAllLifeCycles # react-dom.development.js:12294
callCallback # react-dom.development.js:1299
invokeGuardedCallbackDev # react-dom.development.js:1338
invokeGuardedCallback # react-dom.development.js:1195
commitAllWork # react-dom.development.js:12415
workLoop # react-dom.development.js:12687
callCallback # react-dom.development.js:1299
invokeGuardedCallbackDev # react-dom.development.js:1338
invokeGuardedCallback # react-dom.development.js:1195
performWork # react-dom.development.js:12800
scheduleUpdateImpl # react-dom.development.js:13185
scheduleUpdate # react-dom.development.js:13124
scheduleTopLevelUpdate # react-dom.development.js:13395
updateContainer # react-dom.development.js:13425
(anonymous) # react-dom.development.js:17105
unbatchedUpdates # react-dom.development.js:13256
renderSubtreeIntoContainer # react-dom.development.js:17104
render # react-dom.development.js:17129
./src/index.js # index.js:20
__webpack_require__ # bootstrap 6f791d33f885679fccb8:669
fn # bootstrap 6f791d33f885679fccb8:87
0 # registerServiceWorker.js:108
__webpack_require__ # bootstrap 6f791d33f885679fccb8:669
./node_modules/add-dom-event-listener/lib/EventBaseObject.js.Object.defineProperty.value # bootstrap 6f791d33f885679fccb8:715
(anonymous) # bundle.js:719

React.PropTypes - is now separated from react so there's another package for PropTypes.
You will need to
Install proptypes package
Import proptypes to your file:
import PropTypes from 'prop-types';
Use PropTypes as standalone library
GoogleTagManager.propTypes = {
gtmId: PropTypes.string.isRequired,
dataLayerName: PropTypes.string,
additionalEvents: PropTypes.object,
scriptId: PropTypes.string
};
OR
You can just remove whole proptypes code block, but I wouldn't recommend this

The module you are referring to uses PropTypes from react and PropTypes is a different package now. More info here.
Note:
React.PropTypes has moved into a different package since React
v15.5. Please use the prop-types library instead. We provide a
codemod script to automate the conversion.

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.

Why gulp-uglify breaks backendless?

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.