Error: Critical dependency: the request of a dependency is an expression when importing convict into react-app

[AntonyM71]

I receive the following error when trying to use Convict in my create-react-app application. It appears to be related to how convict imports parseArgs from yarns-parser

TypeError: parseArgs is not a function
importArguments
node_modules/convict/src/main.js:326
  323 | }
  324 | 
  325 | function importArguments(o) {
> 326 |   const argv = parseArgs(o.getArgs(), {
  327 |     configuration: {
  328 |       'dot-notation': false
  329 |     }

In my terminal, the following message is displayed:

./node_modules/convict/node_modules/yargs-parser/build/lib/index.js
Critical dependency: the request of a dependency is an expression

Here is my package.json

{
  "name": "aems-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@rjsf/core": "^2.5.1",
    "@rjsf/material-ui": "^2.5.1",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@types/convict": "^6.1.1",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.19.13",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "@types/react-router-dom": "^5.1.7",
    "@types/recoil": "0.0.1",
    "axios": "^0.24.0",
    "convict": "^6.2.1",
    "eslint-plugin-jest-dom": "^4.0.0",
    "eslint-plugin-prefer-arrow": "^1.2.2",
    "eslint-plugin-testing-library": "^5.0.1",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.21",
    "prettier": "^2.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-hot-toast": "^2.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-testing-library": "^8.0.1",
    "react-toast-notifications": "^2.4.3",
    "recoil": "^0.2.0",
    "recoil-nexus": "^0.3.10",
    "sass": "^1.32.4",
    "ts-jest": "^27.0.7",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --coverage --watchAll=false",
    "testwatch": "react-scripts test --coverage",
    "eject": "react-scripts eject",
    "lint": "npx eslint ./src",
    "lintfix": "npx eslint ./src --fix"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/lodash": "^4.14.168",
    "@types/uuid": "^8.3.0",
    "@typescript-eslint/eslint-plugin": "^4.13.0",
    "@typescript-eslint/eslint-plugin-tslint": "^4.33.0",
    "@typescript-eslint/parser": "^4.13.0",
    "eslint": "^7.17.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "tslint": "^6.1.3"
  },
  "jest": {
    "transformIgnorePatterns": []
  }
}

[nicholeuf]

This same message is a warning in our webpack build. We do not use create-react-app. The warning has been present ever since we introduced this dependency. The warning has bothered me but the benefits of the library were worth it. It would be nice to see this warning resolved.

WARNING in ./node_modules/yargs-parser/build/index.cjs 1021:19-32
Critical dependency: the request of a dependency is an expression
@ ./node_modules/convict/src/main.js 9:18-41

[nicholeuf]

As described in my earlier comment, I am seeing this message as a warning in my webpack build.

While searching for a solution, I found mention of setting CI=false as a solution for preventing these warnings from being treated as errors, which may help you @AntonyM71 .

[c-sauerborn]

Hello, we have a big react app and receive the same error, when we try upgrading from convict: 6.0.0 to 6.2.2:

TypeError: parseArgs is not a function
        at importArguments ([...]/repo/node_modules/convict/src/main.js:332:16)
        at convict ([...]/repo/node_modules/convict/src/main.js:717:3)

Adding CI=false to the process didn't help. Any other ideas?

[c-sauerborn]

We could fix the issue.
In our jest.preset.js we have some transformations configured and in the transformIgnorePatterns, the file ending cjs was missing. Because of that it was transforming the .cjs files from yargs-parser and convict failed to use those files during the test runs.

transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { rootMode: 'upward' }],
    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': 'jest-transform-stub',
  },
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(cjs|js|jsx|ts|tsx)$']

[madarche]

Thanks @c-sauerborn 👍

Closing this ticket as this is not a convict problem.