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

[ezhylin]

Expectation:
As a consumer of the library I would like to understand why I am getting the warning (see below) at build time using webpack and what should I do to get rid of it.

Actual:
during a build process, I see the following warning

WARNING in ./node_modules/axe-core/axe.js 6275:19-26
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/@axe-core/react/dist/index.js
 @ ./js/src/library/a11y.js
 @ ./js/src/index.js
 @ multi core-js/stable ./js/src/index.js

Misc:

"@axe-core/react": "^4.1.0",
"webpack": "^4.46.0",
"webpack-cli": "^4.5.0",

For Tooling issues:
- Node version: v14.16.0
- Platform:  Mac

[straker]

Thanks for the issue. I believe you'll want to open this in https://github.com/dequelabs/axe-core-npm (where @axe-core/react is held). Also, would you be able to provide how you're using react-axe / webpack? Are you using it or requireing it in any special way?

[ezhylin]

Thank you so much for the fast response, @straker !

Here is an example of how we require @axe-core/react in the app:

// a11y.js
import axeCore from '@axe-core/react';

export const axe = async (React, ReactDOM, { enabled = false, timeout = 5000, ...config }) => {
    if (enabled) {
        await axeCore(React, ReactDOM, timeout, config).catch(console.error);
    }
}

// index.js
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  document.getElementById(id),
);

axe(React, ReactDOM, {
  enabled: !!process.env.MY_ENV_VAR,
});

The webpack configuration is pretty simple. We use babel-loader to transpile JSX to JS and DefinePlugin to use environment variables. That's pretty much it.

[istateside]

I don't think this is an issue in the @axe-core/react library. I believe this was introduced with this line, added in the 4.1.3 release.

I think what's happening here is Webpack parses the word "require", but doesn't understand that you're checking that the value is defined and not actually importing a dependency, so it throws the warning.

I edited the line in my node_modules folder to drop the && require and the warning goes away. It's wrapped in a try block, so I think it's safe to just attempt to require the node library and let it throw if it fails.

I have a PR incoming

[straker]

This is now fixed in #2843. Will be available in the next release.

[brooksbecton]

I think I am seeing this in "@axe-core/react": "^4.5.1"

Steps I've taken

1. Created a new Create React App project
2. Ran npm i -D @axe-core/react which installed version 4.5.1
3. Added snippet in index.js

Add React Axe to Root Snippet

if (process.env.NODE_ENV !== "production") {
  import("@axe-core/react").then((axe) => {
    axe.default(React, ReactDOM, 1000);
    root.render(
      <StrictMode>
        <App />
      </StrictMode>,
    );
  });
} else {
  root.render(
    <StrictMode>
      <App />
    </StrictMode>,

  );
}

Then I am seeing these errors in the console that ran npm start

Critical dependency warning in terminal

WARNING in ./node_modules/axe-core/axe.js 399:46-53
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/axe-core/axe.js 406:15-22
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Axe does still seem to be providing accessibility warnings, so it is still working 👏
This warning just seems to come by default.

Reproduction Repo: https://github.com/brooksbecton/axe-core-react-warning-repro

[damian-krupa]

I am seeing the same issue as @brooksbecton using "vue-axe": "^2.4.4" with "axe-core": "^4.5.1". Webpack 5 throws this error during build.

[Harsha1401]

I am seeing the same issue as @brooksbecton and @damian-krupa using "react": "^17.0.0" with "axe-core": "^4.5.1". Webpack 5 throws this error during build.

./node_modules/axe-core/axe.js 379:46-53Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./node_modules/axe-core/axe.js 386:15-22Critical dependency: require function is used in a way in which dependencies cannot be statically extracted