How can import modules in dist folder in background.js?

Question

I'm currently working on a chrome extension to record meet meeting and i'm using webRTC to do so. So i created the whole thing but discovered webRTC was not recording when the pop-up was closed so i created a background.js to handle this.

The issue is I'm using webpack to build my extension into a dist folder and when I export background.js in dist and try to use the extension in Chrome i get the following error:

Uncaught TypeError: Failed to resolve module specifier "recordrtc". Relative references must start with either "/", "./", or "../". Contexte background.js.

Here are my manifest.json, webpack.config.js and background.js:

manifest.json:

{
    "manifest_version": 3,
    "name": "...",
    "version": "1.0",
    "description": "Enregistrez vos réunions Google Meet.",
    "permissions": ["activeTab", "storage", "identity"],
    "background": {
        "service_worker": "background.js",
        "type": "module"
      },
    "action": {}
  }
  

webpack.config.js:

const path = require("path");
const HTMLPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const nodeExternals = require("webpack-node-externals");

module.exports = {
    entry: {
        index: "./src/index.tsx",
        background: "./background.js"
    },
    mode: "production",
    module: {
        rules: [
            {
              test: /\.tsx?$/,
               use: [
                 {
                  loader: "ts-loader",
                   options: {
                     compilerOptions: { noEmit: false },
                    }
                  }],
               exclude: /node_modules/,
            },
            {
              exclude: /node_modules/,
              test: /\.css$/i,
               use: [
                  "style-loader",
                  "css-loader"
               ]
            },
        ],
    },
    externals: [nodeExternals()],
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "manifest.json", to: "../manifest.json" },
                { from: "background.js", to: "../background.js" }
            ],
        }),
        ...getHtmlPlugins(["index"]),
    ],
    resolve: {
        alias: {
            'recordrtc': require.resolve('recordrtc'),
        },
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        path: path.join(__dirname, "dist/js"),
        filename: "[name].js",
    },
};

function getHtmlPlugins(chunks) {
    return chunks.map(
        (chunk) =>
            new HTMLPlugin({
                title: "React extension",
                filename: `${chunk}.html`,
                chunks: [chunk],
            })
    );
}

background.js(in the same folder as webpack.config.js and manifest.json):

import RecordRTC from 'recordrtc';

let recording = false;
let recorder  = null;

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'startRecording' && !recording) {
        startRecording();
        sendResponse({ success: true });
        console.log("Back start signal received !");
    } else if (message.action === 'stopRecording' && recording) {
        stopRecording();
        sendResponse({ success: true });
        console.log("Back stop signal received !")
    }
});

function startRecording() {
    navigator.mediaDevices
        .getDisplayMedia({ video: true })
        .then((stream) => {
            recorder = new RecordRTC(stream, {
                type: 'video',
                mimeType: 'video/webm',
                bitsPerSecond: 128000,
            });

            recorder.startRecording();

            recording = true;variable globale)
        })
        .catch((error) => {
            console.error('Erreur lors de la capture de l\'écran :', error);
        });
}

function stopRecording() {
    if (recorder) {
        recorder.stopRecording(() => {
            if (recorder) {
                const blob = recorder.getBlob();
                if (blob) {
                    const url = URL.createObjectURL(blob);

                    chrome.runtime.sendMessage({ action: 'recordingComplete', url });

                    recording = false;
                    recorder = null;
                }
            }

        });
    }
}

I've added nodeExternals to webpack.config.json to try to get the module in dist. I've exported background.js in fist. I've tryed to put manually recordRTC folder from node_modules in dist.

I just need to use a button that starts the recording, the pop up goes away and when i click back i can stop the recording and dowload it(already implemented).

Is that a problem with my webpack.config.js ?