Migrating React App from No Modules to Modules [Webpack]

help
1

For the past 3 weeks, a friend and I developed a rather large and complex Meteor/React app along with Browserify to handle some NPM dependencies.

Lately, I’ve gotten into Webpack (via the flow router kickstart project) and absolutely love it.

Unfortunately, we have over 40 components written in the following style (which pollutes the global scope):

MainPage = React.createClass({
  render() {
    return (
      <div>
        <TopNavbar />
        <h1>Content Here</h1>
      </div>        
    );
  }
});

I’ve been trying for more than two days to convert our app to the webpack way, but it’s starting to seem impossible to do it without significantly rewriting the entire app.

I’ve tried copy and pasting all the global namespaced components into the kickstart project. But since it’s webpack, they can’t seem to find it in the global scope. This means I have to write import/export statements for each and everyone of the 40+ components before I can even get the app to run.

Is there a better way for me to convert to Webpack without rewriting everything?

2

If I were you I would separate those components in its own files, export default it and start importing it when you use it until all errors disappear.

3

@gabrielhpugliese
Continuing the discussion from Migrating React App from No Modules to Modules [Webpack]:

The problem is that the moment I change:

MainPageDataHelper = function() { ... }

to:

export default function MainPageDataHelper() { ... }

The MainPage.jsx file in the (old non-webpack) app is no longer able to find it in the global scope.

You might suggest that I put this:

import MainPageDataHelper from './MainPageDataHelper';

into MainPage.jsx, but the moment I do this, now the router.js cannot find MainPage.jsx!

4

I can’t get it. Do you have something reproduceable like a github repo?