dimimikadze / create-react-library Goto Github PK

Would it be a good idea to change the server port?
I'm testing this on my project.
That way I can have both this and CRA dev servers up at the same time.
I still have to build after changes but at least I don't have to shut the CRA server down every time.

I guess this is a bit specific. It's just for CRA development with a linked CRL.

In your example component (react-under-construction), your /build folder is not ignored. That is making sense to me as you would need that folder to be copied when you add the repo as a dependency in you package.json.

Then why is the build folder ignored in this repo?

After a long day of chasing my tail, I have a suggestion for adding some additional information to the documentation/examples/somewhere (in case it helps someone else too).

If you are creating your own library using this as your boilerplate (such as the "under construction" example), and you want to make use of another library within yours, consider the following:

• Add the library as a peer dependency in package.json (effectively requiring the calling project to provide this dependency)
• Add the library as a dev dependency in package.json (effectively allowing this library to successfully build without complaining about not having this dependency)
• This is the important one that I had to track down! Add the library to the externals config in your webpack.config file(s). By default, only react and react-dom are there, meaning that those are the only two libraries that you can use within your new shared library.

As a helpful aside, also make sure to add any peer dependency expectations to your readme.md - that way, people making use of your new shared library will understand what dependencies they need to install/already have available.

Running yarn run test produces the following error:

yarn run v0.27.5
$ node scripts/test.js --env=jsdom
2017-09-01 12:56 node[30987] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2017-09-01 12:56 node[30987] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2017-09-01 12:56 node[30987] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:163
      throw er; // Unhandled 'error' event
      ^

Error: Error watching file for changes: EMFILE
    at exports._errnoException (util.js:1034:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1376:11)

And npm run test fails too:

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "test"
npm ERR! node v7.8.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `node scripts/test.js --env=jsdom`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'node scripts/test.js --env=jsdom'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the create-react-library package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/test.js --env=jsdom
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs create-react-library
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls create-react-library
npm ERR! There is likely additional logging output above.

I was wondering how exactly licensing works - with create-react-app it is a library, with which I generate my own application and I can use my own licensing on generated application (as far as I understand). but with create-react-library I have to clone the repo and use that as a basis for my lib.

And so I have to keep original included license also for whatever code I create that are actual contents of my library? Or can I somehow add my own license as well and separate actual create-react-library from my own software? It is a bit weird - if create-react-library would work like create-react-app does it would be so much clearer.

I'm trying to create and export a React component using useState() React hook, but the example application that imports the exported component by the library doesn't work.

I just generated the project using the default settings, so the package.json files and the rollup.config.js were generated by "create-react-library" (none modifications).

I've created this small component as an example:

import React, { useState } from 'react';

function SimpleComponent(){
    const [counter, setcounter] = useState(0)
    return (
        <div onClick={() => setcounter(counter => counter + 1)}>
            {counter}
        </div>
    )
}

Any idea how to fix it?
Thanks!

My library is one small file with three dependencies. When I do npm pack, it uses the package.json for the CRL library rather than the dependencies for just my code. Its not what I expected.

Describe the topic
I published on netlify but a page is blank. log TypeError: Cannot read property 'replace' of undefined".
A clear and concise description of what the topic is.

Your suggestions for this topic

Clear and simple suggestions for how you think this should be handled.

Screenshots

If applicable, add screenshots to help explain your points.

Code snippets

If applicable, add code samples to help explain your points.

Additional context

Add any other context about the problem here.

https://github.com/bvmcode/react-list-items

Thanks for your repo. I followed it from start to end. I installed my published package to test it in a project and in the very simple test I get an error.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

When I remove my component from this test project I get no error so it for stemming from the published package. Any insight on this would be appreciated. thanks

I'd like to track create-react-app as far as possible. Is there a chance of getting some diff script and or a set of additional files, for example

• add the line to config/paths.js
• add 'buildlib' to the scripts in package.json
• add buildlib.js to scripts/
• etc

I tried to diff all the files from cloning this project against those from a project generated by create-react-app, but it wasn't clear to me whether the differences were because of different versions of create-react-app or changes that were required to generate a component.

Thanks much for doing this!

