mlaursen/react-md

Attempted import error: 'Cell' is not exported from 'react-md' when trying md-grid example.

strjonas opened this issue · 2 comments

strjonas commented

Expected behavior I wanted to try following example from https://mlaursen.github.io/react-md-v1-docs/#/components/grids:

import React from 'react';
import { Grid, Cell } from 'react-md';

const Simple = () => (
  <div>
    <Grid className="grid-example">
      {Array.from(Array(12)).map((_, i) => <Cell key={i} size={1}>1</Cell>)}
    </Grid>
    <Grid className="grid-example">
      {Array.from(Array(3)).map((_, i) => <Cell key={i} size={4}>4</Cell>)}
    </Grid>
    <Grid className="grid-example">
      <Cell size={6}>6</Cell>
      <Cell size={4}>4</Cell>
      <Cell size={2}>2</Cell>
    </Grid>
    <Grid className="grid-example">
      <Cell size={6} tabletSize={8}>6 (8 tablet)</Cell>
      <Cell size={4} tabletSize={6}>4 (6 tablet)</Cell>
      <Cell size={2} phoneSize={4}>2 (4 phone)</Cell>
    </Grid>
    <Grid className="grid-example">
      <Cell size={2} offset={3}>Offset 3</Cell>
      <Cell size={2} phoneOffset={1} tabletOffset={3} desktopOffset={2}>
        Phone offset 1, tablet offset 3, desktop offset 2
      </Cell>
    </Grid>
    <Grid className="grid-example">
      <Cell size={2} order={2}>(order 2)</Cell>
      <Cell size={2} order={1}>(order 1)</Cell>
      <Cell size={2} order={0}>(order 0)</Cell>
    </Grid>
  </div>
);

But it showed the error:

Attempted import error: 'Cell' is not exported from 'react-md'.

I copied the exact code from the website and installed react-md. I also tried to update it, but that didn't help either.

mlaursen commented

I think you might have installed v2 of react-md instead. This codesandbox works with 1.18.1 (latest v1 version):

I'd highly recommend switching to v2 if you are able to though. Here's the v2 version of the grid:

strjonas commented

This fixed this error, than you very much!

  • 👍1