Transpile to ES5 including files outside root directory

Viewed 1172

I have a project with multiple apps and some common react components in this structure:

ui
 - app1
 - app2
 - components

The javascript files in components are written in ES6. Both app1 and app2 have this webpack config:

var path = require('path')

module.exports = {
  entry: ['babel-polyfill', './src/index.js'],
  module: {
    rules: [{
      test: /\.jsx?$/,
      include: [
        path.resolve(__dirname, '../components'),
        path.resolve(__dirname, 'src')
      ],
      loader: 'babel-loader'
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      InputComponents: path.resolve(__dirname, '../components'),
    }
  },
}

Babel config:

{
  "plugins": [
    "transform-async-to-generator",
    "glamor/babel"
  ],
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ]
}

My code:

import React, { Component } from 'react'
import { Button } from 'CommonComponents'

export default class ButtonView extends Component {
  render () {
    return <Button>GO!</Button>
  }
}

I want my components and my apps to be built and transpiled to ES5 using Babel. The apps work but not the external components and I get errors like:

Module build failed: SyntaxError: Unexpected token (6:34)

  4 | class Button extends Component {
  5 |   render () {
> 6 |     if (this.props.stroke) return <ButtonStroke {...this.props} />
    |                                   ^

How can I make sure that babel transpiles my external components?

0 Answers
Related