I tried now a few packages like this one and this is the only one that worked right away for men, No I hope this project stays active and get some nice updates because it's really nice for now to work with it.

I don't know if this is me but I can't figure out my bug in that case.

I have a component that has CSS linking an image like: background-image: url('./image.jpg');
When I build my library the CSS gets transpiled to: background-image: url('media/image.jpg');
But the image is copied to a folder called media in the build folder so the is like this:

build/
css/
index.css
...
media/
image.jpg
...

So the correct URL should be '../media/image.jpg'.

It's probably a small fix but I'm no webpack guru so I cant make a PR for it.

Hi, I've been using create-react-library and semantic-ui-react for over a year now. No problems what so ever.
Since I updated create-react-library, It's impossible to have a clean working library anymore.

Here are the steps to reproduce the error:

1. create a new library: I use yarn and default configuration.
2. yarn add semantic-ui-react (I use --dev)
3. add a simple button in index.js:

return(
<div className={styles.test}>
<Button>Semantic button</Button>
Example Component: {text}
</div>
)

When compiling this, I get the following error:

[!] Error: 'isForwardRef' is not exported by node_modules/react-is/index.js

I try to solve this with adding isForwardRef to the namedExports in Rollup:

commonjs({
  namedExports: {
    'node_modules/react-is/index.js': ['isForwardRef']
  }
})

This works (the module compiles) but gives me tons of Circular dependency warnings.

It's very frustrating since is used to work without any problem. The problems started when I upgraded create-react-library

Any thoughts?

Hi guys,

I can't figure out how I can 'publish' my package with its corresponding CSS file.
For instance I created a CustomTable component which imports the ReactTable package.
I also import its CSS.
But when I build and export the CustomTable package, the CSS file is missing.
Do you have any clues? Thanks for your time

Looks like the current version of webpack-dev-server (in package.json, version 3.1.9) has some vulnerability problems. Update to version > 3.1.11 should fix it.

Hi, thanks for providing this such useful repository. Actually, it's fine to export only a default component, but how to make the IDE identify those non-default components? For example, your default code provides two components, where one is called Example, and the other is SecondExample. If I push them onto the NPM, when I pull the package, the IDE could not automatically detect the SecondExample component although it works. Is it possible to setup something to solve this situation?

Hi,

I'm using the default configuration and one of my modules trigger this error and I can't figure it out.

This module is causing the issue:

import dispatchStdEvent from "vr-ui/web_modules/utils/dispatch-std-event"

And here is the core of the module:

export default function dispatchStdEvent(stdEventName, bubbles, cancelable, element) {
  var newStdEvent
  if (bubbles === undefined || bubbles === null) {
    bubbles = true
  }
  if (cancelable === undefined || cancelable === null) {
    cancelable = true
  }
  try {
    newStdEvent = new Event(stdEventName, {"bubbles": bubbles, "cancelable": cancelable})
  }
  catch (e) {
    newStdEvent = document.createEvent("Event");
    newStdEvent.initEvent(stdEventName, bubbles, cancelable);
  }
  (element || window).dispatchEvent(newStdEvent)
}

