I have created a react typescript project using "create-react-library".
The project export a component, let's call it "A".
The "A" component render an svg image which is inside the component folder.
But when i compile the library project (using microbundle), there is no assets in dist folder.
And as a result, if i use component "A" in a test example project, i cannot see the svg image.
I have not found any example which handle this scenario.
Related
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
I have a component library using storybook & TailwindCSS and a host app that's also using TaildwindCSS itself that imports the component library. When the classes are generated, I'm seeing that they're duplicated:
Both projects import TailwindCSS standardly in their index.css files which is then imported into index.tsx using import "./index.css";:
The host app does generate all the classes from the component library when imported but due to there being duplicate classes, some are being overridden due to the order (pay attention to the source and line numbers in the above image)
The component looks correct on storybook:
Host app:
Looking for advice on how to correctly import the component library within the host app?
UPDATE:
I've figured that the component library generates it's own TailwindCSS classes as expected and that's where the "duplicate" classes (inline) come from and it's being included in a single output in index.js in the dist folder. Still need a way to avoid these duplicates when imported in the host app. May need to look at changing the component library to build a separate .css file with the styles and tell the host app to generate the component library's styles to prevent these duplicates.
After reading more on the TailwindCSS documentation, I've found a resolution. Using the following information from https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries, I was able to fix my issues.
Essentially what I've now done is, on my component library, I ensured that the.css styles are extracted into it's own file and not built into a single index.js. After that, on the host app, I set the content of tailwind config to reference my component library so that it scans the src and generates those classes itself.
I'm beginner in react and now I check a project that is like crisp and all off react component is in a one jsx file. I studing react and test some project but None of them is'nt like this.
this project dosn't have any ClientApp folder and subfolders.
this project is asp core and have signalR . file jsx use in a view action and run nice.
and how I can split componnent from main file jsx. I should create Appclient folder or not.
[![enter image description here][1]][1]
We'd like to render one of our React components to static HTML, so it's in the index.html returned by the server.
Rather than the code doing this while the server is being started, we'd rather the HtmlWebpackPlugin render the React component into its generated index.html. This is possible and it works very well; however, as soon as we attempt this with a React component that imports its SCSS, we see the following error:
Error: /Users/calumjames/htmlwebpackplugin-error-react-rendering/tools/webpack/indexRenderer:5396return window && document && document.all && !window.atob;^ReferenceError: window is not defined
I've created a simple Git repo that examples the issue. As mentioned in the README file, if the line that imports the SCSS in the Loading component is commented out, this error stops appearing and the component is rendered into the index.html correctly.
We could do with not changing how the component is coded because it's an internal shared component and the coding style matches the other shared components.
Is there something wrong with my code or config, or is there an issue with one of the Webpack plugins or loaders?
I'm refactoring HTML into React. The HTML uses a purchased theme that relies on a few custom JS files including jQuery. How do I link custom scripts to components in React? Do I link them in my index.html file in the public folder? Or do I need to link them in each component file?
You can link them in the index.html or you can import them in your JavaScript. I tend to import in my root JavaScript file so that the imported files are bundled with the rest of my JavaScript (if using a bundler like webpack). For example, to include the JavaScript required for materialize I simply add
require("./js/bin/materialize");
in my app.jsx file.