我在同构的react应用程序中尝试使用react砖石组件时出错。
有人知道是什么导致了这个错误吗？
我在这个版本中使用了es6、webpack和babel。
错误如下：
TypeError: Cannot read property 'bool' of undefined
at new MasonryComponent (/Users/pvijeh/projects/sull-isom/node_modules/react-masonry-component/lib/index.js:15:49)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactCompositeComponent.js:148:18)
at [object Object].wrapper [as mountComponent] (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactReconciler.js:37:35)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactCompositeComponent.js:225:34)
at [object Object].wrapper [as mountComponent] (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactReconciler.js:37:35)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactCompositeComponent.js:225:34)
at [object Object].wrapper [as mountComponent] (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactReconciler.js:37:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactMultiChild.js:241:44)
at ReactDOMComponent.Mixin._createContentMarkup (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactDOMComponent.js:591:32)
at ReactDOMComponent.Mixin.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactDOMComponent.js:479:29)
at Object.ReactReconciler.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactReconciler.js:37:35)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactCompositeComponent.js:225:34)
at [object Object].wrapper [as mountComponent] (/Users/pvijeh/projects/sull-isom/node_modules/react/lib/ReactPerf.js:66:21)
这是我的webpack配置文件：
/**
* React Starter Kit (http://www.reactstarterkit.com/)
*
* Copyright © 2014-2015 Kriasoft, LLC. All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/
import path from 'path';
import webpack from 'webpack';
import merge from 'lodash.merge';
const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
const WATCH = global.WATCH === undefined ? false : global.WATCH;
const AUTOPREFIXER_BROWSERS = [
'Android 2.3',
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1',
];
const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
__DEV__: DEBUG,
};
//
// Common configuration chunk to be used for both
// client-side (app.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------
const config = {
output: {
publicPath: '/',
sourcePrefix: ' ',
},
cache: DEBUG,
debug: DEBUG,
stats: {
colors: true,
reasons: DEBUG,
hash: VERBOSE,
version: VERBOSE,
timings: true,
chunks: VERBOSE,
chunkModules: VERBOSE,
cached: VERBOSE,
cachedAssets: VERBOSE,
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
],
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
},
module: {
loaders: [
{
test: /.jsx?$/,
include: [
path.resolve(__dirname, '../node_modules/react-routing/src'),
path.resolve(__dirname, '../src'),
],
loader: 'babel-loader',
}, {
test: /.json$/,
loader: 'json-loader',
}, {
test: /.txt$/,
loader: 'raw-loader',
}, {
test: /.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
}, {
test: /.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
}, {
test: /.scss$/,
loader: 'style-loader/useable!css-loader!postcss-loader',
}, {
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /masonry|imagesloaded|fizzy-ui-utils|desandro-|outlayer|get-size|doc-ready|eventie|eventemitter/,
loader: 'imports?define=>false&this=>window'
}
],
},
postcss: function plugins(bundler) {
return [
require('postcss-import')({ addDependencyTo: bundler }),
require('precss')(),
require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
require('css-mqpacker')(),
require('csswring')()
// require('cssnano')({discardComments: {removeAll: true}})
];
},
};
//
// Configuration for the client-side bundle (app.js)
// -----------------------------------------------------------------------------
const appConfig = merge({}, config, {
entry: [
...(WATCH ? ['webpack-hot-middleware/client'] : []),
'./src/app.js',
],
output: {
path: path.join(__dirname, '../build/public'),
filename: 'app.js',
},
// Choose a developer tool to enhance debugging
// http://webpack.github.io/docs/configuration.html#devtool
devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
plugins: [
new webpack.DefinePlugin(GLOBALS),
...(!DEBUG ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: VERBOSE,
},
}),
new webpack.optimize.AggressiveMergingPlugin(),
] : []),
...(WATCH ? [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
] : []),
],
});
// Enable React Transform in the "watch" mode
appConfig.module.loaders
.filter(x => WATCH && x.loader === 'babel-loader')
.forEach(x => x.query = {
// Wraps all React components into arbitrary transforms
// https://github.com/gaearon/babel-plugin-react-transform
plugins: ['react-transform'],
extra: {
'react-transform': {
transforms: [
{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module'],
}, {
transform: 'react-transform-catch-errors',
imports: ['react', 'redbox-react'],
},
],
},
},
});
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = merge({}, config, {
entry: './src/server.js',
output: {
path: './build',
filename: 'server.js',
libraryTarget: 'commonjs2',
},
target: 'node',
externals: [
function filter(context, request, cb) {
const isExternal =
request.match(/^[@a-z][a-z/.-0-9]*$/i) &&
!request.match(/^react-routing/) &&
!context.match(/[\/]react-routing/);
cb(null, Boolean(isExternal));
},
],
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin(GLOBALS),
new webpack.BannerPlugin('require("source-map-support").install();',
{ raw: true, entryOnly: false }),
],
});
// Remove `style-loader` from the server-side bundle configuration
serverConfig.module.loaders
.filter(x => x.loader.startsWith('style-loader/useable!'))
.forEach(x => x.loader = x.loader.substr(21));
export default [appConfig, serverConfig];
这是我的包裹=项目的json文件：
{
"private": true,
"engines": {
"node": ">=4.1 <5",
"npm": ">=3.1 <4"
},
"dependencies": {
"babel-core": "5.8.33",
"bluebird": "3.0.5",
"classnames": "2.2.0",
"eventemitter3": "1.1.1",
"exenv": "^1.2.0",
"express": "4.13.3",
"fastclick": "1.0.6",
"fbjs": "0.4.0",
"flux": "2.1.1",
"front-matter": "2.0.0",
"history": "1.13.1",
"imports-loader": "^0.6.5",
"jade": "1.11.0",
"jquery": "^2.1.4",
"lodash": "^3.10.1",
"normalize.css": "3.0.3",
"object-assign": "^4.0.1",
"postcss-mixins": "^3.0.2",
"react": "0.14.2",
"react-dom": "0.14.2",
"react-routing": "0.0.5",
"source-map-support": "0.3.3",
"superagent": "1.4.0"
},
"devDependencies": {
"autoprefixer": "^6.1.0",
"babel": "^5.8.34",
"babel-eslint": "^4.1.4",
"babel-loader": "^5.3.3",
"babel-plugin-react-transform": "^1.1.1",
"browser-sync": "^2.9.12",
"css-loader": "^0.23.0",
"css-mqpacker": "^4.0.0",
"csscomb": "^3.1.8",
"csswring": "^4.0.0",
"del": "^2.0.2",
"eslint": "^1.8.0",
"eslint-config-airbnb": "1.0.0",
"eslint-loader": "^1.1.1",
"eslint-plugin-react": "^3.7.1",
"file-loader": "^0.8.4",
"gaze": "^0.5.2",
"git-repository": "^0.1.1",
"glob": "^6.0.1",
"jest-cli": "^0.7.1",
"jscs": "^2.5.0",
"lodash.merge": "^3.3.2",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"postcss": "^5.0.10",
"postcss-import": "^7.1.3",
"postcss-loader": "^0.8.0",
"precss": "^1.3.0",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.1.1",
"replace": "^0.3.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.3",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.5.0"
},
"jest": {
"rootDir": "./src",
"scriptPreprocessor": "../preprocessor.js",
"unmockedModulePathPatterns": [
"fbjs",
"react"
]
},
"scripts": {
"lint": "eslint src tools && jscs src tools",
"csslint": "csscomb src/components --lint --verbose",
"csscomb": "csscomb src/components --verbose",
"test": "eslint src && jest",
"clean": "babel-node tools/run clean",
"copy": "babel-node tools/run copy",
"bundle": "babel-node tools/run bundle",
"build": "babel-node tools/run build",
"deploy": "babel-node tools/run deploy",
"serve": "babel-node tools/run serve",
"start": "babel-node tools/run start"
}
}
您使用的是哪种版本的react砖石组件？我在尝试将它与ES6一起使用时遇到了同样的问题。它与Github上的这个问题有关，因为它必须将React作为依赖项注入，而不是作为NPM的peerDependency包含。它可能已经在版本3中修复，值得一看。
我的解决方案是重写文件本身，尽管这只是一个临时措施。
var React = require('react');
var MasonryComponent = React.createClass({
...
而不是
function MasonryComponent(React) {
编辑：看起来我所做的基本上包括在这个提交中：https://github.com/eiriklv/react-masonry-component/commit/15332d77a1a393c4971249c3fc4eae65b13663fa