Merge pull request #19 from knowankit/fix/source-map-with-other-issues

Fix source map, webpack build, react import

README.md

@@ -114,6 +114,7 @@ Congratlations 🎉, you have published your package
 ## Libraries bootstrapped from this CLI - build-react-npm
 
 * [React bubble effect button](https://github.com/knowankit/react-bubbly-effect-button)
+* [Particle effect on text](https://github.com/knowankit/particle-text-effect)
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "build-react-npm",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Create your react npm library and publish it in no time",
   "main": "src/index.js",
   "scripts": {

templates/javascript/src/example-component.js

@@ -1,5 +1,6 @@
 import styles from './index.module.css';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 const ExampleComponent = ({ text }) => {
   return <h1 className={styles.test}>{text}</h1>;

templates/javascript/webpack.config.js

@@ -6,6 +6,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = env => {
   const config = {
     mode: env.development ? 'development' : 'production',
+    devtool: 'inline-source-map',
     entry: env.development
       ? `${path.resolve(__dirname, './src/index.js')}`
       : `${path.resolve(__dirname, './src/example-component.js')}`,
@@ -46,7 +47,21 @@ module.exports = env => {
     resolve: {
       extensions: ['.js', '.jsx']
     },
-    plugins: [new CleanWebpackPlugin()]
+    plugins: [new CleanWebpackPlugin()],
+    externals: {
+      react: {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react'
+      },
+      'react-dom': {
+        root: 'ReactDOM',
+        commonjs2: 'react-dom',
+        commonjs: 'react-dom',
+        amd: 'react-dom'
+      }
+    }
   };
 
   if (env.development) {

templates/typescript/webpack.config.js

@@ -3,9 +3,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-module.exports = (env) => {
+module.exports = env => {
   const config = {
     mode: env.development ? 'development' : 'production',
+    devtool: 'inline-source-map',
     entry: {
       main: env.development
         ? `${path.resolve(__dirname, './src/index.tsx')}`
@@ -43,7 +44,21 @@ module.exports = (env) => {
     resolve: {
       extensions: ['.tsx', '.ts', '.js']
     },
-    plugins: [new CleanWebpackPlugin()]
+    plugins: [new CleanWebpackPlugin()],
+    externals: {
+      react: {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react'
+      },
+      'react-dom': {
+        root: 'ReactDOM',
+        commonjs2: 'react-dom',
+        commonjs: 'react-dom',
+        amd: 'react-dom'
+      }
+    }
   };
 
   if (env.development) {