Using vite components in a react + webpack app slows the build process

[feljimgon1]

EDIT

For some reason, webpack is not recognizing the vite project as a node dependency (which should, as it comes from node_modules), any ideas?

• Webpack analyzer for vite dependency + webpack

• Webpack analyzer for webpack dependency + webpack]

---

ORIGINAL QUESTION

For a little bit of context, we're performing a migration that involves creating a UI component library which is a monorepo that includes a number of vite projects. Each vite project corresponds to a specific component (for instance, a Button component, a Modal, etc.).

This library was done in the past with a different structure and using webpack, so no functional changes are applied, just migration from webpack -> vite.

Each component has the following vite.config.js

import { defineConfig } from 'vite'
import path from 'path'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react(),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/main.jsx'),
      name: 'my-component'
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        exports: "named",
        globals: {
          'react': 'React',
          'react-dom': 'ReactDOM'
        }
      }
    },
  },
})

So when running:

- yarn build
- npm version patch --workspace=my-component
- npm publish --workspace=my-component

My component is built and stored in a dist folder, which is published into our repository.

Now I'm trying to use those components from another app that we have built with React and webpack (not gonna be migrated to vite).

The issue that we're encountering is that it gets stuck at 87% sealing code generation when adding the vite components.

Is there a specific configuration needed for webpack to build vite projects?

My webpack config:

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpack = require('webpack')
const AddPropsPlugin = require('./add-props-plugin')
const AddDepsToHost = require('@remote-comp/add-deps-to-host-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const Dotenv = require('dotenv-webpack')
const path = require('path')
const CDN_PATH =
  process.env.CDN_PATH ||
  'some-url'

module.exports = function (_env, argv) {
  const production = ...
  const development = !production
  const analyze = Boolean(argv.analyze)
  process.env.NODE_ENV = process.env.NODE_ENV || production
    ? 'production' : 'development' 
  return {
    devtool: development && 'cheap-module-source-map',
    entry: './my-entry-file.js',
    externals: {
      react: 'react',
      'react-redux': 'react-redux',
      'react-router': 'react-router',
      'react-router-dom': 'react-router-dom',
    },
    output: {
      libraryTarget: 'commonjs',
      path: path.resolve(__dirname, 'my-path'),
      filename: 'js/[name].[contenthash:8].js',
      publicPath: CDN_PATH,
    },
    module: {
      rules: [
        {
          test: /\.js(x)?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              cacheCompression: true,
              envName: production ? 'production' : 'development',
            },
          },
        },
        {
          test: /\.s[ac]ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /\.svg/,
          use: [
            {
              loader: 'svg-url-loader',
              options: {
                limit: 10000,
                name: 'media/[name].[contenthash:8].[ext]',
              },
            },
          ],
        },
        {
          test: /\.(png|jpg|gif)$/i,
          use: {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'media/[name].[contenthash:8].[ext]',
            },
          },
        },
        {
          test: /\.(eot|otf|ttf|woff|woff2)$/,
          loader: require.resolve('file-loader'),
          options: {
            name: 'media/[name].[contenthash:8].[ext]',
          },
        },
        {
          test: /(gitInfo\.txt)$/,
          loader: require.resolve('url-loader'),
          options: {
            name: 'assets/[name].[contenthash:8].[ext]',
          },
        },
      ],
    },
    resolve: {
      modules: [path.resolve(__dirname, './src'), 'node_modules'],
      extensions: ['.js', '.jsx', '.json'],
      fallback: {
        "path": require.resolve("path-browserify")
      }
    },
    plugins: [
      new webpack.ProgressPlugin((percentage, message, ...args) => {
        console.log((percentage * 100).toFixed(2) + '%', message, ...args);
      }),
      new Dotenv(),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
      }),
      new webpack.ProgressPlugin(),
      new AddPropsPlugin(),
      new CleanWebpackPlugin(),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(
          production ? 'production' : 'development',
        ),
        'process.env.CDN_PATH': JSON.stringify(CDN_PATH),
      }),
      new AddDepsToHost({
        name: 'my-host',
      }),
      analyze ? new BundleAnalyzerPlugin() : null,
    ].filter(Boolean),
    optimization: {
      minimize: production,
      moduleIds: 'named',
      minimizer: [
        new TerserWebpackPlugin({
          terserOptions: {
            sourceMap: true,
            compress: {
              comparisons: false,
            },
            mangle: {
              safari10: true,
            },
            output: {
              comments: false,
              ascii_only: true,
            },
            warnings: false,
          },
        }),
        new OptimizeCssAssetsPlugin(),
      ],
    },
  }
}

I've tried debugging with this plugin (wasn't there before)

      new webpack.ProgressPlugin((percentage, message, ...args) => {
        console.log((percentage * 100).toFixed(2) + '%', message, ...args);
      }),

But just stalls at 87%:

86% sealing record chunks86.67% sealing record chunks RecordIdsPlugin
86% sealing record chunks RecordIdsPlugin86.67% sealing record chunks
86% sealing record chunks87.31% sealing module hashing
87% sealing module hashing87.31% sealing module hashing
87% sealing module hashing87.95% sealing code generation
87% sealing code generation87.95% sealing code generation
87% sealing code generation

Also added in externals

'react-dom': 'react-dom',

to match the vite.config.js but that didn't work either.

I also increased NODE_OPTIONS=--max-old-space-size=8192 as at some point it was throwing a FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory, so I'm assuming the issue is related to webpack struggling to load vite builds.

Node version: 20.6.1

[alexander-akait]

We don't build vite projects, we build JS projects, it makes no difference which bundler do you use, I think the problem somewhere in your plugins or outdated deps, if you provide reproducible test repo I will look

[feljimgon1]

HI @alexander-akait, I think I might have found the issue, which were some adjustments needed in vite side (adding the dependencies and devDependencies in rollupOptions.external).

That optimizes everything and makes it load faster (files that may have been 600kB were reduced to 20kB).

Somehow webpack still recognizes the dependencies as part of the source code instead of dependencies. However I think that's some more configuration in vite side (https://vitejs.dev/guide/dep-pre-bundling#monorepos-and-linked-dependencies - tried this but didn't work, but I think there's something else needed there).

Thank you so much for your response though!