How can I import React Components as a package/module from some other(non-project) directory?

user_8404234 0
Viewed 3698

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

reactjs import module package javascript
2 Answers

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.

user_84042340
Related