6

I have a couple of React Components in a folder, which is not a react project. The Directory Structure i am following for components is:

~/components/Component1/index.jsx

~/components/Component2/index.jsx

Now I have a React project (built with create-react-app), named "myapp" I want to import those React Components as a package or module in my project.

I have tried mentioning a dependency in my package.json, but gives an error, because I can't mention absolute paths in package.json.

I don't want to publish these components as a npm package.

Kindly help me with this

Haider Ali Anjum
  • 831
  • 1
  • 9
  • 20
  • 1
    have you tried by copiying components in your project and use them ? without using as module in the `package.json` file – Pardeep Jain Sep 15 '17 at 07:00
  • This way I'll not have a package that is a need, and the main purpose of this happening is, I want to make a package outside any project and I can use it in any project by just importing it from the place where it is – Haider Ali Anjum Sep 15 '17 at 07:04

2 Answers2

0

The problem was:

I was trying to wrap material-ui components like iconButton, iconMenu, etc. to make the components easy to use programatically. To put them into a git repository I need a example directory with a seperate react project using the components I developed. So, I need to develop a package that hold components' definitions and exporting them to be used in other project. I want to keep my implementations private so I cannot even publish it to npm.js.

[you can see the question statement for thorough understanding of thr ptoblem.]

Coming to the solution help me doing the needed, I created a new project with yarn adding minimal dependencies. i.e.

  • babel
  • babel-cli
  • babel-core
  • babel-loader
  • babel-preset-es2015
  • babel-preset-react
  • babel-preset-stage-2
  • html-webpack-plugin
  • raw-loader
  • webpack
  • webpack-dev-server

and then devDependencies

  • react
  • react-dom
  • material-ui [occasional]

After the installations, [HERE COMES THE PART] I created a webpack.config.js with following script:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  devtool: 'cheap-eval-source-map',
  entry: './docs/entry.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    alias: {
      genericcomponents: path.join(__dirname, 'src')
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      }
    ]
  },
  devServer: {
    contentBase: 'docs/'
  }
}

In the code above, after mentioning the output the entry, devtool and output of the transpilation process. I actually have another thing to define, which is alias, I defined the alias with the directory holding the components.

Now this package will hold all the components with the name I provided in the alias parameter.

After that I mentioned loaders for transpilation and file format to jsx, so It will accept the source with JSX Syntax.

And at last I mentioned my the directory where I placed my index.html and entry.js file.

Following is the directory structure of my project:

enter image description here

I have my App.jsx Component in docs folder. which can now import any of the components in the components folder by the giving the package name.

You are welcome to discuss of any of the problem occurred in the above solution.

Community
  • 1
  • 1
Haider Ali Anjum
  • 831
  • 1
  • 9
  • 20
-1

I know the answer might sound very basic but is there any reason why don't you just copy paste the components into the new app and just use them as any other component ?

Santiago Benitez
  • 364
  • 2
  • 12
  • This way I'll not have a package that is a need, and the main purpose of this happening is, I want to make a package outside any project and I can use it in any project by just importing it from the place where it is. – Haider Ali Anjum Sep 15 '17 at 07:04
  • I see in that case what you can do is upload the package to a private repo in git for instance and then install the package by using its URL. Does it make sense? Then you could – Santiago Benitez Sep 15 '17 at 07:09
  • Sorry I posted unintentionally. I was saying: then you could install the package in several projects – Santiago Benitez Sep 15 '17 at 07:09
  • But still the conversion from a git repository, having a couple of folders(non-project), to a PACKAGE is not clear. And also I can not use URLs in the package.json as a dependency. – Haider Ali Anjum Sep 15 '17 at 07:18
  • You can install packages by using the URL of a git repo. You can find an example here: https://stackoverflow.com/a/28729646/1644478. In order to convert your folders into a package you'll need to follow the steps described in the following link: https://docs.npmjs.com/getting-started/creating-node-modules. Let me know if it helped otherwise I'll try to find better links for you – Santiago Benitez Sep 15 '17 at 07:43
  • Actually I want to make a library/PACKAGE(that can be imported) of my own components and want to put them in a git repo (~src/components/....). this components folder will contain a folder for each of the component I made a having a index.jsx file. and besides the src folder there is a example folder which will contain a react project which is using the components I have made. Now I want to import components like a package instead of relative path. – Haider Ali Anjum Sep 15 '17 at 12:36
  • So I cannot put the components into a separate repository. – Haider Ali Anjum Sep 15 '17 at 12:37
  • I want something that makes a package of the components in that folder. and let me import that into any of the example project in the same repository. – Haider Ali Anjum Sep 15 '17 at 12:39
  • it's fine i think with the links i gave you should be able to build something like. Look at for instance: https://github.com/react-bootstrap/react-bootstrap. That package is very similar to what you want to do, there're exposed components which everyone is using in diff projects. The tricks are inside the package.json and how you build the package with webpack. There you will specify your main file and how to build your package. Look at the file in src/index.js, there all components are exposed. The diff is that your package will be in a private repo in you'll install it using its url – Santiago Benitez Sep 15 '17 at 12:50
  • Did it help man? If it did could you please accept my answer? – Santiago Benitez Sep 15 '17 at 22:52
  • Oh Yeah I did actually :) – Haider Ali Anjum Sep 16 '17 at 20:08
  • Yup makes sense! Done! Cheers! – Santiago Benitez Sep 17 '17 at 07:52
  • Hey Santiago Benitez, I tried your way, It was helpful. Thanks for your efforts, But, I got up something more closer to solve my problem. Have a look in y own answer to the problem. – Haider Ali Anjum Sep 20 '17 at 10:22
  • so I think what you're explaining is not very clear whether you're copying over the components on all of your projects or not. But aside from that I disagree with the fact of now unaccepting my answer. I gave you several links and ways of solving your problem which even from just looking at your implementation it proves that it was helpful and oriented you to what ever your solution is now. I think it's unfair and don't think this is the right way of using the platform – Santiago Benitez Sep 20 '17 at 11:47
  • Oh sorry i marked it unintentionally, I never thought i can accept my own answer. I turn it back. No hard feelings brother. – Haider Ali Anjum Sep 20 '17 at 11:50
  • Why was this marked as the answer? because it isn't an answer. – user1258361 Mar 27 '20 at 18:06