我在我的应用程序上安装了material-ui，当从材料中调用任何组件时，我收到此错误：
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 (details: .
这是我的package.json：
{
"name": "",
"version": "1.0.0",
"description": "",
"engines": {
"npm": ">=3"
},
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm-run-all --parallel start-message",
"start": "npm-run-all --parallel test:watch open:src lint:watch",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && npm run open:dist",
"test": "jest",
"test:CI": "babel-node tools/testCi.js",
"test:cover": "npm run test -- --coverage ",
"test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "npm run test -- --watch",
"open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
"author": "David Shusterman",
"license": "MIT",
"dependencies": {
"bootstrap": "3.3.7",
"material-ui": "0.18.7",
"object-assign": "4.1.0",
"react-collapsible": "1.5.0",
"react-redux": "5.0.5",
"react-router": "3.0.5",
"react-router-redux": "4.0.8",
"react-tap-event-plugin": "2.0.1",
"redux": "3.6.0",
"redux-infinite-scroll": "1.0.9",
"redux-thunk": "2.1.0"
},
"devDependencies": {
"react": "15.5.4",
"react-dom": "15.5.4",
"autoprefixer": "7.1.2",
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-react-constant-elements": "6.23.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.6",
"babel-polyfill": "6.23.0",
"babel-preset-env": "1.6.0",
"babel-preset-react": "6.24.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.24.1",
"babel-preset-stage-1": "6.24.1",
"babel-preset-stage-2": "6.24.1",
"browser-sync": "2.18.12",
"chalk": "2.0.1",
"connect-history-api-fallback": "1.3.0",
"coveralls": "2.13.1",
"css-loader": "0.28.4",
"enzyme": "2.9.1",
"eslint": "4.2.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-react": "7.1.0",
"eslint-watch": "3.1.2",
"extract-text-webpack-plugin": "3.0.0-rc.2",
"file-loader": "0.11.2",
"html-webpack-plugin": "2.29.0",
"identity-obj-proxy": "3.0.0",
"jest": "20.0.4",
"jest-cli": "20.0.4",
"json-loader": "0.5.4",
"mockdate": "2.0.1",
"node-sass": "4.5.3",
"npm-run-all": "4.0.2",
"opn-cli": "3.1.0",
"postcss-loader": "1.2.1",
"prompt": "1.0.0",
"prop-types": "15.5.10",
"react-hot-loader": "3.0.0-beta.6",
"react-test-renderer": "15.5.4",
"redux-immutable-state-invariant": "2.0.0",
"replace": "0.3.0",
"rimraf": "2.6.1",
"sass-loader": "6.0.6",
"style-loader": "0.18.2",
"url-loader": "0.5.9",
"webpack": "3.1.0",
"webpack-bundle-analyzer": "2.8.2",
"webpack-dev-middleware": "1.11.0",
"webpack-hot-middleware": "2.18.2",
"webpack-md5-hash": "0.0.5"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0",
"redux": "^2.0.0 || ^3.0.0"
},
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "identity-obj-proxy",
"^.+\\.(gif|ttf|eot|svg|woff|woff2|ico)$": "<rootDir>/tools/fileMock.js"
}
},
"babel": {
"presets": [
"react",
"stage-0",
"stage-1",
"stage-2"
],
"env": {
"development": {
"presets": [
"env",
"react-hmre",
"stage-0",
"stage-1",
"stage-2"
]
},
"production": {
"presets": [
[
"env",
{
"es2015": {
"modules": false
}
}
]
],
"plugins": [
"transform-class-properties",
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
},
"test": {
"presets": [
"env"
]
}
}
},
"eslintConfig": {
"root": true,
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"plugins": [
"react"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jquery": true,
"jest": true
},
"rules": {
"quotes": 0,
"no-console": 1,
"no-debugger": 1,
"no-var": 1,
"semi": [
1,
"always"
],
"no-trailing-spaces": 0,
"eol-last": 0,
"no-underscore-dangle": 0,
"no-alert": 0,
"no-lone-blocks": 0,
"jsx-quotes": 1,
"react/display-name": [
1,
{
"ignoreTranspilerName": false
}
],
"react/forbid-prop-types": [
1,
{
"forbid": [
"any"
]
}
],
"react/jsx-boolean-value": 0,
"react/jsx-closing-bracket-location": 0,
"react/jsx-curly-spacing": 1,
"react/jsx-indent-props": 0,
"react/jsx-key": 1,
"react/jsx-max-props-per-line": 0,
"react/jsx-no-bind": 0,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-literals": 0,
"react/jsx-no-undef": 1,
"react/jsx-pascal-case": 1,
"react/jsx-sort-prop-types": 0,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/jsx-wrap-multilines": 1,
"react/no-danger": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-direct-mutation-state": 1,
"react/no-multi-comp": 1,
"react/no-set-state": 0,
"react/no-unknown-property": 1,
"react/prefer-es6-class": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"import/extensions": 1,
"react/self-closing-comp": 1,
"react/sort-comp": 1
},
"globals": {}
}
}
这是我的webpack.config：
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
export default {
resolve : {
alias: {
react: path.resolve('./node_modules/react'),
},
extensions: [
'*', '.js', '.jsx', '.json'
]
},
devtool : 'eval-source-map',
entry : [
// must be first entry to properly set public path
'./src/webpack-public-path',
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
],
target : 'web',
output : {
path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins : [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
template: 'src/index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true
},
inject: true
}),
new webpack.LoaderOptionsPlugin({
minimize: false, debug: true, noInfo: true, // set to false to see a list of every file being bundled.
options: {
sassLoader: {
includePaths: [path.resolve(__dirname, 'src', 'scss')]
},
context: '/',
postcss: () => [autoprefixer]
}
})
],
module : {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel-loader']
}, {
test: /\.eot(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader'
}, {
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
}, {
test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}, {
test: /\.(jpe?g|png|gif)$/i,
loader: 'file-loader?name=[name].[ext]'
}, {
test: /\.ico$/,
loader: 'file-loader?name=[name].[ext]'
}, {
test: /(\.css|\.scss|\.sass)$/,
loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
}
]
}
};
我将非常感谢您的帮助。我几乎尝试过所有事情 - 重新安装nodemodules - 添加外部 - 切换对package.json的依赖性
请帮助：）