Thanks for the great tutorial and sample app. I've been working on a project that uses webpack's css-loader and style-loader. Things work fine for the development server, however, when running npm run start it looks like Babel doesn't know what to do about importing the SCSS or CSS files. This isn't a problem with your application, but I'm wondering if you have any ideas.

So I have a Layout component in ~/source/components/layout/layout.jsx:

import React from 'react';
import styles from './layout.scss';

export default class Layout extends React.Component {
  render() {
    return (
      <div className={styles.layout}>
        <h1>You Got the Layout!</h1>
        <main className={styles.main}>{this.props.children}</main>
      </div>
    );
  }
}

Notice it is importing the SCSS from ./layout.scss. However, when I run start I get the following:

$ npm run start
> NODE_ENV=production node_modules/.bin/babel-node source/server.js

~/node_modules/babel-core/lib/transformation/file/index.js:600
      throw err;
      ^

SyntaxError: ~/source/components/layout/layout.scss: Unexpected token (1:0)
> 1 | .layout {
    | ^
  2 |   background-color:dodgerblue;
  3 |   padding: 1em;
  4 |   color: white;
    at Parser.pp$5.raise (~/node_modules/babylon/lib/index.js:4246:13)
    at Parser.pp.unexpected (~/node_modules/babylon/lib/index.js:1627:8)
    at Parser.pp$3.parseExprAtom (~/node_modules/babylon/lib/index.js:3586:12)
    at Parser.parseExprAtom (~node_modules/babylon/lib/index.js:6402:22)
    at Parser.pp$3.parseExprSubscripts (~/node_modules/babylon/lib/index.js:3331:19)
    at Parser.pp$3.parseMaybeUnary (~/node_modules/babylon/lib/index.js:3311:19)
    at Parser.pp$3.parseExprOps (~/node_modules/babylon/lib/index.js:3241:19)
    at Parser.pp$3.parseMaybeConditional (~/node_modules/babylon/lib/index.js:3218:19)
    at Parser.pp$3.parseMaybeAssign (~/node_modules/babylon/lib/index.js:3181:19)
    at Parser.parseMaybeAssign (~/node_modules/babylon/lib/index.js:5694:20)

I've seen the ignore option for Babel, but couldn't get it to work, and it looks like there are some issues with it anyway.

I've also seen webpack/webpack#1754.

In other projects I've seen that webpack is run first, but I'm not getting how to do this with your express setup.

If anyone has any ideas, please let me know. Thanks.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check your code at routes.js:10.

This is my routes.js file

import React from 'react'
import { Route, IndexRoute } from 'react-router'
import Layout from './components/Layout';
import IndexPage from './components/IndexPage';
import AthletePage from './components/AthletePage';
import NotFoundPage from './components/NotFoundPage';

const routes = (
  <Route path="/" component={Layout}>
    <IndexRoute component={IndexPage}/>
    <Route path="athlete/:id" component={AthletePage}/>
    <Route path="*" component={NotFoundPage}/>
  </Route>
);

export default routes;

Row 10 is:

<IndexRoute component={IndexPage}/>

And this is IndePage component source

import React, { Component } from 'react';
import AthletePreview from './AthletePreview';
import athletes from '../data/athletes';

export default class IndexPage extends Component {
  render() {
    return (
      <div className="home">
        <div className="athletes-selector">
          {athletes.map(athleteData => <AthletePreview key={athleteData.id} {...athleteData} />)}
        </div>
      </div>
    );
  }
}

really, I've no idea of what am I doing wrong.

I am getting this error after using new functionality in same library:

TypeError: window.addEventListener is not a function

There was another error: window is not defined which I fixed using
if (typeof window === 'undefined') {
global.window = {};
}

Can you help me out?

I am working through your amazing article building every js file step by step and finally i have reached this line: "NODE_ENV=production node_modules/.bin/webpack -p".
I have added npm script like this:
"scripts": {
"build": "NODE_ENV=production node_modules/.bin/webpack -p"
}
and get returned an error. And smart guys whispered me that as soon as i am on windows i should prepend script with "set" so i changed it to:
"build": "set NODE_ENV=production node_modules/.bin/webpack -p"

Now i got no errors but no bundle.js file is produced. Simply nothing.
Please help me to figure this out.

Hello,

Thank you for taking the time to read this.

I'm just curious,

Does the code for judo-heroes/src/data/athletes.js exist on the client or on the server?

If I replace those codes with data gotten from MongoDB, would my mongo codes be exposed on the client side?

Also, since this app is isomorphic/universal, I can simply use mongoDB from the client side? Or must I still call the REST endpoints from the frontend? (It's not recommended to use JQuery's AJAX anymore with React right?)

Hope to hear from you soon!