Rollup + React + classnames - lib

[AlexeyShaykov]

Hi.

i am using rollup for my simple test React libary.

i have React component with classnames lib for concat styles

/// Month.js ///

import React from 'react';
import classnames from 'classnames';

import style from './month.styl';

const Month = () => {
  return (
    <div className={classnames(
      style.container,
      styles.extra,
    )}>Month</div>
  )
};

export default Month;

/// month.styl ///

.container {
  height: 100%;

  &.extra {
    color: red;
  }
}

/// rollup.config.js ///

import resolve from "@rollup/plugin-node-resolve";
import babel from '@rollup/plugin-babel';

import postcss from 'rollup-plugin-postcss-modules'
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import autoprefixer from 'autoprefixer';

export default {
  input: "src/index.js",
  output: [
    {
      file: 'build/index.js',
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    babel({exclude: "node_modules/**", babelHelpers: 'runtime'}),
    resolve(),
    postcss({
			extract: 'main.css',
			plugins: [autoprefixer()],
		}),
  ],
  external: ['react', 'react-dom', 'classnames'],
};

after build it
/// index.js

import React from 'react';
import classnames from 'classnames';

var style = {"container":"month_container__1RRLZ","extra":"month_extra__cCj-f"};

var Month = function Month() {
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(style.container, styles.extra)
  });
};

var index = {
  Month: Month
};

export default index;
export { Month };
//# sourceMappingURL=index.js.map

/// main.css

.month_container__1RRLZ {
  height: 100%;
}
.month_container__1RRLZ.month_extra__cCj-f {
  color: #f00;
}

looks good

but if i change Month.js

import React from 'react';
import classnames from 'classnames';

import style from './month.styl';

const Month = () => {
  return (
    <div className={classnames(
      style.container,
      { [styles.extra]: true },
    )}>Month</div>
  )
};

export default Month;

i caught error until building

[!] Error: 'default' is not exported by node_modules/@babel/runtime/helpers/defineProperty.js, imported by src/comps/month.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/comps/month.js (1:7)
1: import _defineProperty from "@babel/runtime/helpers/defineProperty";
          ^
2: import React from 'react';
3: import classnames from 'classnames';
Error: 'default' is not exported by node_modules/@babel/runtime/helpers/defineProperty.js, imported by src/comps/month.js
    at error (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:4528:30)
    at Module.error (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:9935:16)
    at Module.traceVariable (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:10328:29)
    at ModuleScope.findVariable (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:8783:39)
    at FunctionScope.findVariable (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:2622:38)
    at ChildScope.findVariable (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:2622:38)
    at Identifier$1.bind (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:3977:40)
    at CallExpression$1.bind (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:2709:23)
    at CallExpression$1.bind (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:6680:15)
    at CallExpression$1.bind (/Users/alexeyshaykov/Projects/testLib/node_modules/rollup/dist/shared/rollup.js:2705:31)
    ```
    what the promblem? and how to fix it? 
thx

[AlexeyShaykov]

fix by - add [/@babel/runtime/] to rollup.config.js external