React 프로젝트의 간단한 가져 오기가 작동하지 않습니다.

이것은 내 모듈입니다.React 프로젝트의 간단한 가져 오기가 작동하지 않습니다.

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)

내가 jsx없이 경로 만 Experiment을 변경 한 경우이 가져 오기 라인

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

이다 나는 그것을 모듈을 찾을 것을 알 수 있도록 Cannot find module 얻을 그러나 나는 왜 것 확실하지 않다 그런 오류.

필자는 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 
};

출처

2016-12-12 toy

바벨로 모듈을 구문 분석하지 않는 것 같습니다. webpack 설정은 이제 config 및 src의 모듈 만 구문 분석합니다. 당신이 ES6 모듈을 실행하려는처럼

는 소리, 그리고 브라우저가 아직 지원하지 않는 ES6에 실속한다

(내 가장 좋은 방법은 import 성명)

출처

2017-01-22 11:44:34

React 프로젝트의 간단한 가져 오기가 작동하지 않습니다.

답변

관련 문제