Change Webpack Version

By default, your env uses webpack@5.51.1 and webpack-dev-server@4.1.0. To provide you env's preview service with different versions, implement the preview service in your env and pass an instance of webpack and/or webpack-dev-server (for the components' build and development).

/* @filename: my-react-env.bit-env.ts */

/* your base env */
import { ReactEnv } from '@teambit/react.react-env';
import type { ReactEnvInterface } from '@teambit/react.react-env';

import { ReactPreview } from '@teambit/preview.react-preview';

import type { EnvHandler } from '@teambit/envs';
import { Preview } from '@teambit/preview';

export class MyReactEnv extends ReactEnv implements ReactEnvInterface {
  name = 'my-react-env';

  /* replace the default preview service */
  preview(): EnvHandler<Preview> {
    /**
     * your env's preview tool
     * (in this specific example, preview for react)
     * */
    return ReactPreview.from({
      /* use the path to the webpack version this env has as a dependency */
      webpackModulePath: require.resolve('webpack'),
      webpackDevServerModulePath: require.resolve('webpack-dev-server'),
    });
  }
}

export default new MyReactEnv();
Copied

You env' preview requires a path to the Webpack instance, not an instance of Webpack. Because of that, Webpack is not imported by the env, which leads to Bit failing to detect Webpack as a dependency of that env.

To address that, manually add Webpack and Webpack dev server as dependencies of that env:

$bit deps set my-react-env webpack@5.64.4 webpack-dev-server@4.6.0

Copied

Install the new package versions in your workspace:

$bit install

Copied

Run the following to compile your env:

$bit compile

Copied