Question

我正在尝试构建此包： https://github.com/searchkit/searchkit/（版本v0.10.1）

使用webpack并将其与我的模块一起使用：

node v6.1.0
npm v3.8.6

构建策略：

从github获取存储库
npm install
npm run build

inside / node_modules /

没什么特别的。

但是在尝试使用我的组件的这个模块后，我得到了那些案例。

案例是，如果我建立： searchkit / SRC /核心/反应/ SearchkitProvider.tsx

import * as React from "react";
import {SearchkitManager} from "../SearchkitManager"

export interface SearchkitProps {
    searchkit:SearchkitManager
    children?:any
}

export class SearchkitProvider extends React.Component<SearchkitProps,any> {

    static childContextTypes = {
        searchkit:React.PropTypes.instanceOf(SearchkitManager)
    }

    static propTypes = {
        searchkit:React.PropTypes.instanceOf(SearchkitManager).isRequired,
        children:React.PropTypes.element.isRequired
    }

    componentWillMount() {
        this.props.searchkit.setupListeners()
    }

    componentDidMount(){
        this.props.searchkit.completeRegistration()
    }

    componentWillUnmount(){
        this.props.searchkit.unlistenHistory()
    }

    getChildContext(){
        return {searchkit:this.props.searchkit}
    }

    render(){
        return (
            <div>IT DOES WORK!!</div>
        );
    }
}

使用

class Listing extends React.Component {
    render() {
       return (
       <div>
            <SearchkitProvider searchkit={searchkit}>
                <div></div>
              </SearchkitProvider>          
       </div>
       );
    }
}

它可以正常使用正确的响应，但如果我将模块的源更改为：

export class SearchkitProvider extends React.Component<SearchkitProps,any> {

    (...)

    render(){
        return (
            <div><input ref="REF" /></div>
        );
    }
}

它抛出此错误未捕获错误：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向未在组件的render方法中创建的组件添加引用，或者您已经加载了多个React副本。

在我做这种改变的时候，我不确定是什么依赖？我是否应该查找重复的React实例，即使它在我没有使用ref的输入时也能正常工作？

Webpack.config.js：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const copyrightBanner = require("fs").readFileSync("./COPYRIGHT", "utf-8")
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: {
    "ignore":['./theming/index.ts'],
    "bundle":['./src/index.ts']
  },
  output: {
    path: path.join(__dirname, 'release'),
    filename: '[name].js',
    library:["Searchkit"],
    libraryTarget:"umd",
    publicPath: '',
    css: 'theme.css'
  },
  resolve: {
    extensions:[".js", ".ts", ".tsx","", ".webpack.js", ".web.js", ".scss"],
    alias: { react: path.resolve('../react') }
  },
  postcss: function () {
    return [autoprefixer]
  },
  plugins: [
    new webpack.BannerPlugin(copyrightBanner, {entryOnly:true}),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new ExtractTextPlugin("theme.css", {allChunks:true}),
    new webpack.optimize.UglifyJsPlugin({
      mangle: {
        except: ['require', 'export', '$super']
      },
      compress: {
        warnings: false,
        sequences: true,
        dead_code: true,
        conditionals: true,
        booleans: true,
        unused: true,
        if_return: true,
        join_vars: true,
        drop_console: true
      }
    })
  ],
  externals: {
    "react": "React",
    "react-dom":"ReactDOM"
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loaders: ['ts'],
        include: [path.join(__dirname, 'src'),path.join(__dirname, 'theming')]
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(require.resolve("style-loader"),require.resolve("css-loader")+"!"+require.resolve("postcss-loader")+"!"+require.resolve("sass-loader")),
        include: path.join(__dirname, 'theming')
      },
      {
        test: /\.(jpg|png|svg)$/,
        loaders: [
            'file-loader?name=[path][name].[ext]'
        ],
        include: path.join(__dirname, 'theming')
      }
    ]
  }
};

npm ls反应：

├── react@0.14.8
└─┬ UNMET PEER DEPENDENCY searchkit@0.10.1
  └── react@0.14.8

npm ERR! peer dep missing: searchkit@0.9.x, required by searchkit-multiselect@0.0.1

React的未捕获错误：使用webpack构建后的addComponentAsRefTo

0 个答案: