transitive-bullshit / react-modern-library-boilerplate Goto Github PK

Why not use Storybook instead of having the example app?

Hi,

at first I would like to thank you for this beautiful package compilation!

Nevertheless I have some troubles and a single line of code breaks everything.
I want to import Swagger from 'swagger-client' package which makes me crazy.

So I simply added it through npm i swagger-client and inserted import Swagger from 'swagger-client'; in the library 'src/index.js'. npm start and baam, broken.

Do you have any suggestion? What am I missing?

Thank you very much for investigation!

Looks like your .eslintrc is looking for babel-eslint but it isn't in your package.json.

BTW, this library looks awesome! nice work and thank you for making my life easier

When, I run the npm run deploy command, I get this error: fatal: A branch named 'gh-pages' already exists. I can't say what the issue is. The homepage property in my package.json file is: "https://okezieokpara.github.io/custom-react-app-example"

I tried to npm install after npm link <package_name> inside the /example folder.
This is what I get

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:..

npm ERR! A complete log of this run can be found in:
npm ERR!    <my_personal_dir>

Probably because of this:

{
  "name": "my-package-example",
  "homepage": "",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "my-package": "link:..", //Here
    "react-scripts": "^1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

How do I solve this?

Cloning into 'C:\Users\Shreedhar\twilio-video-react-hooks\node_modules.cache\gh-pages\[email protected]!akshaysk-ask!react-video-app.git'...
Host key verification failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Shreedhar\AppData\Roaming\npm-cache_logs\2020-09-23T07_04_58_830Z-debug.log

Adding any style to src/styles.css leads to a syntax error during build.
[!] (babel plugin) SyntaxError: /Users/.../react-modern-library-boilerplate/src/styles.css: Unexpected token (1:0)

Hi,

First of all, thank you for this repository. It's a great starting point for writing React packages and I love the CRA integration!

However, could you please document how can one define named exports using this setup? Usually when you write a library you want to export multiple things and it would really help everyone to get started faster. Ideally you could provide an example as well -> what is the best practice in your opinion?

Thanks

Steps to reproduce:

1. npx create-react-library
2. yarn add @material-ui/core
3. create src/TextField folder with index.tsx file, which has this code:

import React from "react";
import TextField from "@material-ui/core/TextField";

const TextFieldComponent = (props: any) => {
  return <TextField {...props} />;
};

export default TextFieldComponent;

4. yarn start

Expected behavior

no errors

Actual behavior

rollup v0.62.0
bundles src/index.tsx → dist\index.js, dist\index.es.js...
[!] Error: 'ForwardRef' is not exported by node_modules\react-is\index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules@material-ui\utils\esm\getDisplayName.js (2:9)
1: import _typeof from "@babel/runtime/helpers/typeof";
2: import { ForwardRef } from 'react-is'; // Simplified polyfill for IE 11 support

create-react-app's readme opens with

npx create-react-app my-app
cd my-app
npm start

It would be great if this project had a similar script to avoid needing the manual steps in the walkthrough. Smoothing out this process would probably increase adoption and participation too.

A blueprint-based interactive script could also open the door to putting more opinionated options in. For example, you could answer yes/no for a storybooks, prettier, flow, sass etc. I'm assuming adding those things directly to the project as is now would be too opinionated.

I'm curious about your thoughts on roadmap in general.

When I run yarn test, the console output shows me a coverage summary with percentages, like:

Ran all test suites.
-----------------|----------|----------|----------|----------|-------------------|
File             |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------------|----------|----------|----------|----------|-------------------|
All files        |    38.06 |    27.91 |    13.33 |    39.68 |                   |
Comp1.jsx        |     41.3 |    32.76 |       10 |    44.19 |... 06,107,116,124 |
Comp2.jsx        |    36.36 |    17.86 |       15 |    37.35 |... 44,145,146,153 |
-----------------|----------|----------|----------|----------|-------------------|

...but when I view /coverage/lcov-report/index.html from the project root, the page lists the expected components correctly but contains no data.

( did notice there's not much activity on this project for ~2 years, so if you have a similar-but-newer one that you'd recommend, please say so.)

Thanks for sharing this, I've found it to be a very useful.

Would you be open to adding basic jest integration to this setup? Happy to contribute a PR if you'd like.

I'm creating a new library and followed the steps in the walkthrough. Everything works fine until when I run npm install from the ./example app directory, I get this error:

WARN tar ENOENT: no such file or directory, open '/path/to/repo/library/component/example/node_modules/.staging/core-js-35020c30/modules/es7.set.from.js'
WARN tar ENOENT: no such file or directory, open '/path/to/repo/library/component/example/node_modules/.staging/core-js-11e37318/modules/_collection.js'
WARN tar ENOENT: no such file or directory, open '/path/to/repo/library/component/example/node_modules/.staging/core-js-35020c30/modules/_collection-weak.js'
WARN tar ENOENT: no such file or directory, open '/path/to/repo/library/component/example/node_modules/.staging/core-js-11e37318/modules/es7.set.from.js'
WARN tar ENOENT: no such file or directory, open '/path/to/repo/library/component/example/node_modules/.staging/core-js-35020c30/modules/es7.set.of.js'
WARN tar ENOENT: no such file or directory, open '/path/to/repo/library/component/example/node_modules/.staging/core-js-11e37318/modules/_collection-weak.js'
WARN tar ENOENT: no such file or directory, open '/path/to/repo/library/component/example/node_modules/.staging/core-js-35020c30/modules/_collection-to-json.js'
WARN tar ENOENT: no such file or directory, open '/path/to/repo/library/component/example/node_modules/.staging/core-js-11e37318/modules/es7.set.of.js'
...

Hi, all! Nice and useful repository! I had a question that if is it possible to create a reusable React Component as a Library if that component is connected to Redux? 

I know this may be a specific need that adds some complexity that wasn't the goal of the boilerplate, but I couldn't find the same problem explained elsewhere and I was wondering if you by chance encountered this problem before.

Greetings

I created a weather app using create react app.
I followed all the steps mentioned in https://create-react-app.dev/docs/deployment/#github-pages
But the gh-pages branch doesnt show.
I tried running the command npm run deploy again and it shows "fatal a branch named gh-pages already exists"
Here is the code (https://github.com/sehajbajaj/Weather-App)

Hi,

I'm building a library with react and draftjs, which needs to be injectable in any html page and then instantiating the component on demand through a simple function that should be available in global namespace.

<script src="https://mycdn.com/MyAwesomeLib.min.js"></script>
<script>loadMyLib(validHtmlElement, initialProps)</script>

Expected behavior

• Able to link 'react-modern-library-boilerplate' to 'create-react-app' for local testing.

Actual behavior

C:/react-modern-library-boilerplate/dist/index.es.js
Module not found: Can't resolve 'material-ui/Paper' in 'C:\react-modern-library-boilerplate\dist'

Steps to reproduce:

• Checkout feature/material-ui
• Create React App
• link
• start

Notes:

• Works fine in /example/ start script (Not in create-react-app or any other attempted project)

Check out the issue posted here

mui/material-ui#12934

Hi, great library. Thanks for making this.

I'm trying to import global css like fontawesome in my exported components. Is there an easy way to do this? It seems like the css modules is stopping me from doing this.

I am trying to deploy my app and am getting this error. I have tried running rm -rf node_modules/gh-pages/.cache to no avail. I also tried manually deleting node_modules/gh-pages/.cache and that did not work either.

I'm using this boilerplate (via create-react-library) to build a react library.

My library has some peer dependencies, for example styled-components - which needs to be a single instance.

If I don't install styled-components as a devDependency in my library, npm-linkin won't work and I get an error in the example, that styled-components was not found. (styled-components is installed in the example project)
Second option is to install it as a devDependency in my library, but then I have to instances of it.

Is there any way to fix this? I googled a bit and only found that it's a common problem.

Thanks!

Hi,

I have a component that imports images, how do i get these bundled with the component at build time?

Thanks,
Ciaran

If you use yarn instead of NPM to install packages, you get an error in the console. I also tried removing the package-lock.json and then doing an npm install and it also failed with the same error

[!] (commonjs plugin) SyntaxError: Unexpected token (11:19) in \src\index.js src\index.js (11:19) SyntaxError: Unexpected token (11:19) in \src\index.js at error (\node_modules\rollup\dist\rollup.js:185:14) at Promise.resolve.then.catch.err (\node_modules\rollup\dist\rollup.js:9448:6) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) at Function.Module.runMain (module.js:678:11) at startup (bootstrap_node.js:187:16) at bootstrap_node.js:608:3

When using website from create-react-app to debug component code, I see transpiled babel code.
Setting source maps to 'inline' doesn't help with this.

Given that there's a files defined in package.json, it seems like .npmignore is not necessary / a bit misleading. A few of the paths listed lend to some confusion: eg. coverage/, scripts/, and test/ do not exist in the project tree.

Does this file serve any immediate purpose?

Is there any simple way to use this boilerplate with typescript + tsx?