Babel 7 don't convert index.js properly - reactjs

Question

I have a React project which I migrated from Babel 6 to 7. And now I'm facing a little problem when trying to build my package.
I already figured out the problem is when the Babel commands are run.
This is my "babel" script on my package.json:
"babel-build": "cross-env NODE_ENV=buildES6 babel ./src/components/ --ignore **/stories,**/*.test.js --source-maps --out-dir ./dist/my-component/"
This convert my files to dist folder. The problem is: when I try to use the dist folder content in another react project, it seems the files aren't correctly converted.
On my packaged project I export 3 components like this (my src/components/index.js file):
export { FancyButton } from './FancyPanel/FancyButton';
export { MathUtils } from './FancyPanel/MathUtils';
export { SumPanel } from './FancyPanel/SumPanel';
And on the another project I use my component like this (I copied the dist folder to the node_modules folder of this project to simulate the installation of my package):
import React from 'react';
import { FancyButton, MathUtils, SumPanel } from 'my-component';
class Home extends React.Component {
constructor() {
super();
}
render()
{
return (
<div>
<FancyButton
className="fancyBt"
id="myFancyBt"
text="Click me!"
title="Button to click on"
onClick={() => {alert('clicked')}}
/>
Random number: {MathUtils.getRandomArbitrary(1, 10)}
<SumPanel/>
</div>
);
}
}
export default Home;
And the browser says:
TypeError: Cannot read property 'getRandomArbitrary' of undefined
I think my converted index.js should be:
import _FancyButton from'./FancyPanel/FancyButton';export{_FancyButton as FancyButton};import _MathUtils from'./FancyPanel/MathUtils';export{_MathUtils as MathUtils};import _SumPanel from'./FancyPanel/SumPanel';export{_SumPanel as SumPanel};
But it is converted like this:
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FancyButton",{enumerable:!0,get:function get(){return _FancyButton.FancyButton}}),Object.defineProperty(exports,"MathUtils",{enumerable:!0,get:function get(){return _MathUtils.MathUtils}}),Object.defineProperty(exports,"SumPanel",{enumerable:!0,get:function get(){return _SumPanel.SumPanel}});var _FancyButton=require("./FancyPanel/FancyButton"),_MathUtils=require("./FancyPanel/MathUtils"),_SumPanel=require("./FancyPanel/SumPanel");
//# sourceMappingURL=index.js.map
I think I'm not configuring well my babel.config.js. But I already tried many ways and the problem remains.
Here's my babel.config.js:
/* eslint-disable no-template-curly-in-string */
module.exports = {
plugins:
[
[
'#babel/plugin-transform-runtime',
{
corejs: false
}
],
'#babel/plugin-transform-modules-commonjs',
[
'transform-imports',
{
lodash: {
transform: 'lodash/${member}'
}
}
]
],
env: {
production: {
plugins: [
'transform-react-remove-prop-types'
]
},
test: {
presets: [
[
'#babel/preset-env'
],
'#babel/react'
]
},
commonJS: {
presets: [
[
'#babel/preset-env'
],
'#babel/react'
]
},
buildES6: {
presets: [
[
'#babel/env',
{
modules: false,
loose: true
}
],
'#babel/react',
[
'minify',
{
mangle: false
}
]
],
plugins: [
'#babel/plugin-proposal-class-properties'
]
}
}
};
Anyone can help me fixing it? What is the problem?
Here is my source code (without this last babel config version): https://github.com/Ninita1/storybook5_babel7_webpack4
My package.json:
"scripts": {
"babel-build": "cross-env NODE_ENV=buildES6 babel ./src/components/ --ignore **/stories,**/*.test.js --source-maps --out-dir ./dist/my-component/"
},
"dependencies": {
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0"
},
"devDependencies": {
"#babel/cli": "7.8.3",
"#babel/core": "7.8.3",
"#babel/plugin-proposal-class-properties": "7.8.3",
"#babel/plugin-transform-runtime": "7.8.3",
"#babel/preset-env": "7.8.3",
"#babel/preset-react": "7.8.3",
"#storybook/addon-docs": "5.3.9",
"#storybook/react": "5.3.9",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-minify": "^0.5.1",
"babel-plugin-transform-imports": "^2.0.0",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.5.3",
"cross-env": "^7.0.0",
"css-loader": "^3.4.2",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.4.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^5.0.2",
"jest": "^24.9.0",
"jest-html-reporters": "^1.2.1",
"js-beautify": "^1.10.2",
"lodash": "^4.17.15",
"marksy": "^8.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"raw-loader": "^4.0.0",
"react-addons-create-fragment": "^15.6.2",
"react-test-renderer": "^16.9.0",
"resolve-url-loader": "^3.1.1",
"style-loader": "^1.1.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "4.41.5",
"webpack-cli": "^3.3.10"
}

Answer 1

I already figured out.
I should change my index.js to this:
import FancyButton from './FancyPanel/FancyButton';
import MathUtils from './FancyPanel/MathUtils';
import SumPanel from './FancyPanel/SumPanel';
export { FancyButton, MathUtils, SumPanel };
I tried many babel.config.js modifications and at the end I only have this:
/* eslint-disable no-template-curly-in-string */
module.exports = {
presets: [
'#babel/preset-env',
'#babel/preset-react'
],
plugins:
[
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-modules-commonjs'
]
};
But with #nicolo-ribaudo help at https://github.com/babel/babel/issues/11107 I figured out that #babel/plugin-transform-modules-commonjs plugin shouldn't be declared and #babel/env preset must have modules: false, like this:
/* eslint-disable no-template-curly-in-string */
module.exports = {
presets: [
[
'#babel/env',
{
modules: false
}
],
'#babel/react'
],
plugins: [
'#babel/plugin-proposal-class-properties'
]
};
Now my babel.config.js looks like this and works just fine (for npm run babel-build);
/* eslint-disable no-template-curly-in-string */
module.exports = {
presets: [
[
'#babel/env',
{
modules: false,
loose: true
}
],
'#babel/react',
[
'minify',
{
mangle: false
}
]
],
plugins: [
'#babel/plugin-proposal-class-properties',
[
'#babel/plugin-transform-runtime',
{
corejs: false
}
],
[
'transform-imports',
{
lodash: {
transform: 'lodash/${member}'
}
}
]
]
};
For npm run build my babel.config.js must be:
/* eslint-disable no-template-curly-in-string */
module.exports = {
plugins:
[
[
'#babel/plugin-transform-runtime',
{
corejs: false
}
],
[
'transform-imports',
{
lodash: {
transform: 'lodash/${member}'
}
}
]
],
env: {
production: {
plugins: [
'transform-react-remove-prop-types'
]
},
test: {
presets: [
'#babel/env',
'#babel/react'
],
plugins: [
'#babel/plugin-transform-modules-commonjs'
]
},
commonJS: {
presets: [
'#babel/env',
'#babel/react'
]
},
buildES6: {
presets: [
[
'#babel/env',
{
modules: false,
loose: true
}
],
'#babel/react',
[
'minify',
{
mangle: false
}
]
],
plugins: [
'#babel/plugin-proposal-class-properties'
]
}
}
};