反应webpack设置-无法将类作为函数调用

用户名

我目前对此不以为然。我在这里使用https://github.com/brettjthom/react-basic-table创建了一个小组件,该组件使用webpack对其进行捆绑。它适用于自包含的示例,但是一旦我尝试将其导入另一个项目(例如https://github.com/brettjthom/react-basic-table-test),它就会因错误而失败

Cannot call a class as a function

关于我哪里出了错的任何想法?

Webpack为主要组件。

var webpack = require('webpack');

// Options for Builds
var buildVar = process.argv.indexOf('-var') > -1;
var minify = process.argv.indexOf('-p') > -1;

// Different build types
var outputName = 'lib/react-basic-table';
outputName = outputName + (buildVar ? '-var' : '');
outputName = outputName + (minify ? '.min.js' : '.js');


var plugins = [
  new webpack.optimize.DedupePlugin()
]
if (minify) plugins.push(new webpack.optimize.UglifyJsPlugin()); 


module.exports = {
  entry: './src/index.jsx',

  module: {
    preLoaders: [
      { test: /\.jsx?$/, include: /src/, loaders: ['eslint?{fix:true}']}
    ],
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: {
        presets: ['react', 'es2015'],
        plugins: ["add-module-exports", "transform-es2015-modules-umd"]
      } }
    ]
  },

  externals: [{
    "react": {
        root: "React",
        commonjs2: "react",
        commonjs: "react",
        amd: "react"
    }
  }],

  output: {
    filename: outputName,
    libraryTarget: buildVar ? 'var' : 'umd',
    library: 'ReactBasicTable'
  },

  plugins: plugins,

  eslint: {
      failOnWarning: false,
      failOnError: true,
      configFile: './.eslintrc.js'
  },

  resolve: {
    extensions: ['', '.jsx', '.js']
  }
};

package.json用于主要组件

{
  "name": "react-basic-table",
  "version": "1.0.3",
  "description": "",
  "main": "./lib/react-basic-table.js",
  "dependencies": {
    "react": "^0.13.3",
    "classnames": "^2.1.5",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel": "^5.8.23",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-es2015-modules-umd": "^6.12.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "bootstrap": "^3.3.7",
    "eslint": "~2.11.1",
    "eslint-config-airbnb": "~9.0.1",
    "eslint-import-resolver-webpack": "~0.4.0",
    "eslint-loader": "~1.3.0",
    "eslint-plugin-import": "~1.12.0",
    "eslint-plugin-jsx-a11y": "~1.3.0",
    "eslint-plugin-react": "~5.1.1",
    "webpack": "^1.12.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-all": "node ./node_modules/webpack/bin/webpack.js && node ./node_modules/webpack/bin/webpack.js -p -d && node ./node_modules/webpack/bin/webpack.js -var -p -d && node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js",
    "build": "node ./node_modules/webpack/bin/webpack.js && node ./node_modules/webpack/bin/webpack.js -p -d && node ./node_modules/webpack/bin/webpack.js -var -p -d",
    "watch": "node ./node_modules/webpack/bin/webpack.js --watch",
    "build-example": "node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js",
    "watch-example": "node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js --watch",
    "lint": "eslint --fix ./src/**"
  },
  "author": "Brett Thom",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/brettjthom/react-basic-table.git"
  }
}

Webpack示例

var webpack = require('webpack');

var config = {
    entry: './index.jsx',
    output: {filename: 'bundle.js'},
    resolve: {
        extensions: ['', '.js', '.jsx'] 
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loaders: [
                'babel-loader?presets[]=react,presets[]=es2015',
            ]
        }]
    },
    plugins: []
}

module.exports = config;

例如package.json

{
  "name": "test-table",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "build": "node ./node_modules/webpack/bin/webpack.js"
  },
  "devDependencies": {
    "webpack": "~1.13.1",
    "babel-loader": "~6.2.4",
    "babel-preset-react": "~6.5.0",
    "babel-preset-es2015": "~6.9.0",
    "babel-core": "~6.9.1"
  },
  "dependencies": {
    "react": "~15.1.0",
    "react-dom": "~15.1.0",
    "react-basic-table": "^1.0.4"
  },
  "author": "",
  "license": "ISC"
}

谢谢

萧敬腾

更新

https://github.com/brettjthom/react-basic-table/blob/master/package.json第7行

"react": "~15.1.0", // from "^0.13.3"

重新构建库。然后就可以了。

React 0.14+在api方面有很大的变化。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TypeError:无法将类作为函数调用-ES6-Angular1.x-Webpack

react-redux错误无法将类作为函数调用

createSwitchNavigator-TypeError:无法将类作为函数调用

未捕获(承诺)TypeError:无法将类作为函数调用

reactJS-TypeError:无法将类作为函数调用

React HOC:TypeError:无法将类作为函数调用

TypeError:无法将类作为函数调用(React / Redux)

Vue:无法将类作为函数Apex调用

React / Redux TypeError:无法将类作为函数调用

无法设置反应组件的状态

无法在反应中设置状态

调用函数时无法将属性'innerHTML'设置为null

反应导航webpack链接“无法获取/ ...”

反应:将函数作为道具传递给子组件,在子组件中调用onClick

更新反应后发生错误:TypeError:如果没有| new |,则无法调用类构造函数

将函数反应到组件并使用函数返回设置状态

如果没有“ new”,则无法调用Polymer 3 + webpack + babel类构造函数PolymerElement

无法设置React / Babel / Webpack

使用反应钩子设置全局函数/变量

无法设置反应功能组件的状态

反应 - 无法设置未定义的属性

日期设置无法在反应“ useState”中使用

无法在反应中正确设置状态

反应:无法在表单中设置值

获取后反应无法设置状态

在应用applyMiddleware(thunk)时,在react js中获取“无法将类作为函数调用”

ReactJS-未捕获的TypeError:无法将类作为函数调用

TypeError:运行Jest测试时无法将类作为函数调用

TypeError:部署到Netlify后无法将类作为函数调用吗?