Hello,
I have some react components in my project. And I would like to make the sandbox for users where they can try some properties of the components. I see this like textarea with jsx code and div with result of code.
My components have ES6 syntax and export default components and some non-default data(eg. properties of component).
I tried to transform es6 and jsx with babel then execute eval on the client side. But I couldn't connect the dependencies for component. Especially it was for non-default data.
If i try to compile bundle with webpack on the server side I work in memory file system and I have to load all dependencies from node modules there too.
Do you have any ideas how can I do it? Maybe I missed something?
Related
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 am trying to render my REACT components via SSR with REACTJS.NET in ASP.NET project.
In the JS file for SSR, I'm importing SimpleBar component from simplebar-react package.
This is causing the error TypeError: Object doesn't support property or method 'forwardRef'.
I currently have 2 JS files, one for server and one for client. In the JS for server I am removing the adding of event listeners and similar. However, I can't get away from importing at least the npm package in both JS files.
Any idea on how I can avoid such error?
I am using Webpack + REACTJS.NET version 3.2.0.
So, after trying a lot of things, this is the best solution I came across.
Before I begin, I am aware that conditional imports is being introduced in ECMA but it isn't working for me, or at least, they way I have the project setup.
Basically, my solution is resolved by mixing ES6 with CommonJS and with help of Webpack and babel.
In Webpack I am creating a plugin:
And in code, when I want to import the Simplebar react component, I do the following in the constructor:
And then, whenever I want to use my imported component, I do the following:
This was the best way I found in order to render with SSR. I think it's okay since the content between server and client side are the same.
Does anyone know a better solution? Or do you have concerns?
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 use Styled Components as CSS alternative for my React App. In development everything works fine (first screenshot), but when I run a production build (npm build), styles within style tags are stripped out (second screenshot). As a result, there're no styles in the production build.
Here is the production version: http://projects.loratadin.com.s3-website-us-east-1.amazonaws.com/weather-app/
Here is the source code: https://github.com/Loratadin/weather-app
I had a similar issue with empty style tags in production. I'm using a headless browser for server-side rendering and this issue caused the server-side rendered pages to appear with no styles before JS assets are loaded.
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well. Keep in mind that you should do it at the very beginning of your application's entry file, before importing any styled component, otherwise it will not work.
The way I did it is by creating a new file called globals.js that contains global.SC_DISABLE_SPEEDY = true
and importing it as the very first thing in my index.js.
Reference: https://www.styled-components.com/releases#v4.1.0
For the Create React App folks out there you can add a .env file in your root and add:
REACT_APP_SC_DISABLE_SPEEDY=true
I was able to replicate your issue and it looks like when the application is in production, it can't select html elements within a styled component (the styles don't apply to the element). Instead, you'll need to create additional stylized components for input and button.
Working example: https://github.com/mattcarlotta/Weather-App
I refactored your application to simplify its structure. Please read the README for instructions on how to run it in development and in production (DO NOT use the above repository for production, as it's highly unnecessary to have an express backend -- I only did this so that you can run a local production build).
What I changed:
Moved any styled components to the components folder for modularity
Any sort of global stylization was put into a styles folder
Moved assets to images and imported them into the styled component that needed them (eliminating the need to use require('../path/to/image'))
Simplified the App.js file. Children are controlled by state and class methods. Most importantly, turned your form into a controlled component, fixed the getWeather method to: Not allow an empty submission, if the AJAX calls fails, it'll catch the error (instead of breaking your app), and reset the form inputs on successful submission.
Added prop-types to ensure props were consistent in declaration (string remains a string, number remains a number, and so on).
If so, please share folder structure (where is semantic path) and an example of importing a component.
I know this question is rather "old" (in a front-end dev sense), but Semantic UI now has official React integration and bindings:
Semantic UI React
https://react.semantic-ui.com/
Among its key features (from the landing page):
jQuery Free
All jQuery functionality has been re-implemented in React.
Declarative API
Declarative APIs provide for robust features and prop validation.
Augmentation
Control the rendered HTML tag, or render one component as another component. Extra props are passed to the component you are rending as.
Shorthand Props
Shorthand props generate markup for you, making many use cases a breeze. All object props are spread on the child components.
Sub Components
Sub components give you complete access to the markup. This is essential for flexibility in customizing components.
Auto Controlled State
Our stateful components self manage their state out of the box, without wiring. Dropdowns open on click without wiring onClick to the open prop. The value is also stored internally, without wiring onChange to value.
Installation
$ npm install semantic-ui-react --save
$ npm install semantic-ui-css --save
or if you prefer Yarn:
$ yarn add semantic-ui-react
$ yarn add semantic-ui-css
After installing, include this line in your index.js file:
import 'semantic-ui-css/semantic.min.css';
I will make use of the react package https://react.semantic-ui.com/ . Same stuff but without jquery and all react components