Fix JSX issue on building

Change width in sender button

Author: mcallegari10

.gitignore

@@ -7,7 +7,7 @@ yarn-error.log
 .DS_Store
 
 # Build files
-# lib
+./lib
 
 # Test files
 coverage

dev/App.tsx

@@ -47,7 +47,6 @@ export default class App extends Component {
         imagePreview
         handleSubmit={this.handleSubmit}
         emojis
-        resizable
       />
     );
   }

index.js

@@ -1,3 +1,5 @@
+import 'react/jsx-runtime';
+
 import ConnectedWidget from './src';
 import {
   addUserMessage,

lib/index.js

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-widget",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Chat web widget for React apps",
   "main": "lib/index.js",
   "repository": "[email protected]:Wolox/react-chat-widget.git",
@@ -34,15 +34,16 @@
     "@babel/core": "^7.14.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/preset-env": "^7.14.1",
-    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.8.3",
     "@toycode/markdown-it-class": "^1.2.3",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.4",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.7",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",

lib/styles.css

@@ -23,7 +23,7 @@
   border-radius: 5px;
   padding: 10px 5px;
   resize: none;
-  width: calc(100% - 45px);
+  width: calc(100% - 75px);
 
   &:focus {
     outline: none;

package-lock.json

@@ -12,7 +12,7 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "target": "es6",
-    "jsx": "react-jsxdev",
+    "jsx": "react-jsx",
     "allowJs": true,
     "lib": [
       "dom",

package.json

@@ -16,7 +16,12 @@ module.exports = {
     clean: true
   },
   resolve: {
-    extensions: ['.tsx', '.ts', '.js']
+    extensions: ['.tsx', '.ts', '.js'],
+    alias: {
+      react: path.resolve(__dirname, './node_modules/react'),
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+      'react/jsx-runtime': require.resolve('./node_modules/react/jsx-runtime')
+    }
   },
   target: 'web',
   mode: 'production',
@@ -76,17 +81,22 @@ module.exports = {
       filename: 'styles.css',
       chunkFilename: '[id].css'
     }),
+    new webpack.ProvidePlugin({
+      'react': 'React'
+    })
   ],
   externals: {
     react: {
-      commonjs: 'React',
+      root: 'React',
       commonjs2: 'react',
+      commonjs: 'react',
       amd: 'react'
     },
     'react-dom': {
-      commonjs: 'ReactDOM',
-      commonjs2: 'react-dom',
-      amd: 'react-dom'
+        root: 'ReactDOM',
+        commonjs2: 'react-dom',
+        commonjs: 'react-dom',
+        amd: 'react-dom'
     }
   },
   optimization: {