Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Bug report

WARNING in ./node_modules/bin-wrapper/index.js 5:34-41
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/pngquant-bin/lib/index.js
 @ ./node_modules/pngquant-bin/index.js
 @ ./node_modules/imagemin-pngquant/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps

WARNING in ./node_modules/execa/node_modules/cross-spawn/index.js
Module not found: Error: Can't resolve 'spawn-sync' in '/home/arindampradhan/Bitbucket/website_v3/node_modules/execa/node_modules/cross-spawn'
 @ ./node_modules/execa/node_modules/cross-spawn/index.js
 @ ./node_modules/execa/index.js
 @ ./node_modules/exec-buffer/index.js
 @ ./node_modules/imagemin-webp/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps

WARNING in ./node_modules/imagemin-mozjpeg/node_modules/cross-spawn/index.js
Module not found: Error: Can't resolve 'spawn-sync' in '/home/arindampradhan/Bitbucket/website_v3/node_modules/imagemin-mozjpeg/node_modules/cross-spawn'
 @ ./node_modules/imagemin-mozjpeg/node_modules/cross-spawn/index.js
 @ ./node_modules/imagemin-mozjpeg/node_modules/execa/index.js
 @ ./node_modules/imagemin-mozjpeg/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/cross-spawn/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/arindampradhan/Bitbucket/website_v3/node_modules/cross-spawn'
 @ ./node_modules/cross-spawn/index.js 3:11-35
 @ ./node_modules/imagemin-pngquant/node_modules/execa/index.js
 @ ./node_modules/imagemin-pngquant/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/execa/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/arindampradhan/Bitbucket/website_v3/node_modules/execa'
 @ ./node_modules/execa/index.js 2:21-45
 @ ./node_modules/exec-buffer/index.js
 @ ./node_modules/imagemin-webp/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/execa/node_modules/cross-spawn/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/arindampradhan/Bitbucket/website_v3/node_modules/execa/node_modules/cross-spawn'
 @ ./node_modules/execa/node_modules/cross-spawn/index.js 3:9-33
 @ ./node_modules/execa/index.js
 @ ./node_modules/exec-buffer/index.js
 @ ./node_modules/imagemin-webp/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/imagemin-mozjpeg/node_modules/cross-spawn/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/arindampradhan/Bitbucket/website_v3/node_modules/imagemin-mozjpeg/node_modules/cross-spawn'
 @ ./node_modules/imagemin-mozjpeg/node_modules/cross-spawn/index.js 3:9-33
 @ ./node_modules/imagemin-mozjpeg/node_modules/execa/index.js
 @ ./node_modules/imagemin-mozjpeg/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/imagemin-mozjpeg/node_modules/execa/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/arindampradhan/Bitbucket/website_v3/node_modules/imagemin-mozjpeg/node_modules/execa'
 @ ./node_modules/imagemin-mozjpeg/node_modules/execa/index.js 2:21-45
 @ ./node_modules/imagemin-mozjpeg/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps

ERROR in ./node_modules/imagemin-pngquant/node_modules/execa/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/arindampradhan/Bitbucket/website_v3/node_modules/imagemin-pngquant/node_modules/execa'
 @ ./node_modules/imagemin-pngquant/node_modules/execa/index.js 3:21-45
 @ ./node_modules/imagemin-pngquant/index.js
 @ ./node_modules/image-webpack-loader/index.js
 @ dll reactBoilerplateDeps
Done in 13.98s.

What is the current behavior?

After installing new modules like https://github.com/Hellenic/react-hexgrid
the build started failing

What is the expected behavior?

Other relevant information:
webpack version: “4.12.0”
Node.js version: v8.11.3
Operating System: Ubuntu 14.04.5 LTS
Additional tools: yarn

Author: Fantashit

3 thoughts on “Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Comments are closed.

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Bug report

Hi,

I got an error when I try to run webpack and awesome-typescript-loader (the same issue occurs with ts-loader), to package a typescript serverless function, with a dependency package named 'imagemin-jpegtran' :

  • Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Edit : this error occurs because of bin-wrapper module which is using require('import-lazy')(require);
https://github.com/kevva/bin-wrapper/blob/master/index.js#L5

What is the current behavior?

WARNING in ./node_modules/bin-wrapper/index.js 5:34-41
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./node_modules/jpegtran-bin/lib/index.js
@ ./node_modules/jpegtran-bin/index.js
@ ./node_modules/imagemin-jpegtran/index.js
@ ./src/index.ts

If the current behavior is a bug, please provide the steps to reproduce.

package.json

{
  "name": "test-jpegtran-bin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "imagemin-jpegtran": "^5.0.2"
  },
  "devDependencies": {
    "@types/imagemin-jpegtran": "^5.0.0",
    "@types/node": "^10.11.6",
    "@types/webpack": "^4.4.16",
    "awesome-typescript-loader": "^5.2.1",
    "source-map-loader": "^0.2.4",
    "ts-node": "^7.0.1",
    "typescript": "^3.1.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "start": "webpack"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

module.exports = {
    mode: 'production',
    entry: "./src/index.ts",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    target: 'node',
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
        ]
    },
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "lib": [
            "es6"
        ]
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

src/index.ts

import * as  imageminJpegtran from 'imagemin-jpegtran';
imageminJpegtran();

Other relevant information:
webpack version: 4.20.2
Node.js version: v10.11.0
Operating System: Windows 10

Author: Fantashit

3 thoughts on “Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

  1. Workaround while this is not fixed, if you need to reference require server-side in a code base that is (also) webpacked:

    const foobarRequire = m => eval('require')(m); // trick webpack
  2. I’m curious, why are there so many thumbs down on this comment?

    May be, because the require is generated by the compiler. We cannot edit all the files every time that we compile our ts code.

Comments are closed.

🐛 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "last 2 versions"
      }
    }],
    "react"
  ],
  "plugins": [
    "transform-react-jsx",
    "transform-object-rest-spread",
    "transform-class-properties",
    "transform-es2015-modules-commonjs"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

package.json

  "scripts": {
    "start": "parcel ./src/index.html -d ./demo -o",
    "build": "parcel ./src/index.js"
  },
  "dependencies": {
    "currency.js": "^1.0.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "react-dom": "^16.2.0"
  }

😯 Current Behavior

Terminal:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Browser console:

Uncaught Error: Cannot find module "."
    at webpackMissingModule (index.js:60)
    at ../react-currency-input/dist/index.js.require.14 (index.js:60)

💁 Possible Solution

I got nothing

🔦 Context

I wrote a small react component and tried publishing it to our npm org and then Import it in another project.

It runs just fine with parcel, problems only appear when trying to import it on other applications. (the other app is running on create-react-app).

🌍 Your Environment

Software Version(s)
Parcel 1.2.1
Node 8.6.0 (nvm)
npm/Yarn 5.3.0 (npm) / 1.2.1 (yarn)
Operating System Mac OSX El Capitan

Author: Fantashit

2 thoughts on “🐛 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Comments are closed.