CODEWITHSUNDEEP
reactjswebpackbuildbabeljs
Ninita
Ninita

Reputation: 1249

Babel 7 don't convert index.js properly

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"
  }

Upvotes: 1

Views: 969

Answers (1)

Ninita
Ninita

Reputation: 1249

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'
      ]
    }
  }
};

Upvotes: 1

Related Questions