React project simple import doesn't work

Question

This is my module.

src/components/Experiment.jsx

import React from 'react';

class Experiment extends React.Component {

  render() {
    if (Array.isArray(this.props.children)) {
      const activeVariant = this.props.children.filter((c) => {
        return c.props.id === this.props.activeVariant;
      });

      return (
        <div>
          {activeVariant}
        </div>
      );
    }
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
};

export default Experiment;

It's a simple module and it works on its own repository. Like I have a test and everything is working fine.

However, once I published the project to a private npm and started using it. I get this error.

SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:414:25)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/ncharass/MyProjects/CN/project/lib/app/views/pages/app/views/pages/article.js:16:1)

And this is the import line

import Experiment from '@organization/project/src/components/Experiment.jsx';

If I changed the path to just Experiment without jsx I get Cannot find module so I know that it found the module but I'm not sure why it would error out like that.

I use webpack and this is the config.

'use strict';

var path = require('path');
var webpack = require('webpack');
var env = process.env.NODE_ENV || 'development';

module.exports = {
  devtool: env === 'development' ? '#cheap-inline-source-map' : '',
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        include: [
          /config/,
          /src/
        ],
        query: {
          babelrc: false,
          presets: [
            'es2015-webpack',
            'react'
          ]
        }
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'transform?envify',
        cacheable: true
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modules: [
      path.resolve('./src'),
      './node_modules'
    ]
  },
  plugins: env !== 'development' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        unused: true,
        dead_code: true //eslint-disable-line camelcase
      },
      output: {
        comments: false
      },
      sourceMap: true
    })
  ] : null
};

Answer 1

Sounds like you're not parsing your module with Babel. The webpack config right now only parses modules in config and src .

Sounds like you're trying to execute a ES6 module, and your browser is stalling on an ES6 it doesn't support yet (my best bet is the import statement)