Export ES6 module import using webpack and babel-loader

Question

I use webpack with babel-loader to override my ES6 / JSX, which is divided into server and client packages:

 //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 that babel supports it, so I assumed that I could write something like the following, but it does not work:

 export CustomerView from './CustomerView.jsx' 

In addition, it does not work if the class is not a standard export class:

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

I don't get any errors from webpack, it creates packages, but when I run it, I get Could not find a component named 'Components.CustomerView' , so for some reason, if it does not export expose-loader by default, not Does the Components creation global or without CustomerView attach any ideas?

Answer 1

What I had to do:

Wrap the export values ​​in {} :

 export {CustomerView} from './CustomerView.jsx' 

The reason I got confused:

This only works when the CustomerView class is the default export:

 import CustomerView from './CustomerView.jsx' 

If the default export fails, you need to wrap it in curlies or it does not work:

 import {CustomerView} from './CustomerView.jsx' 

but for some reason babel-loader will not compile this if the default class has been exported:

 export CustomerView from './CustomerView.jsx' 

or

 import CustomerView from './CustomerView.jsx' export CustomerView 

a combination of 2 compiled, but gave me the error could not find a component (this is a preliminary rendering of response.net) if I did not set the export of the default class to CustomerView.jsx , which, as I assumed, meant that it connects to this import /export:

 import CustomerView from './CustomerView.jsx' export {CustomerView}