search

aakashns / create-component-lib

Create a library of React components that can be published to npm
https://npmjs.com/create-component-lib
MIT License
89 stars 13 forks source link

Transpiling issue #1

Open pietrop opened 5 years ago

pietrop commented 5 years ago

First of all thanks for the great component, and blog post, very useful and insightful.

I run into an error when running npm build to transpile the component in the dist folder. Turns out the preset for babel, babel-preset-react-app was missing in the dev dependencies.

This can be installed as 

npm install babel-preset-react-app  --save-dev

So perhaps your create-component-lib script could be updated on line 34 to include that too.

The nice thing about installing react-scripts in the bash script is that this seemed to work for setting up the latest create-react-app v2 which supports css modules, so that's cool.

However thought I'd mentioned I ended up installing the official babel react presets,@babel/preset-react and @babel/core @babel/cli

So thought I'd mentioned it in case you want to add those to the script instead of the unofficial once.

For convenience, updated line in the script would look like this

npm i react react-dom react-scripts  @babel/core @babel/cli @babel/preset-react rimraf --save-dev

Hope this helps

eddyc commented 5 years ago

Thanks for the info, I was able to get the build working using the above:

npm i react react-dom react-scripts  @babel/core @babel/cli @babel/preset-react rimraf --save-dev

I'm unable to configure my package.json however so that I don't have to do that above install every time I need to install packages when doing a fresh clone of my repo, is there a way to do this so I just have to use yarn, or npm install? Thanks, Ed

Edit:

I fixed my issue, I had an extraneous babel-core entry in my package.json along with @babel/core, I removed 

        "babel-core": "6.26.0",

And it all works now

aakashns commented 5 years ago

Thanks @pietrop and @eddyc . For now, I've updated the script to include babel-preset-react-app and published a new version. I'll make the change to include @babel/core etc. once I get a chance to test it out properly.

karianpour commented 5 years ago

I had an issue with babel 7. The issue is that on the dist directory, the js files has absolute imports like the following : 

import _objectWithoutProperties from "/home/kayvan/projects/material-ui-hichestan-datetimepicker/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "/home/kayvan/projects/material-ui-hichestan-datetimepicker/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "/home/kayvan/projects/material-ui-hichestan-datetimepicker/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "/home/kayvan/projects/material-ui-hichestan-datetimepicker/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "/home/kayvan/projects/material-ui-hichestan-datetimepicker/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "/home/kayvan/projects/material-ui-hichestan-datetimepicker/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits";

with the following package.json :

    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-react": "^7.0.0",
    "react-scripts": "^2.1.2",

the desired result would be as follow : 

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

which I could get with the following package.json : 

    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-react": "^6.24.1",
    "react-scripts": "^1.1.5",
eddyc commented 5 years ago

In order to fix the absolute imports issue your .babelrc needs to look like this:

{ "presets": [["react-app", { "absoluteRuntime": false }]] }
rod-glover commented 5 years ago

I had a related problem, solved by @eddyc 's suggestion of installing the @babel packages.

I ran npx create-component-lib pcic-react-components. Moved some files around, but did not change anything content. Demo app still worked.

Then tried to build for package publication. Problem:

$ npm run build

> simple-component-library@0.1.0 build /home/rglover/code/pcic-react-components
> rimraf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__

ReferenceError: [BABEL] src/lib/components/dummy/TextInput/TextInput.js: Unknown option: /home/rglover/code/pcic-react-components/node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: "/home/rglover/code/pcic-react-components/node_modules/babel-preset-react-app/index.js")
    at Logger.error (/home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
    at /home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/home/rglover/code/pcic-react-components/node_modules/babel-core/lib/transformation/file/index.js:212:65)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! simple-component-library@0.1.0 build: `rimraf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the simple-component-library@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/rglover/.npm/_logs/2019-01-16T22_55_15_505Z-debug.log

.babelrc content is not the problem; it contained the recommended content already.

Problem fixed by

$ npm i react react-dom react-scripts  @babel/core @babel/cli @babel/preset-react rimraf --save-dev

package.json now contains

"devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "^6.26.0",
    "babel-preset-react-app": "^7.0.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "^2.1.3",
    "rimraf": "^2.6.3"
  },

I suspect that I should remove the babel-clidependency, as I am guessing it is superseded by @babel/cli.

Any additional comment or clarification about this would be appreciated, as I am a complete Babel configuration noob.