Webpack config fix

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
+  }

.storybook/preview.js

@@ -1,4 +1,4 @@
-import '../styles.scss';
+// import '../styles.scss';
 
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {

package.json

@@ -29,12 +29,17 @@
   },
   "author": "hide-on-bush",
   "dependencies": {
+    "@babel/preset-typescript": "^7.21.0",
     "@masa-finance/masa-sdk": "^1.4.3",
     "@metamask/providers": "^10.2.1",
+    "babel-loader": "^9.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "html-webpack-plugin": "^5.5.0",
     "react": "^18.2.0",
     "react-query": "^3.39.3",
     "react-spinners": "^0.13.8",
-    "rodal": "^2.0.0"
+    "rodal": "^2.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",

src/provider/masa-provider.tsx

@@ -8,7 +8,7 @@ import { QueryClientProvider } from 'react-query';
 import { useMetamask } from './use-metamask';
 import { queryClient } from './masa-query-client';
 
-import '../../styles.scss';
+// import '../../styles.scss';
 import { MasaInterface } from '../components';
 
 export const MasaProvider = ({

tsconfig.json

@@ -1,16 +1,12 @@
 {
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "compilerOptions": {
     "target": "ES2015",
     "module": "ESNext",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "importHelpers": true,
+    "baseUrl": "./src",
     // output .d.ts declaration files for consumers
     "declaration": true,
     // output .js.map sourcemap files for consumers

webpack.config.js

@@ -1,26 +1,70 @@
-'use strict';
-const common = require('./webpack.common.js');
-const { outputs } = require('./webpack.parts.js');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { ProvidePlugin } = require('webpack');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
-const PRODUCTION = process.env.NODE_ENV === 'production';
+module.exports = (env, argv) => {
+  const isProduction = argv.mode === 'production';
 
-// '[libraryTarget]': [file extension]
-const OUTPUT_MAPPING = {
-  amd: 'amd',
-  commonjs: 'cjs',
-  commonjs2: 'cjs2',
-  umd: 'umd',
-  window: 'window',
+  return {
+    entry: './src/index.tsx',
+    output: {
+      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+      plugins: [new TsconfigPathsPlugin()],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                '@babel/preset-react',
+                '@babel/preset-typescript',
+              ],
+            },
+          },
+        },
+        {
+          test: /\.(sa|sc|c)ss$/,
+          use: [
+            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
+            'css-loader',
+            'sass-loader',
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new CleanWebpackPlugin(),
+      new ProvidePlugin({
+        React: 'react',
+      }),
+      new ForkTsCheckerWebpackPlugin(),
+    ].concat(
+      isProduction
+        ? [
+            new MiniCssExtractPlugin({
+              filename: '[name].[contenthash].css',
+            }),
+          ]
+        : []
+    ),
+    devtool: isProduction ? undefined : 'eval-cheap-module-source-map',
+    devServer: {
+      contentBase: path.join(__dirname, 'public'),
+      compress: true,
+      port: 3000,
+    },
+  };
 };
-
-const OVERRIDES = {
-  // optimization: {
-  //     minimize: false
-  // }
-};
-
-if (PRODUCTION) {
-  module.exports = outputs(common, 'production', OUTPUT_MAPPING, OVERRIDES);
-} else {
-  module.exports = outputs(common, 'development', OUTPUT_MAPPING, OVERRIDES);
-}