I'm attempting to integrate React components into our Angular 1.5.x application. I've been successful thus far in learning webpack and utilizing webpack-dev-middleware and webpack-hot-middleware; however, I'm running into a problem when using an external copy of React.
ngReact expects to find copies of React and ReactDOM. In addition, loading Angular and our controllers, directives, etc. takes precedence. To avoid loading multiple copies of React, I set the external property in webpack.config.js.
Now that React is externalized, it doesn't appear Hot Reloading works anymore. The terminal updates, HMR is connected according to the browser console, but the component on screen is not reloading.
Is there a workaround?
Related
Is hot reloading possible while mounting react components into our Django template?
As part of improving our UX, we are adding react component to our page to bring dynamic content on every customer interaction.
I have successfully set up the react inside our Django and placed bundle.js into a static path using Webpack. Now using Webpack watch we are able to load the latest changes on the page.
In this setup, we can't bring hot reloading and source in the browser devtools console to debug and speed up our development.
Note: The application is not a SPA also not a Restful design for now.
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"
],
When i customize vscode source code, i found it hard to add a page.
I know there are many ways to do so, such as Part/Widget/Browserwindow, but only if i new a Browserwindow can i explicitly load html and js files like in chrome browser and it's friendly.
If i use a Part or a Widget, i need to use native js api to do dom manipulation, and it's so inefficient,
~~so i want to know how did vscode team decide to use no ui framework during the development? Is there some trade-off?~~
i tried to import react and react-dom directly in my own contrib file /vs/workbench/contrib/dialog/browser/dialog.ts, and then get successful compilation and the react component shows up, but i don't know how to add babel with the compilation procedure, so i use react without jsx.
so i want to know how to import react framework into vscode source code project to create ui component? Is there some practices?
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).
I've been struggling for the last few days to eliminate page flash. My project started with create-react-app, then I used help to set up SSR and various other options. When I started running into problems, I stripped my code down and ejected. Here is my code. You can build with npm run build and start the SSR with npm run serve. Visit http://localhost:3000/ to see the result.
There are two routes in my app: Home and About.
Going to / (Home) works as desired: react-loadable identifies the home bundle, injects a <script> tag for it, and sends the page out the door. The client loads all the bundles and react takes over with no flash.
Going to /about results in a page flash (make sure the page is loaded from the server to see this). I added an import for moment-timezone into the about component, and webpack smartly moves it into its own bundle, separate from the about bundle. The problem is that react-loadable only sees that it needs the about bundle, not the extra bundle containing moment-timezone. Thus, on the client side, when react takes over it sees that its missing a module, blanks the page, loads the bundle containing the missing module, then re-renders (at least,
I think that's how it works).
What am I missing? I am using the babel and webpack plugins as described in the React-Loadable Readme. It seems like React-Loadable is only smart enough to go one level deep and not see what the imported module's dependencies are, but surely that's not the case, is it?
This happens because react-loadable don't have a nice and deep implementation for server side rendering.
But the good news is, there's an add-on for that, it is called react-loadable-ssr-addon.
In the plugin repository it says:
React Loadable SSR Add-on is a server side render add-on for React Loadable that helps you to load dynamically all files dependencies, e.g. splitted chunks, css, etc.
Oh yeah, and we also provide support for SRI (Subresource Integrity).
So basically this plugin handle everything regarding the assets situation for server side rendering in react, reproducing the same behaviour as the tradicional approach (client side render).
With that, your assets are managed and loaded automatically to your output, avoiding the error you reported.