React Masonry插件：TypeError：无法读取未定义的属性'bool'

时间：2016-01-07 21:10:02

标签： reactjs webpack babeljs react-masonry

尝试在同构反应应用程序中使用react-masonry组件时出错。

有没有人对可能导致此错误的原因有任何了解？

我在这个版本中使用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"
  }
}

1 个答案:

答案 0 :(得分：0)

您使用的是反应 - 砌体组件的哪个版本？尝试与ES6一起使用时，我遇到了同样的问题。它与此issue on 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

相关问题
最新问题