Support for a Working NPM Package

[marrobins]

The React CoreUI.io project is built as scaffolding to start a new app (not as an importable React component library that you can add to an existing project). There will likely be high-value changes made to the CoreUI project in the future that others want to incorporate (e.g bug fixes and support for Twitter Bootstrap 4 final release), so we don't want to use CoreUI.io as merely scaffolding, as this will make upgrades fragile and time consuming.

Ideally, we would use CoreUI as any other JavaScript dependency and install it via NPM as this makes upgrades to new versions more straight-forward and predictable. There is an official version of CoreUI deployed to NPM that can be added as a dependency to an existing project, but there are problems with the official NPM package:

1. The version deployed to NPM is not current (1.0.0-alpha.6 versus 1.0.3 in Github)
2. The project was never created to work as an NPM package (i.e it doesn't have a prepublish lifecycle script defined to compile components).

This rules out using the official NPM package, so we need a way to easily convert the most recent version from Github into a working NPM package that we can add as a dependency to our project. This requires the following steps:

1. Checkout the latest CoreUI codebase from Github
2. Add a prepublish lifecycle script to package.json
3. Deploy the NPM package to our private NPM repository
4. Add this private package as a dependency to our project
5. Import all the compiled CSS in our main App.js
6. Import components on an as-needed basis

This is not very convenient. Is support for a working NPM package on the horizon? If not, would you consider a pull-request that achieves this?

[morloy]

I think the NPM package has changed.
At least there's @coreui/react which is up to date with the current GitHub.

[marrobins]

@morloy thanks for clarifying. That is helpful to know the latest version is deployed to NPM, but the core problem remains. The project is still not easily imported as a dependency into an existing project.

[webbertakken]

@marrobins do you have a working configuration for this that you could maybe share? I'm having some trouble getting this to work in webpack encore.

[marrobins]

@webbertakken no, we ended up moving away from Core UI because of this issue.

[xidedix]

@webbertakken please take a look at https://github.com/mrholek/CoreUI-React/tree/v2.0.0 - it is a work in progress but shows direction we are heading.

[webbertakken]

Great 👍

Just add an version 2 alpha tag so we can try it out

[ivesdebruycker]

This worked for my project:

yarn add @coreui/styles@next
yarn add @coreui/react@next

And then:

@import 'variables';

// Import styles
@import "~@coreui/styles/scss/coreui";
// Temp fix for reactstrap
@import '~@coreui/styles/scss/_dropdown-menu-right.scss';

@import 'custom';

and

import { AppHeaderDropdown, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
...

Is working great for me so far..

[kernowal]

@marrobins I'm having the exact same issue with this. What did you decide on using instead?

[webbertakken]

I got it to work too. It's still a ton of work to figure out all the things that didn't work out of the box, especially if you want run the Full component on top of it. In that case there's also dependencies missing from the main package and styles missing from the styles package.

I ended up making quite a few changes in 10 files together, so i won't copy paste them here. If anyone needs some help or has any specific questions i might be able to help out.

[vpn1997]

hey @marrobins @webbertakken I want to integrate this with one of my existing react application.I am having trouble in figuring out a workflow to do so.Can any one help me out here ?

[webbertakken]

@vpn1997 ivesdebruycker gave an answer that should get you halfway there.

could you be more specific about what you're trying to do? And what have you got now?

[vpn1997]

@webbertakken @marrobins Hey I tried to import DefaultLayout component in my existing React application , It renders this -

P.s This happens with every component that I import .
Any Idea what am i doing wrong 😢

[webbertakken]

@vpn1997 Looks like a big part is working already. At least you got it to compile. I think your styles aren't loaded.

Probably you're missing a style tag in your markup.

You should include the styles so it comes along during transpiring with babel. When it enters your build folder you still have to reference it in your markup. Also make sure it resides in a public folder.

Also make sure you have version 2.x.x of the package not the 1.x.x version.

It would be nice if you addressed the community rather than me personally next time :)

[vpn1997]

I am not using the coreui npm package rather I have cloned coreui repo(inside my react app) from which I Import all the components. CoreUi npm package was not working for me .(https://www.npmjs.com/package/@coreui/react) .
I have raised an Issue related to the same problem.
(#83)

[vpn1997]

import { DefaultLayout } from '@coreui/react'; this gives me
React.createElement: 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. error

[JoelESvensson]

@vpn1997 I had a similar error which I solved by updating my react to 16.4.1