This error occurs sometimes but the link given in the error doesn't give enough details since I'm using your default configuration I'm just lost, seems like it doesn't like the package for any reason (I can't find which one).

I got this issue few times with others modules and it was mainly because the export wasn't set to "default" or some strange things my mates did (ES8 requiring an extra module). But here, this one is so simple I have no ideas.

Thanks

Dimitri,
Earlier when i run npm build i used to get only index.js in build folder. But now i am seeing css folder also. Because of this i am unable to build my library. I don't understand my previous create react library still provides build/index.js only. Only when i take latest copy of create react library i am seeing css folder.

Hey guys, with the current dev webpack config, I can't import an image. It shows up as a data string that doesn't have any image output.

I changed the webpack.dev to the same as create-react-app and importing images in components work.

Hey @DimitriMikadze, I recently published a super simple CLI called create-react-library for bootstrapping new react libraries based on rollup and create-react-app.

I wasn't aware of this repo at the time lol. Any interest in combining our efforts?

I was thinking it'd be useful to have multiple templates in the CLI like if you wanted to use this repo's webpack setup instead of the default rollup config.

Lemme know && thanks!

(First of all, let me thank you for this repo, really helpful)

I think it will be really helpful to be able to generate a build version of the demo app (npm run build_demo), to be easily used in a github.io page as an online live demo.

I am using this library template for all my libraries.
Suddenly, my last library gave this Super expression must either be null or a function, not undefined error.

• I could build the library without any problem
• I could import the library in a CRA project and run it without any problem
• But when I made a production build and uploaded that to the server, the problem occurred.

After a few days of struggling, I decided to delete the configand scripts folder of my library and replaced those with versions of another library of a few weeks ago. So the versions of one of your previous commits.

I think a tweak in one of those files is causing this problem.

I'm not a Webpack or configuration expert so I can't help you on that BUT I found out something that might help you:

I made a fresh library using your new npx command

Doing the whole process of building it and using that in my CRA project, all went fine!
In your project, you have 2 example files, both of them functional components.
I changed one of them to a class component, thus extending React.Component and then, the error occurred!

So I suggest that you add at least one class component to you template.

It's probably a very small tweak for you, but people who use your (excellent) library will bounce into the same problem.

I am having troubles symlinking this library into another react application. From this application I run npm link and then in the other react application I run npm link create-react-library.

I then try to import in a component with import Example from 'create-react-library'; but get the following error:

Module not found: Can't resolve 'create-react-library' in '/home/bob/apps/myApp/src'

If I run npm list -g --depth=0 I see that the CRL symlink lives there.

I created a few different sample projects, using this project as a starting point - and I always seem to run into errors whenever attempting to bundle other libraries within mine (e.g., I want be dependent a form library, but don't want to force that dependency on a consuming application by using a devDependency/peerDependency combination).

As I had noted in issue #53, using libraries which I want to force the consuming application to specify a dependency on is relatively trivial (add to devDependency/peerDependency in my library, and add to the "externals" configuration within your webpack.config file(s).

In this particular case, I couldn't find a way to simply bundle another library without having to go that route - until I realized that I needed to add to the webpack output config (a libraryTarget attribute had already been added, but I needed to also specify library and umdNamedDefine attributes before this all worked for me). Now, I can simply add internal dependencies to my package.json's dependency array, and my consuming application is none the wiser.

(see this pull request for a proposed fix: #58)

Hi,

I have the following case.
I've created a npm-package with the following component which is using react-rangeslider package.

import React from "react";
import Slider from "react-rangeslider";

import "../../assets/stylesheets/scss/components/atoms/range-slider.scss";

export const RangeSlider = props => {
    const { name, value } = props;
    
    return (
        <div className="slider">
            <span className="slider__name">{name}</span>
            <div className="slider__value">
                $ {value}
            </div>
            <Slider
                min={0}
                max={2000}
                orientation="horizontal"
                step={25}
                {...props}
            />
        </div>
    )
};

• After package-publish, if I'm trying to import the RangeSlider component from my published-package, i'm getting the following error:
  TypeError: Cannot read property 'RangeSlider' of undefined.

• If I'm removing import Slider from "react-rangeslider"; and <Slider min={0} max={2000} orientation="horizontal" step={25} {...props} /> and publish the package again, the import will work properly.

I'm have the above error each time when I'm trying to export/import a component which is using an external npm-package.

Could you tell me please if I'm missing any config options for create-react-library package?

Can I use Prop-types as a devDependency and Publish my library on npm??? Would prop-types work as a devDependency in production?

Hi, I am using your example library in order to do an university project. In order to publish it into NPM I need to delete the src/demo folder and I am in trouble with it because I am not too good with webpack. It requires me not to delete the index.js. What I need to do in order to delete that folder?
Thanks.

The contents of the src/lib-folder + dependencies are bundled and minified with webpack into the build folder. The build folder is then served as the final package. This is bad for the following reasons:

• By bundling external dependencies together with the code you remove the ability for projects to have the same dependency used by many different packages. There will be duplication. For example: react-under-construction has prop-types as a dependency. Lots of other packages also have prop-types as a dependency. A project that uses many such packages would normally only have one instance of prop-types in their final bundle even though it's used by many different packages in the project. But because react-under-construction has prop-types already bundled into itself, prop-types will be duplicated in the final bundle of the users project.
  This can increase final bundle size substantially which is bad.
• Some extra code - I don't know what it does - gets added to the bundle which gives an extra 5 kb or so gzipped. Maybe it's a polyfill? Whatever it is, it is not needed. So if you make a library with nothing in it using create-react-library (by making Example.js and SecondExample.js into empty divs), the gzipped size of that will still be 4.95 kb! To put it in perspective, that's more than the entire react-router package-size. react-under-construction is 6.5 kb gzipped, it should be around 1.5 kb. Very bad.

What this library should be doing:
Use babel to transpile the es6+jsx files in the src/lib-folder to plain old es5 and that's it. It shouldn't do any bundling or minifying (except for maybe a UMD build, I have no idea how that works). The react devs who will use the final package already bundle and minify their app so it doesn't have to be done by this library.

The fact that babel doesn't continue to support decorators breaks my brain. I'd like to use mobx with decorators inside my component, but I haven't been able to find library creation code that supports it.
( I can create-react-app with custom-react-scripts to get mobx support easily. )

How hard would it be to get this project to include the babel-plugin-transform-decorators-legacy project?
I've tried to do it on my own projects but my babel-webpack-fu is not strong enough.

SOLVED

I tried to build the demo in the current master by running yarn demo and to my surprise the index.html file does not include the <script> and <link> tags required to load the built JS and CSS code.

I have a small React component, which is based on an earlier version of create-react-library (CRA v1) and it used to work. So I fear, something broke in between...

The HTML file seems untouched. It looks like this in the demo directory after building:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>          

Thank you for all the work and maintaining this library!

The library is great! Thanks for all the work.

My github project is basic-react-router

I'm trying to use CRL in a way that is similar to react-under-construction demo. I want to have my whole project in github so that someone can clone it, run, build, etc. I know you are tracking create-react-app so I assume CRL will change because of CRA and then my project should change because of your changes. I don't know how that should happen. Is there a way to update CRL?

Just trying to understand how this should work. Thanks

is it possible to somehow link npm module created by create-react-library, so I would not need to run yarn build every time I make any changes in library, so they would appear in the apps that include the module?

Hello,

I wish to publish my library to be used in browser. How can I do that?
It would be great if this was added to the documentation.

Thanks,

How can I remove flow support?
Error: Module build failed: Error: Failed to load plugin flowtype: Cannot find module 'eslint-plugin-flowtype'

I'm getting this error whenever I try to use my library. Any ideas what might cause this?

I am a bit confused... are we pretty much just clone the whole app to use it or we do something like

npm install -g create-react-library

then do

create-react-library my-new-lib

Is that how this thing work? Would be nice to update readme if it is but if not plz let me know thanks! Pretty awesome concept!

Hi! great work! exactly what I was looking for.

I'm a little bit lost on how to have node-sass-chokidar working. I want to use a modified bootstrap version for my library, with sass.

Could you please help me with this?

Thanks and thanks for the contribution!

Diego

this is something that is DEFINITELY in CRA

ideas?

./src/lib/components/modal-editor/modal-editor.js
SyntaxError: /home/samps/modules/react-component-templates/library/src/lib/components/modal-editor/modal-editor.js: Support for the experimental syntax 'classProperties' isn't currently enabled (9:20):

   7 |
   8 | export default class ModalEditor extends Component {
>  9 |   static propTypes = {
     |                    ^
  10 |     onClose: PropTypes.func.isRequired,
  11 |     changed: PropTypes.bool,
  12 |     heading: PropTypes.any,

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

Hello,

I'm using create-react-library to build a react package. My package has a css file and is host in a gitlab repository.
If I'm installing (or upgrading) my package with "npm install git+http://urlrepository" the package is referenced and build sucessfully (js + css). Same if i m running npm install to reinstall all dependencies.
But if i m using yarn (yarn add), the package is build (apparently js and css are created) but the css file doesntt appear in the node_modules directory. and I got this error when laucnhing : Module not found: Can't resolve XXXX.css, which is normal because the css is not in the node_modules directory.

Do you have any clue why my library is acting like this?

Thanks in advance!

Alberic

As create-react-app supports TypeScript, do you have any plan to support it as well?

after building and publishing into npm i get this error while importing component from my package into another project:

Failed to compile
./node_modules/freightable-library/build/index.js
Module not found: Can't resolve 'reactDOM' in 'C:*\my-package\build'
This error occurred during the build time and cannot be dismissed.

Help please!

Its not supporting async await just like crate react app does. Please add this feature. I am getting Uncaught ReferenceError: regeneratorRuntime is not defined when i use async keyword.

I have my repo configured as this here => https://github.com/ShahAnuj2610/react-searchbox/tree/npm-publish
now when I am exporting simple <HelloWorld /> from index.js under lib, it's working perfectly fine, but with the current state, it is exporting undefined.
This is the corresponding code sandbox, where I am using this published npm library => https://codesandbox.io/s/musing-noether-fe6cc

Keep getting this error while testing in CI

New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.
    This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default

My snapshots are in my version control, so they do not need to be written
Any reason why this should happen?

Thanks

New version of create-react-app (v1.1.5) is available. how can we update to new version. If some doc will be there, it would be very helpful.

First I want to say thanks for this library and second that I am very new to deploying a package.

I am receiving this error when I try to use my library with npm install or yarn link.

Uncaught TypeError: Cannot read property 'call' of undefined

Everything works correctly when I run yarn run start.

Any Suggestions? Any information I can provide to make this easier to track down?

Code: https://github.com/SCasarotto/react-tec

in chrome inspector

in node_modules folder:

I imported create-react-library like this:
"create-react-library": "git+https://github.com/UdiliaInc/create-react-library.git"

any idea?

Describe the bug
First off, I'd like to say thanks for putting together such a great library. I hit the ground running with this. Was super excited to see you added the TypeScript documentation as well.

This is similar to #55 in the sense I get the same error but I'm getting it without using rollup - just using the out-of-the-box configuration with the project (except I've added TypeScript).

System

Node.js version: 11.15.0
NPM or Yarn version: Yarn 1.19.1
Operating system: Mac OSX Mojave

Steps to reproduce

1. Run the setup for this project
2. Create a component that uses any type of hook in it (useState, useEffect, etc)
3. Build the library (yarn build) and then import it into another local project. I used yarn link for my current project.

Expected behavior

I can add hooks to my component library and import them just like any other component library

Actual behavior

When I remove the hooks from my component library, and just use a simple component (something that renders a <div />), it works perfectly. But as soon as I add a useState to the component, it breaks the project it's imported into.

However, in my local demo package and through the tests, it works just fine.

Reproducible demo

1. Go to my repo: https://github.com/dwilt/react-drag-and-select and clone it. Go into the directory and run yarn start
2. Run yarn test to see the e2e and unit tests that everything works great
3. Run yarn build
4. Then run yarn link
5. Create a brand new app with create react app.
6. Go to any component and import import { DragSelection } from 'react-drag-and-select/build'
7. Add it to the component (<DragSelection></DragSelection>). Save and refresh the project build and see this error:

Additional context

What's really odd is that everything works when I don't include hooks. In the project I was importing the library into, we are using the same react and react-dom versions (^16.10.2) and I have them set as peerDependencies and devDependencies in the library. The moment I include some sort of hook logic, it breaks. This project I'm importing this library into has hooks all over the place too.

Hello,

I am trying to use your repo to do an internal library that will not be published to npm...

The way I am exporting is the following:
Go into your lib project root and run

npm pack

I like to move the package to somewhere like my desktop so it would look something like...

mv your-package-0.1.0.tgz ~/Desktop

Then go to your consuming project and run

npm install ~/Desktop/your-package-0.1.0.tgz

It installs the lib and I am able tu use it in my project as if it downloaded from the internet (npm).
The thing is that when I use the "Example" it is not loading the image or the css (changed text color to red).
For example the url where it is trying to get the image from in the new project:
http://localhost:3000/media/a02392f5ea4ef5b2e89adf7c992f9512.svg

Any idea what might be causing it?