Cannot read property 'downgradeElements' of undefined

[MechJosh0]

I'm having two problems with Storybook, they are very likely to be related.

Reproduce
https://github.com/MechJosh0/storybook-mdl-error
npm install
npm run storybook

Bug 1 CSS/JS not loading on initial view.

Go to localhost:9001 and view our table.Table story module. This will show our React-MDL DataTable component with no CSS or JS. However in the developer tools network tab you can see our material.min.css and material.min.js has been loaded using react-helmet. If you switch to a different story and back, our component will now display correctly.

Bug 2 downgradeElements of undefined

Go to http://localhost:9001/?selectedKind=table.Table&selectedStory=React-MDL%20DataTable&full=0&down=1&left=1, this will display Cannot read property 'downgradeElements' of undefined error. However if you do any changes to the Table component /client/modules/table/components/table.js (ie changed 1 to 2) and cause Storybook to hot-reload the component, it will now display correctly. Hot-reloading will continue to work until you refresh the page again, if you do that then you have to force a hot-reload to hack it to display again.

Both bugs are only producible in Storybook, loading in Meteor is perfectly fine.

[thani-sh]

Hi @MechJosh0

Thanks for the test repo, it made debugging this issue quite easy.

These bugs happen because the JS files loaded by Helmet is not available when the table gets rendered. It seems helmet is loading js files asynchronously. This can be verified with a console.log statement.

const Table = () => (
  <div>
    {console.log('window.MaterialButton', window.MaterialButton)}
    1
    <Helmet
      link={[
    // ...

Solution

Just import the js file. This will fix these bugs.

import React from 'react';
import {DataTable, TableHeader} from 'react-mdl';
import Helmet from 'react-helmet';
import '../../../../public/lib/getmdl/material.min.js';

Reference:

• table.js file

[MechJosh0]

Thanks @mnmtanish for both the solution and the helpful explanation.