publish:npm - How can I set react npm components location on each built

user_5516725 0
Viewed 61

I am new to creating the npm package.

I have created my first react npm package using the following blog - https://www.codementor.io/@peterodekwo/create-a-simple-react-npm-package-in-simple-steps-using-cra-w966okagi

and it was published successfully and work fine in react as expected.

So what's the problem.

When I install my npm package and implement it. I have to use the following code to import.

import Card from 'owaiz-test/dist/Card';
import Button from 'owaiz-test/dist/Button';

https://prnt.sc/1cpkvsy

The problem with the dist folder. I don't want to use the dist folder to be written.

I want something like

import Card from 'owaiz-test/Card';
import Button from 'owaiz-test/Button';

I know it's compiling the code from my package.json file mentioned below.

"publish:npm": "rm -rf dist && mkdir dist &&  babel ./src/components -d dist --copy-files"

But, How can I make changes in the code above or any other solution?

Update:

ADD Package.json

{
  "name": "owaiz-test",
  "version": "0.1.1",
  "private": false,
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist &&  babel ./src/components -d dist --copy-files"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/preset-react": "^7.0.0"
  }
}

Update 2

{
  "name": "owaiz-test",
  "version": "0.1.1",
  "private": false,
  "main": "dist/index.cjs.js",
  "browser": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "peerDependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist &&  babel ./src/index.js -d dist --copy-files"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/preset-react": "^7.0.0"
  }
}
npm reactjs node.js
1 Answers

You need to edit package.json

Create index.js file as a main entry for your package

import Card from './components/Card'
import Button from './components/Button'

export { Card, Button }

Use index.js during bundling:

"publish:npm": "...babel ./src/index.js ..."

Set main and browser fields(module for esm packages can skip, types for TypeScript definitions):

  "main": "dist/index.cjs.js",
  "browser": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",

Docs

Also need to add react and react-dom to peerDependencies not to dependencies, so it will not be bundled with your code What is the correct way of adding a dependency to react in your package.json for a react component

UPD Article from question is total crap, those are better: https://blog.logrocket.com/the-complete-guide-to-publishing-a-react-package-to-npm/

https://dev.to/jimjunior/how-to-create-an-npm-library-from-react-components-2m2

But still can be some caveats.

user_55389120
Related