when I try to use office ui fabric in my project and import a component, such as a panel, I have this error Screen . I also recorded this behavior. https://giphy.com/gifs/3ohjV6gZTxE8TiqVfa
Steps:
- I created a project using * dotnet new react *
- I install office on * npm --sare install office-ui-fabric-react *
- I import the Fabric component into boot.tsx and I use it.
- I import the Panel component into Layout.tsx and I use it.
- When I clicked the activation button, an Exception error appeared in the console * Layer.componentDidUpdate (): Invariant Violation: addComponentAsRefTo (...): Only ReactOwner can have links. You may have added a ref link to a component that was not created in the `render` component, or you have several copies of React loaded *
I put my code in a repo https://bitbucket.org/vaalgrindalone/dotnet-react-template-office-fabric-ui-issue/src This is my .json package
{ "name": "dotnet_react_template_office_fabric_ui_issue", "private": true, "version": "0.0.0", "devDependencies": { "@types/history": "4.6.2", "@types/react": "^16.0.36", "@types/react-dom": "16.0.3", "@types/react-hot-loader": "3.0.5", "@types/react-router": "4.0.21", "@types/react-router-dom": "4.2.3", "@types/webpack-env": "1.13.5", "aspnet-webpack": "^2.0.1", "aspnet-webpack-react": "^3.0.0", "awesome-typescript-loader": "3.4.1", "bootstrap": "4.0.0", "css-loader": "0.28.9", "event-source-polyfill": "0.0.12", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.6", "isomorphic-fetch": "2.2.1", "jquery": "3.3.1", "json-loader": "0.5.7", "react": "16.2.0", "react-dom": "16.2.0", "react-hot-loader": "3.1.3", "react-router-dom": "4.2.2", "style-loader": "0.20.1", "typescript": "2.7.1", "url-loader": "0.6.2", "webpack": "3.10.0", "webpack-hot-middleware": "2.21.0" }, "dependencies": { "@types/prop-types": "^15.5.2", "office-ui-fabric-react": "^5.48.2" } }
This is webpack.config.js
const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; const bundleOutputDir = './wwwroot/dist'; module.exports = (env) => { const isDevBuild = !(env && env.prod); return [{ stats: { modules: false }, entry: { 'main': './ClientApp/boot.tsx' }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] }, output: { path: path.join(__dirname, bundleOutputDir), filename: '[name].js', publicPath: 'dist/' }, module: { rules: [ { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }, { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, plugins: [ new CheckerPlugin(), new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [ // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin('site.css') ]) }]; };
And tsconfig.ts
{ "compilerOptions": { "baseUrl": ".", "module": "es2015", "moduleResolution": "node", "target": "es5", "jsx": "react", "sourceMap": true, "skipDefaultLibCheck": true, "strict": true, "types": ["webpack-env"], "experimentalDecorators": true }, "exclude": [ "bin", "node_modules" ] }
I am trying to make an alias in webpack using resolve.alias, but nothing happens. I am also trying to put a reaction to an external one and import it from cdn into an html file, but this is not a good solution. I believe my configuration is incorrect.
Greetings.