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

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

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

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

//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 ponent 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?

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

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

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

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

//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 ponent 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?

• javascript
• ecmascript-6
• webpack
• babeljs

• I blame babel's tutorial lol – user1641172 Commented Mar 26, 2016 at 21:53
• 2 @AmanuelBogale That is the official specification name, like it or not. ecma-international/ecma-262/6.0 "ECMAScript® 2015 Language Specification" Both names are valid, and moving forward the year versions will be more mon. – loganfsmyth Commented Mar 26, 2016 at 21:53
• 1 Dosent matter @loganfsmyth i dont like that name. Just say ES6 or ES7... Im tired of it – amanuel2 Commented Mar 26, 2016 at 21:57
• @NickDewitt You have two separate "doesn't work" examples, in the first, does it give you a syntax error, or silently fail like your second example? – loganfsmyth Commented Mar 26, 2016 at 22:03
• Hmm i thought they were both failing, but export CustomerView from ... but babel-loader wouldn't pile that, but export {CustomerView} from actually works – user1641172 Commented Mar 26, 2016 at 22:06

1 Answer 1

What i should have done:

Wrap the export values in {}:

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

The reason i got confused:

This only works when the CustomerViewclass is the default export:

import CustomerView from './CustomerView.jsx'

When there is no default class export, it needs to be wrapped in curlies or it doesn't work:

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

but for some reason, babel-loader wouldnt pile this when there was a default class export:

export CustomerView from './CustomerView.jsx'

or this

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

a bination of the 2 piled, but gave me the could not find a ponent error (this is react pre-rendering) unless i set the default class export in CustomerView.jsx, which i guess meant it was chaining through to this import/export:

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