React 项目简单导入不起作用答案

【问题标题】：React project simple import doesn't workReact 项目简单导入不起作用
【发布时间】：2017-04-27 21:24:29
【问题描述】：

这是我的模块。

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)

这是导入行

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

如果我将路径更改为仅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
};

【问题讨论】：

标签： javascript node.js reactjs webpack babeljs

【解决方案1】：

听起来你没有用 Babel 解析你的模块。 webpack 配置现在只解析 config 和 src 中的模块。

听起来您正在尝试执行 ES6 模块，而您的浏览器在它还不支持的 ES6 上停滞不前（我最好的选择是 import 语句）

【讨论】：