Can't bundle with rollup

[thdk]

I've tried to import both from '@material/react-chips' and from '@material/react-chips/index' as well as some other attempts but each time without success.

Below are two of my attempts:

1. import { Chip, ChipSet } from '@material/react-chips'

'ChipSet' is not exported by node_modules\@material\react-chips\dist\index.js

2. import { Chip, ChipSet } from '@material/react-chips/index'

Error: 'MDCChipFoundation' is not exported by node_modules\@material\react-chips\node_modules\@material\chips\dist\mdc.chips.js

Note that for the second attempt I got the following error:

Error: Cannot call a namespace ('classnames')
node_modules\@material\react-chips\Chip.tsx (178:17)

Which is already address in another issue here: #709

I fixed that by changing the import for classnames in 'node_modules@material\react-chips\Chip.tsx'
from
import * as classnames from 'classnames';
to
import classnames from 'classnames';

I've create a small github repository with rollup setup here.

npm install + npm run build

Any ideas anyone how this can be set up correctly?

Issues likely to be related:
material-components/material-components-web#4135
#182
#703

[ghost]

Since the packages are bundled in CommonJS format you would need to add named exports for rollup to find them, e.g. "@material/react-chips": ["Chip", "ChipSet"]

[thdk]

@ben-mckernan
Aah, my fault after all.. Thanks for pointing me into that direction.
I've updated my repo for future reference if anyone finds this thread:
thdk/test-material-react-typescript-rollup@bb5a92f

Below also the entire rollup.config.js file for bundling a typescript project with react and material-components-web-react:

import resolve from 'rollup-plugin-node-resolve';
import commonJS from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript';
import replace from 'rollup-plugin-replace';


export default {
  input: 'src/index.ts', 
  output: {
    file: 'dist/index.js',
    format: 'iife'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': `'${process.env.NODE_ENV || "development"}'`
    }),
    resolve(),
    commonJS({
      include: 'node_modules/**',
      namedExports: {
        'node_modules/react/index.js': ['cloneElement', 'createRef', 'Component', 'PureComponent', 'Fragment', 'Children', 'createElement', 'forwardRef'],
        'node_modules/react-dom/index.js': ['findDOMNode', 'unstable_batchedUpdates', 'render'],
        '@material/react-chips': ["Chip", "ChipSet"]
      }
    }),
    typescript()
  ],
  onwarn: function (warning) {
    // Suppress this error message:
    // "The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten"
    if (warning.code === 'THIS_IS_UNDEFINED') return;

    console.error(warning.message);
  }
};