create-npm-package | Creates an npm package boilerplate | Runtime Evironment library

TLDR: Detailed step by step guide

A couple things have changed since the writing of the tutorial namely the following are the breaking changes, unless listed otherwise the other steps in the tutorial are the same:

1. You will need to download and use the babel-cli in order to get your custom "lib" script command to work:

   npm install --save-dev @babel/cli

2. You will also need to download and use the @babel/plugin-transform-react-jsx plugin within your custom "lib" script command to compile and transform your React code since Babel 6 and up no longer have any native transforms for React. This is necessary for when you want to share your custom component with only native JavaScript on npmjs for others.

   npm install --save-dev @babel/plugin-transform-react-jsx

3. Update your "lib" script command to use the babel's JSX transforming plugin listed in step 2:

   "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "lib": "babel --plugins @babel/transform-react-jsx src/node_modules --out-dir lib --copy-files", "test": "node scripts/test.js" },

Note: You also don't need the .babelrc file listed in the tutorial as we will edit the webpack.config.js file to properly transpile JSX later on.

Steps 1 - 3 will allow you to publish and share your component with others, but you will still have to make adjustments for your local development and I will describe those steps below:

1. For your custom component's package.json remove the .js extension for the "main" entry point as this will cause the following issue. For example, here is my custom component's package.json:

   { "private": true, "name": "YourComponent", "main": "./YourComponent" }

Now if you try to compile and run your application locally, using your custom component, it will throw an error complaining about your custom component's JSX syntax:

SyntaxError: YourComponent.js: Unexpected token (6:6)