CODEWITHSUNDEEP
node.jsreactjswebpackbabeljscreate-react-app
Orbit
Orbit

Reputation: 2385

Developing a React component library alongside another project (Webpack/Babel issues)

I am setting up a development environment where I'd like to have the ability to simultaneously develop a library of React components while using them in my main application.

I've run npm link ../path/to/lib inside my applications directory and successfully symlinked the library to the applications node_modules. However, I seem to have some misunderstandings regarding how Babel and/or Webpack needs to be setup to enable the code to be properly transpiled. Note that both the library and main application are written in ES6, with the main application being an ejected Create-React-App application.

For the moment, the library has an index.js file at it's root which simply exports a React component:

export {default as Button} from './components/button/Button.jsx'

here is what Button.jsx looks like:

import React, { PropTypes } from 'react'
import classnames from 'classnames'

export default class Button extends React.Component {

    render() {

        let classes = classnames({
          'primary-button': true,
          'primary-button-': this.props.type == '',
          'primary-button': this.props.elevation == 2,
          'primary-button': this.props.elevation >= 3,
        });

        return (
            <a className={classes}>
                {this.props.children}
            </a>
        )
    }
}

I'm not sure if it's even needed or not, but while trying to debug this issue I added a .babelrc file to the root of the library:

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-class-properties"]
}

When I try to import the Button component into a component in my main application (using import {Button} from 'lib'), I get the following error:

Button.jsx Unexpected token (26:3)
You may need an appropriate loader to handle this file type.
| 
|       return (
|           <a className={classes}>
|                 {this.props.children}
|           </a>

Questions:

  1. How can this error be resolved? Assuming my configuration is wrong, what do I need to change? Does the library itself need to have a Webpack setup? Do I need to change the webpack config of my main application?
  2. While symlinking the library using npm link correctly adds it to the main applications node_modules directory, it does not append it to package.json. How can I properly add it? This feature was requested in 2011, but has not yet been fully addressed: https://github.com/npm/npm/issues/1166

Thanks!

Upvotes: 1

Views: 592

Answers (1)

Andy_D
Andy_D

Reputation: 4228

With the default Create React App webpack config, dependencies/node_modules will not be fed to babel, it's assumed that dependencies export a transpiled build.

There are two ways you can fix this:

1: add your component library to what's included in babel-loader. Look at the webpack module config, you'll see src is specifically included (via a variable), you'd add your library there.

This is the easier solution in the short-term

2: export transpiled components. Set up a build process for your component library that creates a dist version of each component which is Babeled, and point your index.js to those components.

This is probably easier in the long-term, in that it will make your library more portable and you could easily open-source it or use it in many projects without needing to change the config of each one.

Upvotes: 2

Related Questions