Use react-proxy-loader with ES2015

[alexmoruz]

Hi, I can use this with ES2015?

[vyorkin]

@alexmoruz I have the same question, it would be great to have a decorator for this, for now I've found react-mixin-decorator, gonna try it

[ayozebarrera]

so?

[nub4life]

I use it on my project with ES2015. It seems to work, I am not sure why.

[jsg2021]

Babel 6+ no longer maps the default export to exports... so require('Component') will now return an object {default: Component,...}. In Babel 5 and lower, if you had a default export, the return of require would be that default... but now, its broken.

[jsg2021]

I've submitted a pull request to work around it... #16
...but I also, posed a question: Maybe there should be a loader to go between this one and babel to translate the babel exports?

[ngbrown]

For a workaround, if using react-router 1.x, I think it is better to switch to the new asyncronous methods in Route, the getComponent function:

    <Route
      getComponent={((location, cb) => {
        require.ensure(["../screens/Admin"], require => {
          cb(null, require("../screens/Admin").default);
        });
      })}
      path="admin"
    />

or slightly simpler with the standard bundle-loader:

    <IndexRoute
      getComponent={((location, cb) => {
        require("bundle!../screens/App/screens/Home")(file => cb(null, file.default));
      })}
    />

[jsg2021]

there are plenty of ways to skin a cat.

the ideas it's this loader is to abstract that away and have your webpack config make files magically splitpoints that match the extension or explicitly with a loader prefix.

[ngbrown]

@jsg2021 sure, but it currently doesn't seem to work with Babel 6, and no-one had posted a work-around.

[jsg2021]

I have an open pull request that works around/fixes it
On Fri, Dec 4, 2015 at 2:35 PM Nathan Brown notifications@github.com
wrote:

@jsg2021 https://github.com/jsg2021 sure, but it currently doesn't seem
to work with Babel 6, and no-one had posted a work-around.

—
Reply to this email directly or view it on GitHub
#14 (comment)
.

[axelson]

Here's a link to the open pull request that fixes this issue: #19

The work-around is to change:

var Component = require("react-proxy!./Component");

to:

var Component = require("react-proxy!exports?exports.default!./Component");

Although es6 import syntax works as well:

import Component from 'react-proxy!exports?exports.default!./Component'

[jsg2021]

I closed my pull request because I believe that composing the exports loader with this loader is the real fix.

you can configure webpack to know *.async.jsx should go through this chain. so all you have to do is simply import './Component.async' (or add the extension to the module config so you only have to say import 'Component')

[WhiteWaterCoder]

Although es6 import syntax works as well:

import Component from 'react-proxy!exports?exports.default!./Component'

When I add a line like that then webpack just hangs with no output. Any idea why? (sorry a bit new to JS so let me know if there is a way to get some more info like logs)

[jsg2021]

Webpack frowns on inline loader usage. You should configure the loaders in the webpack.config.js such that you just need to import foo from './bar'

[michael-ciniawsky]

Fixed by #19