harveyd / react-component-library Goto Github PK

Hey! Great job with this repo. Looks really good!

I have some questions:

• How would you handle woff/woff2 imports in scss files with this setup?
• How would you handle global variables and mixins across exported components and package these in an efficient manner?

I think this is a pretty common use case, it would be great to see an example. :D

Hi Harvey,

I'm trying to follow your instructions but for .jsx files. When I run npm run build I get the following error

src/index.js → build/index.js, build/index.es.js...
[!] Error: Could not resolve './TestComponent/TestComponent' from src\index.js

Do you have any ideas?

I'm very new to storybook. I followed your tutorial and when I ran yarn storybook it worked but I'm missing all the additional stuff at the bottom that I see here.

Add tsconfig-paths-webpack-plugin.

Updated .storybook/main.js folder to allow for paths defined in the tsconfig.json

config.resolve.plugins = [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, "../tsconfig.json"),
      }),
    ];

tsconfig.json

"paths": {
      "~/*": ["./*"]
    },

This will allow you to import from "~/src"

When using the rollup -c command I get following error:

[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.

Original error: Cannot use import statement outside a module

In the rollup documentation:

By default, Rollup will use Node's native module mechanism to load your Rollup configuration. That means if you use ES imports and exports in your configuration, you either need to define "type": "module" in your package.json file or use the .mjs extension for your configuration. See also Configuration Files and Caveats when using native Node ES modules for more information.

But in your repo you didn't do that.

How come you didn't need to do the .mjs or the "type": "module" in the package.json?

I've tried the code splitting branch on two different react/typescript projects and I'm always getting
Module not found: Can't resolve 'react-component-library/build/TestComponent'

One project is a CRA starter and the other a Next.js starter.

Anyone else with the same problem?

When i do this:

import styles from "./TestComponent.module.scss";
I get a typescript error.
Cannot find module './TestComponent.module.scss' or its corresponding type declarations.
I used @ts-ignore but then on npm run storybook i get an error:

ERROR in ./src/TestComponent/TestComponent.tsx
Module not found: Error: Can't resolve './TestComponent.module.scss' in '/Users/harshboricha/Desktop/rcl2/src/TestComponent'

Simply running npm i --save-dev colors will fix the issue.

in branch Branch styled-component npm run generate YourComponentName generates a component using a scss file.
I think that util/template/component.scss.js should be deleted (index.js and component.js should be updated accordingly).

One of the more complete boilerplates, changed some stuff for our needs but appreciate ya, save a bit of time :)

Hi @HarveyD

How we can use Enzyme rather than React Testing Library in this repo? Can you guide me?

When user runs the build command and import it in the project, it throws an error:

Module not found: Can't resolve 'styled-components'

I checked the code splitting branch and it seems it's not working. After doing changes and try using the component-library in a test app (created by CRA) I got this error: (I build and re-install the package after add code splitting and run yarn cache clean)

./src/App.tsx
Cannot find module: 'react-component-library/build/TestComponent/TestComponent'. Make sure this package is installed.

You can install this package by running: yarn add react-component-library/build/TestComponent/TestComponent.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried to access TestComponent exactly the same as you told in your article, like this:

import TestComponent from 'react-component-library/build/TestComponent/TestComponent';

Also, this is the folder structure after code-splitting contains folders like node_modules and src and it's not clean enough:

.
├── index.d.ts
├── node_modules
│   └── style-inject
│       └── dist
│           ├── style-inject.es.js
│           └── style-inject.es.js.map
├── src
│   ├── index.js
│   ├── index.js.map
│   ├── TestComponent
│   │   ├── index.js
│   │   ├── index.js.map
│   │   ├── TestComponent.js
│   │   ├── TestComponent.js.map
│   │   ├── TestComponent.scss.js
│   │   └── TestComponent.scss.js.map
│   └── TestComponentNew
│       ├── index.js
│       ├── index.js.map
│       ├── TestComponentNew.js
│       ├── TestComponentNew.js.map
│       ├── TestComponentNew.scss.js
│       └── TestComponentNew.scss.js.map
├── TestComponent
│   ├── index.d.ts
│   ├── TestComponent.d.ts
│   └── TestComponent.types.d.ts
├── TestComponentNew
│   ├── index.d.ts
│   ├── TestComponentNew.d.ts
│   └── TestComponentNew.types.d.ts
├── typography.scss
└── variables.scss

