Troubles importing using Webpack

[janmyler]

Hi, we're using Webpack (1.10.1) to bundle the app together. I'm getting the following error when I import react-intl. Just asking if somebody didn't have the same issue or an idea why it could be so.

ERROR in ./~/react-intl/src/react.js
Module parse failed: /Users/jan/www/travelperk/web-client/node_modules/react-intl/src/react.js Line 7: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| // supports external modules. This is a hack for now that provides the local
| // modules a referece to React.
| export default React;
|
 @ ./~/react-intl/index.js 6:15-31

[caridy]

How are you requiring the module? Normally, you will do require('react-intl') and we put some provision in place to avoid bundling all locales, more info here: 60bdb48

[janmyler]

I'm requiring it as you said, it shows what I posted above. I'm only not sure if it's not because of something wrong in our Webpack configuration, however, all the other libs we use work fine.

[caridy]

Can you provide a repro case? This is weird before it is clearly trying to use files from src/, which are ES6 modules, instead it should be getting files from lib/.

[janmyler]

I cannot share our repo, as it's private at the moment, however, we did some changes so I will try to use it again and if it doesn't work, I will try to create a small repo with similar architecture we use to see if the problem persists.

[janmyler]

Ok, so I've tried to play around with a similar setup only based on react-hot-boilerplate. Everything worked fine there, so it looks like an error somewhere in our setup. I think you can close this one.

[JJB1980]

Hi, we're also receiving the same error when running tests. Any info on how this problem was solved?

webpack.config.test.js:

'use strict';

var path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  resolve: {
    alias: {
      properties: path.resolve(process.cwd(), 'properties'),
      test: path.resolve(process.cwd(), 'src/test')
    },
    modulesDirectories: ['src/shared/', 'node_modules/', 'bower_components', 'src'],
    extensions: ['', '.js']
  },
  externals: ['sinon'],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['imports?this=>window&global=>window', 'babel?stage=1&optional[]=runtime&plugins=rewire&cacheDirectory'],
      exclude: /(node_modules|bower_components)/
    }, {
      test: /\.(ttf|eot|svg|png)$/,
      loader: 'file'
    }, {
      test: /\.less$/,
      loader: 'null'
    }, {
      test: /\.json$/,
      loader: 'json'
    }],
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
  }
};

[janmyler]

So in our case, the problem was we had src folder in modulesDirectories config array (you have it there also I see). This way, webpack was resolving modules from src/ and not from lib/ as @caridy mentioned.

We renamed our app's root to client and we have no problems since then.

[JJB1980]

@janmyler Thanks for the info! Looks like it's also the problem here.

[caridy]

maybe we should rename our src folder to something else. or just open a bug on webpack to ignore moduleDirectories rules in deps.