反応プロジェクトの単純なインポートが機能しません

Question

これは私のモジュールです。

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; 

これは簡単なモジュールで、独自のリポジトリで動作します。私はテストしているようにすべてがうまくいきます。

しかし、一度私はプライベートnpmにプロジェクトを公開し、それを使用し始めました。私はこのエラーが発生します。

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) 

そして、これは私がCannot find moduleを得るjsxせずにただExperimentへのパスを変更した場合ので、私はそれがモジュールを見つけたことを知っているが、なぜそれがだろう、私はよく分からないインポート行

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

ですそのようなエラー。

私はwebpackを使用しており、これは設定です。

'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

あなたはBabelでモジュールを解析していないようです。 webpackの設定は、configとsrcのモジュールのみを解析します。

（私の最善の策は import文です）、それはまだサポートされていないあなたはES6モジュールを実行しようとしているような音、そしてブラウザがES6で失速されます