I have a component (a form) which is based on office ui fabric. The form is working fine in my react application. However, since we need this at multiple places, we decided to make it an npm package.
I extracted the component and can implement it in my app. I can fill out textfields and save and it works properly. However, as soon as I open a dropdown or datepicker (basically a "Callout" from office ui fabric), I get the following error message:
"Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue."
and:
"react-dom.development.js:14227 The above error occurred in the component:
in LayerBase
in CustomizedLayer
in StyledCustomizedLayer
in Callout
in div
in NormalPeoplePicker
[...]
"
Since it is working when I implement it within my app directly, it must be something in the build process I think. Can anybody eloberate, what this error message means exactly?
I am using the same package versions in my component as on my app.
Can I provide any files that might help? I don't know if showing my webpack.config or package.json for my component help at all?
Okay, it was indeed a mistake in my build process. I bundled the node_modules with my component and therefore suddenly hat two react "instances". After installing webpack-node-externals and adding
externals: [nodeExternals()]
to my webpack.config it works now.
Related
I have a question regarding the use of a plugin that I created, and used in an application called HRnet (React 18).
I have no warning in development on the plugin side. But in development on the application side I always have this warning from the bundle.js (but not in production):
It's related to my plugin (no more warning when I comment my plugin), but I don't understand why.
My plugin is a dropdown, it is published on NPM, for the bundler I used Rollup, and lifting state up to pass the value.
NPM
plugin: https://www.npmjs.com/package/react-dropdown-component-library
CodeSandbox (updated)
Dropdown (plugin): https://codesandbox.io/s/dropdown-pybhpn?file=/src/lib/index.tsx
HRNet (app): https://codesandbox.io/s/hrnet-9xq0qv?file=/src/components/AddUseForm/index.tsx:8850-8851
This is probably because register from react-hook-form returns a ref, and it is required by that library that the component it is attached to connects it to the actual form node.
However your dropdown is custom and doesn't use a base HTML element so you need to just not attach it instead. See https://react-hook-form.com/faqs/#Whatifyoudonthaveaccesstoref
I'm using Turborepo to build a Typescript monorepo which contains a number of packages that make up a UI framework. The first component is a very basic multi-panel display that is transpiled to ES6 using tsc. The package transpiles and builds correctly, but when I attempt to import one of the JSX components from the package, I get the following error.
I'm pretty new to working with monorepos, so I'm sure there's some configuration somewhere I've missed, but this is working with Turborepo out of the box and I'd been hoping that it would Just Work. The repo structure is the default Turborepo structure but I've attached that anyway in case I've missed something there.
I have the following bug:
I created a new project using CRA with the typescript template:
npx create-react-app my-project --template typescript
After running yarn start everything works fine. But then when I create some new component files, say a Counter.tsx and I import it into App.tsx, include it in the render/return and then start to make changes to the counter component, nothing shows up anymore on hot reload.
I opened the inspector and the div#root is empty after hot reloading.
Only when I change something in the App.tsx the React code gets inserted again.
So the behaviour is:
Change anything in a child or grandchild etc.. component from App.tsx
Browser shows empty screen with empty div#root
Expected behaviour:
Change anything same as before.
Browser shows the rendered react including the recent change. (with same state etc..)
Same behaviour tested in Firefox and Chrome.
Am I missing something? The console and browser don't give any error.
Thank you!
EDIT/UPDATE:
This actually only seems to be the case when I include the following context provider that initiates a web audio context:
https://gist.github.com/casperleerink/c10e81f89cf83a282be593ce62c3039d
I tried it using a context that doesn't initiate an audio context, and then everything works fine. Not sure what I should change in my code though.
I'm using TypeScript/Emotion/Rollup/Storybook to build a component library meant to be consumed by a React app. A couple preface points:
The consuming React app is working fine, and I can create Emotion-styled components within that app, and it works great and all CSS styles are applied to the app's own components.
The component library is working fine, and I can create Emotion-styled components, open Storybook, and see all the CSS styles applied in the lib's components in Storybook.
However, when I bring components over from my component library into my consuming app, their styles disappear, and upon inspection, the element looks like this:
<button data-testid="Button" css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).">Submit</button>
In other words, the CSS of the component, as created in the component library, does not show up. This same element works fine in the lib's Storybook.
As an additional note, I saw the same error originally in the consuming app's OWN components, and solved it using Babel presets here as described here: https://emotion.sh/docs/css-prop
I stumbled across this question/answer, which led me to believe that the error I'm now experiencing happened because Rollup wasn't running the build through Babel: https://spectrum.chat/emotion/help/solved-css-prop-styles-not-appearing-in-built-components~cb6e75b8-7356-42d0-860b-bb01a26a3d06
After some trial and error, I got the component lib to build using Babel. But the error persists as always, and the component, when used inside the consuming app, remains unstyled with that note inside of the CSS prop.
Any ideas on how I might get the component's CSS to show up in the consuming React app?
Thanks in advance for any help!
Make sure your .tsconfig.json has compilerOptions.target: 'es6' and compilerOptions.jsx: "preserve"
and your .babelrc should have:
"presets": [
"#babel/preset-react",
"#emotion/babel-preset-css-prop"
],
I am trying to use the material-ui React components in my app. I'm using webpack and installed material-ui with npm. I have already replaced text inputs in my forms with the material-ui text-field and it works great.
But.
Then I tried adding a button. Simple enough right? Suddenly, I get this error:
Invariant Violation: ReactClass: You're attempting to use a component class as a mixin. Instead, just use a regular object
I have tested and this error gets thrown even if I just load in an otherwise empty Javascript file with this line:
require('material-ui/lib/raised-button');
If I remove that line, everything works fine. It's weird because the text-field works, so I know my setup is correct. I suspect there is a Mixin being used inside the button code?
Has anyone experienced this? Information on this is sparse, any help is appreciated.