ES6 module import export with webpack and babel-loader

Viewed 8040

I am using webpack with babel-loader to transpile my ES6/JSX, which gets split into server and client bundles:

//components/CustomerView.jsx
export default class CustomerView extends React.Component {
    render() {
        ...
    }
}

//components/index.js
import CustomerView from './CustomerView.jsx'
export {CustomerView}

//client.js
var Components = require('expose?Components!./components');

//webpack.config.js (loader section)
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }

The above works, but based on the example in the Syntax section here, which mentions babel supports it, so i assumed i could write something like the following, but it doesnt work:

export CustomerView from './CustomerView.jsx'

Also, it doesnt work if the class isnt the default export class:

export class CustomerView extends React.Component {
    render() {
        ...
    }
}

I don't get any errors from webpack, it creates the bundles but when i run it i get Could not find a component named 'Components.CustomerView', so for some reason unless it's the default export the expose-loader doesnt seeem to be creating the Components global, or not attaching CustomerView to it.. any ideas?

1 Answers
Related