通天装载机，的WebPack，ES2015模块：“元素类型无效”

Github上回购与一切：https://github.com/b-paul/react-lifecycle 通天装载机，的WebPack，ES2015模块：“元素类型无效”

更新12/18：这个问题很大一部分是用于运行项目的NPM命令。我注意到npm build没有成功，但是npm start报告建好。以下全面回答为什么没有按预期工作。这个问题的其余部分是为后代保留的。

我遇到了第一个webpack项目的基本设置问题。我使用的反应，巴别，以下webpack.config.js：

var path = require('path'); 

module.exports = { 
    entry: [ path.resolve('./js/app.js'), 
      'webpack-dev-server/client?http://localhost:8080' ], 
    output: { 
    path: path.resolve('./js/build'), 
    filename: 'app.min.js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.jsx?$/, 
     loader: 'babel', 
     query: { 
      presets: ['react', 'stage-1', 'es2015'] 
     }, 
     include: path.resolve('js/') } ] 
    }, 
    devtool: 'source-map' 
};

js/app.js

import Lifecycle from './components/lifecycle'; 
import React from 'react'; 
import {render} from 'react-dom'; 

var shell = document.createElement('div'); 
shell.className = 'app-shell'; 
document.body.appendChild(shell); 
render(<Lifecycle />, shell);

js/components/lifecycle.js

import React from 'react'; 

class Lifecycle extends React.Component { 
    render() { 
    return (
     <div>Hello, world</div> 
    ); 
    } 
} 

export default Lifecycle;

上面建立没有错误，但它不会呈现“你好，世界“。我得到错误，“不变的违规：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。”在浏览器控制台中。

我可以尽可能试图检查是否我的模块Lifecycle是ES6模块（巴别将其识别为这样），我们期望它有内部模块对象上的属性default一些生成巴别码（它不跟踪此“T）。下面是生成的代码：

/* 0 */ 
/***/ function(module, exports, __webpack_require__) { 

    'use strict'; 

    var _lifecycle = __webpack_require__(1); 

    var _lifecycle2 = _interopRequireDefault(_lifecycle); 

    var _react = __webpack_require__(2); 

    var _react2 = _interopRequireDefault(_react); 

    var _reactDom = __webpack_require__(159); 

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

    (0, _reactDom.render)(_react2.default.createElement(_lifecycle2.default, null), document.body); 

/***/ }

最后说明一点：我引用https://github.com/code0wl/react-example-es2015几次设置，我可以克隆和构建例如回购与没有问题工作程序。我意识到我一定错过了回购中发生的一些重要部分，但我看不到它。

来源

2015-12-17 b-paul

这个问题应该被称为“为什么不是我NPM脚本更新我的包。“

在开发早期的某个时候，我已经成功地将我的代码与webpack捆绑在一起。该软件包在磁盘上为js/build/app.min.js。在那之后，我认为我使用package.json的NPM脚本来重建每次更改的应用程序，但是在浏览器中，我仍然从原始包中获取旧的行为。我错过了两个事实：

事实1：npm build是公认的NPM命令，但它不从调用package.jsonscripts.build。至于@ zhongjie-wu的answer，我需要做npm run build。 npm start，另一方面，确实调用scripts.start，它成功地与webpack-dev-server建立一个捆绑。

情况2：webpack-dev-server服务重建束时，不会从所述的WebPack配置文件识别output.path作为路径的一部分。正因为如此，给定我使用的配置，webpack生成到/js/build/app.min.js，但webpack-dev-server从内存为/app.min.js提供该捆绑。由于我的HTML引用了原文，所以我没有看到dev服务器包。

来源

2015-12-18 16:57:33

是否有理由在app.js中动态创建应用的容器div，而不是仅仅将它放入index.html？我克隆你的回购协议，并得到了应用程序通过进行以下修改建：

的index.html：

<body> 
    <div id="app-shell"></div> 
    <script type="application/javascript" src="js/build/app.min.js"></script> 
</body>

app.js

import React from 'react'; 
import {render} from 'react-dom'; 
import Lifecycle from './components/lifecycle'; 

render(<Lifecycle />, document.getElementById('app-shell'));

我觉得“Element type is invalid”错误是一只红鲱鱼。在此之前，我看到：

警告：React.createElement：类型不能为空，未定义，布尔或数字。它应该是一个字符串（对于DOM元素）或一个 ReactClass（对于复合组件）.warning @ app.min.js：2233createElement @ app.min.js：19531（匿名函数）@ app.min.js： 61__webpack_require__ @ app.min.js：20（匿名函数）@ app.min.js：40（匿名函数）@ app.min.js：43 app.min.js：2233 警告：render（）：渲染组件直接写入文件。由于其子女经常被第三方脚本和浏览器扩展操纵，因此不鼓励身体。这可能会导致微妙的调解问题。尝试渲染为您的应用程序创建的容器元素。

这可能是因为你正在创造app.js壳单元的方式......

来源

2015-12-18 01:11:17

作品对我来说

git clone https://github.com/b-paul/react-lifecycle.git 
cd react-lifecycle.git 
npm install 
npm run build 
npm run start 
# go to http://localhost:8090/index.html

来源

2015-12-18 01:37:06

Layout.js

export default class Layout extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <div className="Layout"> 

     </div> 
    ) 
    } 
};

.babelrc 需要添加阶段1预置尝试transpiling类

{ 
     "presets": ["stage-1", "es2015", "react"], 
     "plugins": ["transform-runtime"] 
    }

和入境文件需要做的ES5出口：

import React from 'react'; 
import Layout from './Layout'; 
import {render} from 'react-dom'; 

if (typeof document !== 'undefined') { 
    render(<Layout />, document.getElementById('app')); 
} 

module.exports = Layout;

其为我工作

来源

2015-12-19 20:01:47

通天装载机，的WebPack，ES2015模块：“元素类型无效”

回答

相关问题