React-admin: Getting started with 2.0.0-beta1 - TypeError: theme.palette.shades is undefined

[mrcasablr]

Followed the 2.0 tutorial here - https://github.com/marmelab/admin-on-rest/blob/next/docs/Tutorial.md

yarn start gives -

TypeError: theme.palette.shades is undefined
styles
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-admin/lib/mui/layout/Notification.js:67

  64 | 
  65 | var styles = function styles(theme) {
  66 |     var type = theme.palette.type === 'light' ? 'dark' : 'light';
> 67 |     var confirm = theme.palette.shades[type].background.default;
  68 |     var warning = theme.palette.error.A100;
  69 |     return {
  70 |         confirm: {

What you were expecting:
List posts from the - http://jsonplaceholder.typicode.com

Steps to reproduce:
Follow the tutorial at - https://github.com/marmelab/admin-on-rest/blob/next/docs/Tutorial.md
* npm install --global create-react-admin
* create-react-admin ra-test
* cd ra-test
* yarn add [email protected]
* yarn add ra-data-json-server
* Create App.js and posts.js as mentioned in the tutorial
** yarn start

• Admin-on-rest version: 2.0.0-beta1

Complete stack error -

×
TypeError: theme.palette.shades is undefined
styles
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-admin/lib/mui/layout/Notification.js:67

  64 | 
  65 | var styles = function styles(theme) {
  66 |     var type = theme.palette.type === 'light' ? 'dark' : 'light';
> 67 |     var confirm = theme.palette.shades[type].background.default;
  68 |     var warning = theme.palette.error.A100;
  69 |     return {
  70 |         confirm: {

create
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/material-ui/styles/getStylesCreator.js:31

  28 | var themingEnabled = typeof stylesOrCreator === 'function';
  29 | 
  30 | function create(theme, name) {
> 31 |   var styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
  32 | 
  33 |   if (!theme.overrides || !name || !theme.overrides[name]) {
  34 |     return styles;

attach
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/material-ui/styles/withStyles.js:275

  272 | }
  273 | 
  274 | if (sheetManagerTheme.refs === 0) {
> 275 |   var styles = stylesCreatorSaved.create(theme, name);
  276 |   var meta = name;
  277 | 
  278 |   if (process.env.NODE_ENV !== 'production' && !meta) {

componentWillMount
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/material-ui/styles/withStyles.js:205

  202 | (0, _createClass3.default)(WithStyles, [{
  203 |   key: 'componentWillMount',
  204 |   value: function componentWillMount() {
> 205 |     this.attach(this.theme);
  206 |   }
  207 | }, {
  208 |   key: 'componentDidMount',

callComponentWillMount
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:6370

  6367 | function callComponentWillMount(workInProgress, instance) {
  6368 |   startPhaseTimer(workInProgress, 'componentWillMount');
  6369 |   var oldState = instance.state;
> 6370 |   instance.componentWillMount();
  6371 |   stopPhaseTimer();
  6372 | 
  6373 |   // Simulate an async bailout/interruption by invoking lifecycle twice.

mountClassInstance
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:6435

  6432 | }
  6433 | 
  6434 | if (typeof instance.componentWillMount === 'function') {
> 6435 |   callComponentWillMount(workInProgress, instance);
  6436 |   // If we had additional state updates during this life-cycle, let's
  6437 |   // process them now.
  6438 |   var updateQueue = workInProgress.updateQueue;

updateClassComponent
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:7840

  7837 | if (!workInProgress.stateNode) {
  7838 |   // In the initial pass we might need to construct the instance.
  7839 |   constructClassInstance(workInProgress, workInProgress.pendingProps);
> 7840 |   mountClassInstance(workInProgress, renderExpirationTime);
  7841 |   shouldUpdate = true;
  7842 | } else {
  7843 |   invariant(false, 'Resuming work not yet implemented.');

beginWork
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:8225

  8222 | case FunctionalComponent:
  8223 |   return updateFunctionalComponent(current, workInProgress);
  8224 | case ClassComponent:
> 8225 |   return updateClassComponent(current, workInProgress, renderExpirationTime);
  8226 | case HostRoot:
  8227 |   return updateHostRoot(current, workInProgress, renderExpirationTime);
  8228 | case HostComponent:

performUnitOfWork
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:10224

  10221 |   ReactDebugCurrentFiber.setCurrentFiber(workInProgress);
  10222 | }
  10223 | 
> 10224 | var next = beginWork(current, workInProgress, nextRenderExpirationTime);
  10225 | {
  10226 |   ReactDebugCurrentFiber.resetCurrentFiber();
  10227 | }

workLoop
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:10288

  10285 | if (nextRenderExpirationTime <= mostRecentCurrentTime) {
  10286 |   // Flush all expired work.
  10287 |   while (nextUnitOfWork !== null) {
> 10288 |     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  10289 |   }
  10290 | } else {
  10291 |   // Flush asynchronous work until the deadline runs out of time.

callCallback
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:542

  539 |   // nested call would trigger the fake event handlers of any call higher
  540 |   // in the stack.
  541 |   fakeNode.removeEventListener(evtType, callCallback, false);
> 542 |   func.apply(context, funcArgs);
  543 |   didError = false;
  544 | }
  545 | 

invokeGuardedCallbackDev
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:581

  578 | // errors, it will trigger our global error handler.
  579 | var evt = document.createEvent('Event');
  580 | evt.initEvent(evtType, false, false);
> 581 | fakeNode.dispatchEvent(evt);
  582 | 
  583 | if (didError) {
  584 |   if (!didSetError) {

invokeGuardedCallback
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:438

  435 |  * @param {...*} args Arguments for function
  436 |  */
  437 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
> 438 |   invokeGuardedCallback.apply(ReactErrorUtils, arguments);
  439 | },
  440 | 
  441 | /**

renderRoot
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:10366

  10363 | var didError = false;
  10364 | var error = null;
  10365 | {
> 10366 |   invokeGuardedCallback$1(null, workLoop, null, expirationTime);
  10367 |   if (hasCaughtError()) {
  10368 |     didError = true;
  10369 |     error = clearCaughtError();

performWorkOnRoot
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:11014

  11011 |   root.remainingExpirationTime = commitRoot(finishedWork);
  11012 | } else {
  11013 |   root.finishedWork = null;
> 11014 |   finishedWork = renderRoot(root, expirationTime);
  11015 |   if (finishedWork !== null) {
  11016 |     // We've completed the root. Commit it.
  11017 |     root.remainingExpirationTime = commitRoot(finishedWork);

performWork
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:10967

  10964 | }
  10965 | 
  10966 | while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || nextFlushedExpirationTime <= minExpirationTime) && !deadlineDidExpire) {
> 10967 |   performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime);
  10968 |   // Find the next highest priority work.
  10969 |   findHighestPriorityRoot();
  10970 | }

requestWork
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:10878

  10875 | 
  10876 | // TODO: Get rid of Sync and use current time?
  10877 | if (expirationTime === Sync) {
> 10878 |   performWork(Sync, null);
  10879 | } else {
  10880 |   scheduleCallbackWithExpiration(expirationTime);
  10881 | }

scheduleWorkImpl
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:10732

  10729 |   var root = node.stateNode;
  10730 | 
  10731 |   checkRootNeedsClearing(root, fiber, expirationTime);
> 10732 |   requestWork(root, expirationTime);
  10733 |   checkRootNeedsClearing(root, fiber, expirationTime);
  10734 | } else {
  10735 |   {

scheduleWork
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:10689

  10686 | }
  10687 | 
  10688 | function scheduleWork(fiber, expirationTime) {
> 10689 |   return scheduleWorkImpl(fiber, expirationTime, false);
  10690 | }
  10691 | 
  10692 | function checkRootNeedsClearing(root, fiber, expirationTime) {

scheduleTopLevelUpdate
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:11193

  11190 |     next: null
  11191 |   };
  11192 |   insertUpdateIntoFiber(current, update);
> 11193 |   scheduleWork(current, expirationTime);
  11194 | }
  11195 | 
  11196 | function findHostInstance(fiber) {

updateContainer
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:11231

  11228 |     container.pendingContext = context;
  11229 |   }
  11230 | 
> 11231 |   scheduleTopLevelUpdate(current, element, callback);
  11232 | },
  11233 | 
  11234 | 

renderSubtreeIntoContainer/<
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:15226

  15223 |   root = container._reactRootContainer = newRoot;
  15224 |   // Initial mount should not be batched.
  15225 |   DOMRenderer.unbatchedUpdates(function () {
> 15226 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
  15227 |   });
  15228 | } else {
  15229 |   DOMRenderer.updateContainer(children, root, parentComponent, callback);

unbatchedUpdates
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:11102

  11099 |       isUnbatchingUpdates = false;
  11100 |     }
  11101 |   }
> 11102 |   return fn();
  11103 | }
  11104 | 
  11105 | // TODO: Batching should be implemented at the renderer level, not within

renderSubtreeIntoContainer
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:15225

  15222 |   var newRoot = DOMRenderer.createContainer(container, shouldHydrate);
  15223 |   root = container._reactRootContainer = newRoot;
  15224 |   // Initial mount should not be batched.
> 15225 |   DOMRenderer.unbatchedUpdates(function () {
  15226 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
  15227 |   });
  15228 | } else {

render
src/example/example-ui/example-admin-ui/example-admin-ui/node_modules/react-dom/cjs/react-dom.development.js:15290

  15287 |   return renderSubtreeIntoContainer(null, element, container, true, callback);
  15288 | },
  15289 | render: function (element, container, callback) {
> 15290 |   return renderSubtreeIntoContainer(null, element, container, false, callback);
  15291 | },
  15292 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
  15293 |   !(parentComponent != null && has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;

./src/index.js
src/example/example-ui/example-admin-ui/example-admin-ui/src/index.js:7

   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

[byymster]

I have same issue, as workaround i found if i add:

const theme = {
    palette: {
        shades: {
            dark: {
                background: {
                    default: '#303030',
                },
            },
            light: {
                background: {
                    default: '#303030',
                },
            },
        },
    }
}

as theme property of Admin component it will work. E.g.: <Admin theme={theme} ...
The issue in Notification component - it rely on missing data

[djhi]

This is because we have a loose dependency to material-ui in this beta. It looks like the mui versions released after our beta1 have introduced breaking changes in the theme API. The workaround until we release a new beta with a fixed dependency to mui is to install material-ui as a dependency of your project in its 1.0.0-beta.17 version (no tilde nor carret).

npm install [email protected]

[mrcasablr]

@djhi Added the theme as recommended as well as material-ui dependency as recommended.

Just a simple list of posts as per the Tutorial docs in next branch with 2.0.0-beta1, does not fetch the posts.

I see (0 , _reactAdmin.flattenObject) is not a function instead of list of posts.

[djhi]

v2.0.0-beta2 released, it now uses a fixed version of material-ui

[afilp]

@djhi You mean beta2?