It's better to able import component in code splitting like this:

import TestComponent from 'react-component-library/TestComponent';

Rather than this:

import TestComponent from 'react-component-library/build/TestComponent/TestComponent';

Hello guys, and thanks to @HarveyD for this great repository .
I have a problem when I use the code below:

import React from "react";

import { TestComponentProps } from "./TestComponent.types";

import "./TestComponent.scss";

const TestComponent: React.FC<TestComponentProps> = ({ theme }) => {
  const [state, setState] = React.useState(null)
  return (
  <div
    onClick={()=>setState("HI")}
    data-testid="test-component"
    className={`test-component test-component-${theme}`}
  >
    <h1 className="heading">I'm the test component</h1>
    <h2>Made with love by Harvey {state}</h2>
  </div>
)};

export default TestComponent;

it gives me this error on test project :

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

And it is how I used it on my Test:

import logo from './logo.svg';
import './App.css';
import {TestComponent} from "react-component-library"

function App() {
  return (
    <div className="App">
      <TestComponent/>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

What is wrong with it?

is it possible to add tailwind styles, assuming I also want to keep the existing CSS styles too,
I've already set everything up and can generate the styles using

npx tailwindcss -o ./build/index.css --minify

how do I make these styles get included in the exported styles

It should be nice to have support for modular components - export/import.

Right now we need to import our component using import { AComponent, BComponent } from "harvey-component-library";

It should be nice to have separate build for each component:

import AComponent from "harvey-component-library/AComponent ";
and
import BComponent from "harvey-component-library/BComponent ";

For example I would like to use ONLY AComponent in other project, why should I include full code (BComponent, ...)

In conjunction to the previous issue I mentioned, I also struggled to resolve background images specified in a component scss file.

The path is injected, but the image does not seem to be added to the component bundle. It works in storybook, probably because this is handled by webpack, but when I test my library in a web-app, the images are not included.

One solution could be some sort of loader replacing all image assets referenced in scss files with the hashed version, but I have not come up with a good solution to get this working.

I think it's a good idea to enable code splitting and esm export together in the main branch. Then we can have esm and also split cjs version together. And use our component in both ways like this for es import:

import { Button } from 'component-library'

and like this, if we have default export:

import Button from 'component-library/src/Button'

or like this, of we have named export:

import { Button } from 'component-library/src/Button'

@HarveyD What's your idea?

Hello,

I was trying to use this template to create a library based on material ui components, but when I insert material-ui as peerDependencies, it throws some errors. I already tried a lot of solutions and I failed.

I create a minimal scenario by:

1. cloned this template
2. installed @material-ui/core
3. modify the initial example to extend TypographyProps and use its props over TestComponent.tsx
4. Add @material-ui/core as peerDependencies and add external on rollup config (I also already tried without external rollup config)
5. delete node_modules and build
6. run 'yarn && yarn build'
   Then the following error throws:

[!] (plugin rpt2) Error: //rollup-material-ui-peerDependencies-error/src/TestComponent/TestComponent.tsx(2,28): semantic error TS2307: Cannot find module '@material-ui/core' or its corresponding type declarations.

Here it is a link with the replicated scenario:
You can just clone and run 'yarn && yarn build' to see the error.
https://github.com/andrebnassis/rollup-material-ui-peerDependencies-error

I've also opened a question on stackoverflow to explain all my research to find a solution for it. You can see it here:
https://stackoverflow.com/questions/68581137/is-it-possible-to-have-material-ui-as-peerdependency-but-keep-its-types-as-devde

I would be glad if anyone can help me find the solution.
Thanks in advance.

I'm testing out the component library in a project and when I run Webpack Analyzer, I see the the library itself has React bundled with it. I thought this was taken care of my putting it in the peerDependencies? I had also tried using the external key in the rollup config.

I cant build the library with redux-form.

See the code

Storybook works fine

npm run storybook

but

npm run build

fails with the following error:

Error: 'import' and 'export' may only appear at the top level

Hi @HarveyD ,
Now I have to use both rollup-plugin-postcss and rollup-plugin-sass because of your guide in ReadMe because I need code splitting and a single bundle. What is your suggestion if I want just using one of these package rollup-plugin-postcss or rollup-plugin-sass?
I see in the ReadMe you told:

Please note, there's an issue with code splitting and using rollup-plugin-postcss. I recommend using rollup-plugin-sass instead alongside code splitting.

Can you explain what is this issue exactly? Maybe we can find a solution for that. 😉

see above issue, please fix

Hi,

I think a watch mode feature also can be very useful in this repo. Something like watch mode in https://github.com/transitive-bullshit/create-react-library and microbundle.
It is possible in Rollup, right?

I cloned the repo, npm i and then npm run storybook. I get :

❯ npm run storybook

> [email protected] storybook
> start-storybook -p 6006

info @storybook/react v6.5.13
info 
info => Loading presets
info Addon-docs: using MDX1
info => Using PostCSS preset with [email protected]
info => Using default Webpack4 setup
10% building 1/6 modules 5 active ...te-components/node_modules/@storybook/addon-outline/preview.js-generated-config-entry.jsnode:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/jeffwilde/code/elevate-components/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/jeffwilde/code/elevate-components/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/jeffwilde/code/elevate-components/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/jeffwilde/code/elevate-components/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/jeffwilde/code/elevate-components/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/jeffwilde/code/elevate-components/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/jeffwilde/code/elevate-components/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at /Users/jeffwilde/code/elevate-components/node_modules/loader-runner/lib/LoaderRunner.js:205:4 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.14.0

Anyone else seen this?

Hi @HarveyD , I've run into an issue when on the styled-components branch of this repo: After switching to that branch, running npm install and npm build, I created a new create-react-app project, ran yarn add file:../../react-component-library/, added the TestComponent to the default App.js file, and after running yarn start, it leads to the error page with this text:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

npm ls react in the CRA project yields only one result, [email protected] , same for react-dom. However, npm ls styled-components gives back:

[email protected] /Users/pneedham/dev/tmp/test-app
└─┬ [email protected] invalid
  └── [email protected]  extraneous

npm ERR! invalid: [email protected] /Users/pneedham/dev/tmp/test-app/node_modules/react-component-library
npm ERR! extraneous: [email protected] /Users/pneedham/dev/tmp/test-app/node_modules/react-component-library/node_modules/styled-components

I believe this is caused by styled-components existing both as a dev and peer dependency. When attempting to build a similar component library, but without styled-components as a devDependency, that leads to storybook being unable to start.

Any ideas how this branch can both support Storybook as well as avoid the React mismatching versions error?

For context, I'm using create-react-app 4.0.1, yarn 1.22.5, node 12.19.0, and npm 6.14.8 on macOS.

got incorrect build with ...args on component

success without ...args

thanks

I download the code from here
I fired npm install and npm run build.
I getting the following error. any steps is missing?

Hi @HarveyD,
As I checked rollup has an official TypeScript plugin here:
https://github.com/rollup/plugins/tree/master/packages/typescript

Why you prefer rollup-plugin-typescript2 to this? Any specific feature exists in this?

After build image imports to SC doesn't work. Seems it is something wrong with paths. Isn't it?

For example: import any svg file to style js file and try to use it, and after build project.

Hello, so i have tried code splitting on your code and its not working the build step is building wrong files

There is only files

• package.json
• readme.md
• licence
  no .js

Install localy works... https://github.com/HarveyD/react-component-library#installing-component-library-locally
An idea?

I just cloned the repo and typed npm install but i am getting the following errors.

npm ERR! npm ERR! c++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.5"' npm ERR! npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::__1::basic_string<char>' [-Wrange-loop-construct] npm ERR! npm ERR! for (const auto denominator : denominators)
node version 16.10.0
npm version 8.1.3

Add JSON to the rollup config as seen here. https://github.com/rollup/plugins/tree/master/packages/json

Hey Harvey,

Thanks a lot for your hard work, saved me tons of time, much appreciated :)

I have an issue with Next.js ( 12.x ), the build size of each page. Basically, the three shaking doesn't work at all and each page imports all the components. I tried using the "code-splitting" branch but the size is even bigger.

I researched a lot RE this issue however I can't find a suitable solution. Everything points out to the library itself and not Next.js.

Do you have any suggestions and tips on how to resolve this issue ?

Hi HarveyD, I'm doing a design system following your article (very thanks for this!) and now I need to add some custom fonts to my components, but it can also be in createGlobalStyle with styled-components , so I would like to propose this feature in your repo.

In case, I'm having trouble doing this on mine, if you've already seen this and know how to do it, if you can help me, I'd be very grateful.