Question

我已经老了

invariant.js:44 Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

refs绝对不是问题（它们在render方法中，并且在删除后问题仍然存在）。我也没有多个反应副本 - 在node_modules中没有一个额外的副本，npm ls react返回一个实例，我没有安装反应插件。我正在使用webpack。

在webpack配置中添加别名没有帮助，重新安装依赖项没有帮助，删除反应并从外部链接npm / webpack没有帮助。

这是我的webpack配置：

render

和我的依赖

module.exports = {
    watch: true,
    entry: "./components/FreshInvestigationForm/FreshInvestigationForm.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    devtool: "source-map",    
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", "css"]
    },    
    module: {
        rules: [
            {
                test: /\.ts|\.tsx$/,
                use: ["babel-loader","awesome-typescript-loader"]
            },
            {
                test: /\.css?$/,
                use: ["css-loader"]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader?name=public/fonts/[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: ['file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false']
            },
            {
                enforce: "pre",
                test: /\.js$|\.jsx$/,
                use: ["babel-loader", "source-map-loader"]
            }
        ]
    }
};

同样，这是一个多么可怕的错误，几乎每个解决它的人都以不同的方式做到了。

编辑：

我设法将问题缩小了一些，有几个组件触发了错误，但我无法确定问题。所有这些都在这样的地方召唤：

 "dependencies": {
    "@types/react": "15.0.30",
    "@types/react-dom": "^15.5.1",
    "awesome-typescript-loader": "^3.2.1",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "source-map": "^0.5.6",
    "style-loader": "^0.18.2",
    "typescript": "^2.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "image-webpack-loader": "^3.3.1",
    "source-map-loader": "^0.2.1",
    "typescript-simple-loader": "^0.3.8",
    "webpack": "^3.3.0"
  }

这是违规组件中最短的一个。不要误导它有一个参考，删除它不会改变什么

listToRender.forEach((item: field, index: number) => {
            const subGroup: Object = item.hasOwnProperty("subGroup") ? item.subGroup : null;
            const isDropdown = this.state.dropdowns[item.value] !== undefined;
            const isSearchDropdown = this.state.searchDropdowns.indexOf(item.value) > -1;
            const isMultiYear = this.state.multiYear.indexOf(item.value) > -1;
            const isMultipleSelection = this.state.multipleSelectionDropdowns.indexOf(item.value) > -1;
             if (isSearchDropdown) {
                listElems.push(<SearchSelectFormElem /> }
else {and so on for other possibilities}
return(<ul>{listToRender}</ul>)

Answer 1

正如我之前所写，错误很糟糕，错误信息无益。

实际的原因是jquery（项目正在迁移以作出反应，但依赖于一些jquery插件）。尽管工作正常，但反应只允许通过导入调用它。一旦我开始像这样打电话

import * as $ from 'jquery'

该应用程序再次开始运作。

“只有一个ReactOwner可以拥有引用”，尽管运行一个反应副本并且没有损坏的引用

1 个答案: