I get this error when importing semantic > Can't resolve 'semantic-ui-react' <
(i've installed semantic and did gulp build and all that)
I tried this
import React from 'react'
import { Button } from 'semantic-ui-react'
const ButtonExampleButton = () => (
<Button>Click Here</Button>
)
export default ButtonExampleButton
In order to use the react components of semantic ui, you will need to install the semantic-ui-react library.
Note that this library doesn't include the CSS files of semantic-ui and you will need to include it yourself.
Either via a CDN or a npm package. See the docs for examples.
Related
I'm setting up a component library with React, Storybook, Typescript and Material UI. One of the main targets of the library is to re-export components that are imported from MUI (with a bit of config on top of them). I stumbled upon an issue where one of the components is not being rendered as intended when used in another React app. The component I am talking about is the Stepper component. Below is what I have now:
Stepper.tsx
import Stack from '#mui/material/Stack';
import MUIStepper, { StepperProps } from '#mui/material/Stepper';
const Stepper = (props: StepperProps) => {
return (
<Stack sx={{ width: '100%' }} spacing={4}>
<MUIStepper {...props}></MUIStepper>
</Stack>
);
};
export default Stepper
This is going to be built as a library using rollup.
I am not going to paste the entire rollup config here, but these are the plugins the config is using:
import babel from '#rollup/plugin-babel';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import filesize from 'rollup-plugin-filesize';
import autoprefixer from 'autoprefixer';
import typescript from "rollup-plugin-typescript2";
import dts from "rollup-plugin-dts";
After the process of building and publishing the library to an npm registry, I am trying to use it in some other React application, but some of the styles/internal components of the Stepper are totally missing (ex: active step css, step connectors etc.). The usage of the Stepper component is the same as in the official docs and it works perfectly with the original Stepper component.
Can you think of any configuration I am missing? It looks like something is lost along the way while building the library, but not sure what. Either that or the children components do not receive props properly.
I can provide further insight into this if necessary, but I didn't want to clutter the post anymore that it already is.
The Stepper component expects two or more Step components as children. To fix this, you need to pass props.children to the Stepper component.
import Stack from '#mui/material/Stack';
import MUIStepper, { StepperProps } from '#mui/material/Stepper';
const Stepper = (props: StepperProps) => {
return (
<Stack sx={{ width: '100%' }} spacing={4}>
<MUIStepper {...props}>{props.children}</MUIStepper>
</Stack>
);
};
export default Stepper;
Answering my own question here:
It looks like this behavior si encountered whenever we deal with components that use the Context API internally. Somehow, the context gets messed up if we use the root component from our library and other descendant components from MUI. Simply importing and re-exporting descendant components and using them from owr library as well fixes this issue, although I would want to avoid that. Until then, I created an issue on the github page to see if it is a bug on their side or just an intended behavior which affects my case here.
All in all, it is not really a rollup config issue. Transpilation and bundling work as intended.
Issue link: https://github.com/mui/material-ui/issues/33320
I'm trying to use Atomize (https://atomizecode.com/) with Gatsby JS (https://www.gatsbyjs.org/) and while it is successfully installed, the atomize components are not being rendered to the page.
I am trying to import a button to start "Hey", and while it renders something it is not the standard button component. Also, even though the button component is imported, I get the warning that reads it is not being used.
I am wrapping atomize around gatsby app by the following way:
import React from "react"
import { StyleReset } from "atomize"
export const wrapRootElement = ({ element }) => (
<>
<StyleReset />
{element}
</>
)
Did you install styletron toolkit?
According to their docs it's a dependency and looking at their package.json it's defined under peerDependencies which means it won't get installed along with atomize.
Styletron's docs sugggets using gatsby-plugin-styletron for Gatsby.
Hope that helps.
I wanted to know if there is any guide to be able to create a dependency that is an icon library for react, I have a list of .svg and I want to create a library where you then upload it to NPM and installing in a project I can use the icons for examples as follows.
import { EyeIcon } from 'custom-icons'
export default function App() {
return(
<EyeIcon />
)
}
Thank you
I am running into this error where npm start just runs fine with the follwing import :
import Header from 'semantic-ui-react/dist/commonjs/elements/Header';
But when I do a npm test, It always shows me :
ReferenceError: Header is not defined
But When I change the import in the main file to the below line the npm test runs fine
import Header from '../node_modules/semantic-ui-react/dist/commonjs/elements/Header';
Is there any alternative for me to avoid referencing the import from node_modules folder?
semantic-ui-react exports all of its components as named modules, so that you don't have to dig all the way through the various paths to get to each component. Instead, you could do:
import { Button } from 'semantic-ui-react'
import { Header } from 'semantic-ui-react'
import { Container } from 'semantic-ui-react'
That's a lot simpler, yeah? 😊 And, in case semantic-ui-react changes their folder structure, you won't have to change your code.
Here is the semantic-ui-react documentation on how to import and use its components. Just click on the "Try it" icon for any of the examples.
I've built a reusable react component through nwb new react-component fade-preloader called FadePreloader which uses styled-components, its published on npm so I can use it on other projects, but when its imported as a module its styles are never added to the DOM. The following provides more details about the nwb component.
src folder is:
src/
FadePreloader.js
FadePreloader.Styled.js
index.js
FadePreloader.js:
import React, {Component} from "react"
class FadePreloader extends Component {
// logic code
}
export default FadePreloader
FadePreloader.Styled.js:
import styled from "styled-components"
import FadePreloader from "./FadePreloader"
const FadePreloader_Styled = styled(FadePreloader)`
// css here
`
export default FadePreloader_Styled
index.js:
// just import the styled-componet and re-export it
import FadePreloader from "./FadePreloader.Styled"
export default FadePreloader
I have the default configuration in package.json provided by nwb:
FadePreloader is published on npm so I added it on other project (through yarn add fade-preloader) and use it like this:
App.jsx on other project:
// lots of imports here
import FadePreloader from "fade-preloader"
class App extends Component {
render() {
return(
<div>
<FadePreloader />
</div>
)
}
}
export default App
The FadePreloader component is rendered in the DOM and its class attribute has the className generated by styled-components as espected but the stylesheet is never added to the DOM, no <style> element is present causing an unstyled FadePreloader rendered. What's wrong?
I've found a solution coming from the official spectrum channel of styled-components, see here.
What I had to do was to follow this which basically says that styled-components dependency needs to be moved from dependencies to devDependencies and peerDependencies in package.json. I'm not sure the reason but it seems to be to avoid some unexpected reason that is generated by duplicated direct dependency of styled-components.