markmanx/isoflow

The prod webpack doesn't generate an html file

joe-at-startupmedia opened this issue · 1 comments

The production webpack file doesn't generate an html file. Strangely enough, the development webpack does. I'm trying to generate a static distributable that doesn't require webpack dev server or node to run this project as is. This is where I got so far which produces a further error indicating that react-dom is not loaded properly.

+++ b/webpack/prod.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const webpack = require('webpack');

@@ -6,25 +7,25 @@ module.exports = {
   mode: 'production',
   target: 'web',
   entry: {
-    'index': './src/Isoflow.tsx',
+    'index': './src/index.tsx',
     '/standaloneExports': './src/standaloneExports.ts',
   },
   output: {
     path: path.resolve(__dirname, '../dist'),
     filename: '[name].js',
-    libraryTarget: 'commonjs2'
+    libraryTarget: 'umd'
   },
   externals: {
     react: {
       commonjs: 'react',
       commonjs2: 'react',
-      amd: 'React',
+      amd: 'react',
       root: 'React'
     },
     'react-dom': {
       commonjs: 'react-dom',
       commonjs2: 'react-dom',
-      amd: 'ReactDOM',
+      amd: 'react-dom',
       root: 'ReactDOM'
     }
   },
@@ -46,6 +47,9 @@ module.exports = {
     ]
   },
   plugins: [
+    new HtmlWebPackPlugin({
+      template: path.resolve(__dirname, '../src/index.html')
+    }),
index.js:2 Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')

This solved it. I'm not sure if completely removing externals, getting rid of standaloneExports entry or switching the libraryTarget, but I don't have anymore time to troubleshoot which of these fixed it.

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  target: 'web',
  entry: {
    'index': './src/index.tsx',
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.svg$/,
        type: 'asset/inline'
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, '../src/index.html')
    }),
    new webpack.DefinePlugin({
      PACKAGE_VERSION: JSON.stringify(require("../package.json").version),
      REPOSITORY_URL: JSON.stringify(require("../package.json").repository.url),
    })
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    plugins: [new TsconfigPathsPlugin()]
  }
};