Critical dependency: the request of a dependency is an expression

[Osaxely]

Describe the bug This critical error appears when I test my app on the following environment: React, Typescript and Webpack.

To Reproduce Steps to reproduce the behavior:

1. Create a new react project with Typescript
2. Use Webpack as a bundler
3. Install this library
4. Initialize it
5. npm start and the issue will occur.

Expected behavior The library should be bundled without showing a critical warning.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Google Chrome (latest version)
• Version: 115

Additional context Here is my webpack config file in case it can help out:

const path = require("path");
const prod = process.env.NODE_ENV === "production";
const CopyWebpackPlugin = require("copy-webpack-plugin");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: prod ? "production" : "development",
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  devServer: {
    port: 3000,
    historyApiFallback: true,
    static: "./",
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: "ts-loader",
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: "asset/resource", // Use asset/resource to handle images
        generator: {
          filename: "images/[name].[hash].[ext]", // Output path and filename format for images
        },
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],
  },
  devtool: prod ? undefined : "source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new MiniCssExtractPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        { from: "./public/manifest.json", to: "./manifest.json" },
        { from: "./public/favicon.ico", to: "./favicon.ico" },
        { from: "./public/robots.txt", to: "./robots.txt" },
        { from: "./public/images", to: "./images" },
      ],
    }),
    new MiniCssExtractPlugin(),
  ],
};

And here is my tsconfig file:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["dom", "esnext"],
    "strict": true,
    "sourceMap": true,
    "target": "esnext"
  },
  "exclude": ["node_modules"]
}

[jeromewu]

Can you share your code base via a github link?

[linus-jansson]

Having the same problem with NextJS 13. Running regular webpack spits out

- warn ./node_modules/@ffmpeg/ffmpeg/dist/esm/worker.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/@ffmpeg/ffmpeg/dist/esm/worker.js
./node_modules/@ffmpeg/ffmpeg/dist/esm/classes.js
./node_modules/@ffmpeg/ffmpeg/dist/esm/index.js
./src/app/tools/gifr/page.tsx

Running with the new turbopack feature does not give an y errors or warnings. Tried with node 16, 18 and 20 running on Arch Linux.

Here is a repo

EDIT: Also getting this error using webpack when getting ffmpeg-core js and wasm from unpkg

I've been using This example partially.

EDIT 2: Seems to be a problem with the version of ffmpeg core that I was using, copied the url from the docs page (This CDN Changing esm to umd made it everything work

EDIT3: Ffmpeg works, but I still get the warning

[jeromewu]

The error should be fixed in 0.12.3, the warning should be OK as long as ffmpeg.wasm works.

[JimmyLv]

😁 It looks like v0.12.4 still has this problem:

[jeromewu]

Feel free to check nextjs example here: https://ffmpegwasm.netlify.app/docs/getting-started/examples