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

[olalonde]

I added console.log(require.ensure) to my code and it resulted in thousands of error lines from webpack. Had to increase my tmux scrollback to 40K lines to see what happened.

[...]
WARNING in ./src/routes.js
Critical dependencies:
158:18-25 require function is used in a way in which dependencies cannot be statically extracted
 @ ./src/routes.js 158:18-25

WARNING in ./src/containers/Admin/TODO.md
Module parse failed: /Users/olalonde/code/project/src/containers/Admin/TODO.md Unexpected token (1:13)
You may need an appropriate loader to handle this file type.

[...]

Not sure if it's really a bug but would have been nice if that message had been isolated from all the subsequent thousands of error lines that are really irrelevant.

[sokra]

This is fixed in webpack@2

[minnaq]

with webpack@2, it's reproduced again.

function getAsyncComponent(path, chunkname) {
  return function(nextState, cb) {
    require.ensure([], function(require) {
      cb(null, require(path).default)
    }, chunkname)
  }
}

const Routes = (
  <Router history={browserHistory}>
    <Route path='/' getComponent ={ getAsyncComponent('./App.jsx','asyncApp') }>
      <IndexRoute component ={ Home} />
      <Route path='/hello' component = {Hello} />
      <Route path='author' component = {AuthorList}>
        <Route path= ':id' component = {Author} />
      </Route>
    </Route>
  </Router>

)

export default Routes;

[Jessidhia]

@minnaq it indeed is being used in a way in which dependencies cannot be statically extracted.

require.ensure([] is asking for webpack to load 0 modules (???), but more importantly, the require(path) is a require of a free variable with no context. Webpack doesn't go as far as doing program flow analysis to find out that your getAsyncComponent is only called with './App.jsx' with chunkname asyncApp.

[mnpenner]

@Kovensky

require.ensure([] is asking for webpack to load 0 modules (???)

That part seems to be supported. Search this page for []. However, I can't find any information on how that works.

[drewwells]

Is it possible to get webpack to ignore these errors? Then allow the amd-plugin that builds for the runtime to find bundles that you package via separate webpack configs ie. i18n

A more complete example of https://github.com/webpack/i18n-webpack-plugin would be helpful here

[mrdulin]

same issue. How to solve this? Thanks.

[lili21]

How this one be closed ?

[drewwells]

The short answer is that webpack statically analyzes your require statements explained here: https://webpack.github.io/docs/context.html

Fixing this is different for every case. If you post some code somebody should be able to point you in the right direction. https://gitter.im/webpack/webpack

[olalonde]

@drewwells the real issue was that thousands of lines were printed making it hard to find out what the problem was. The code literally was console.log(require.ensure)

[drewwells]

I understand there was a specific start to this thread, but the title indicates a more general issue that people find via Google searches. This being the use of variables in require() calls. It may help to change the title or open a new issue about console.log() if its desired to fix that. I don't think that particular bug will be addressed, since require.ensure is documented already: https://webpack.github.io/docs/code-splitting.html#commonjs-require-ensure

[stevenvachon]

I'm getting this error with this line:

const broquire = require("broquire")(require);

[lovepluskaka]

My code is:

 if (configs.renderingConfig && configs.renderingConfig.codeSyntaxHighlighting) {
         require.ensure([], () => {
                const theme = configs.renderingConfig.highlightingTheme || 'default';
                window.hljs = require('highlight.js');
                require(`highlight.js/styles/${theme}.css`);
         }, 'highlight');
  }

There is the same warning in terminal

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

And there is also two error in browser

Loading chunk 0 failed.
at HTMLScriptElement.onScriptComplete

vendor.js?v=20170309:92 Uncaught (in promise) Error: Loading chunk 0 failed.
at HTMLScriptElement.onScriptComplete

What's the reason is ？

[Rookian]

I get the same error for typedjson-npm.

WARNING in ./~/typedjson-npm/js/typed-json.js
25:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted.

[prateekjahead]

My problem was solved by making following change -

FROM

const moduleName = 'moduleName';

function getComponent(location, cb) {
  require.ensure([], require => {
    cb(null, require('./components'));
  }, moduleName);
}

TO

function getComponent(location, cb) {
  require.ensure([], require => {
    cb(null, require('./components'));
  }, 'moduleName');
}

i.e, avoiding the use of a const variable for the string 'moduleName'.

Don't know the reason though. :|

[arcanis]

Using typeof require.context generates warnings as well.

[TaroWong]

My problem is this

<img src={require${this.state.currentIco}}

Are there any ways to fix this?

[atav32]

My problem was a line in a library similar to

var library = {};
library.require = require;  // whyyyyy ಠ_ಠ

[d0ruk]

Same here. @storybooks/storybook config goes like this;

const req = require.context("../stories", true, /.stories.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

Replacing line 1 with;

const PATH = resolve("..", "stories");
const req = require.context(PATH, true, /.stories.js$/);

errors (warns?) with

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

Using webpack@3.11.0

[Jessidhia]

That is because the code was changed from calling require.context in a way that was analyzable into a way that isn't. Webpack doesn't know what your arbitrary "resolve" function returns, or that PATH is immutable (if you compile your code to ES5)

[d0ruk]

@Kovensky

From what I understand, this warning means the dependencies are not statically analyzable, and thus cannot be tree-shaken. Is this correct?

Is there anything else I should be aware of?

If I weren't compiling down to ES5, would webpack figure out that PATH is immutable?

[Jessidhia]

The bigger problem here is that webpack doesn't know what the result of resolve is. It's just a random user function that can do anything at runtime.

This is also not about tree-shaking, this is about knowing what to bundle in the first place. If webpack can't see that you're trying to look into the ../stories directory via simple string parsing, it doesn't know that it needs to put the files inside ../stories in a context module.

[jony89]

@sokra this is reproduced with webpack@3.11.0 as well.

[hxuanhung]

@jony89 what is your webpack-dev-server's version? try to upgrade to 2.9.7

[senyaak]

Im using https://github.com/biesbjerg/ngx-translate-extract and get this error when using marker function to extract strings :(
webpack 3.11.0

[montogeek]

@senyaak Submit an issue to that repo

[senyaak]

@montogeek this is a webpack issue...

[aj-r]

In case anyone else comes across this - I got this error because I was using "module": "umd" in my tsconfig.json. The solution was to use "module": "commonjs" instead - you can still get umd output by using libraryTarget: "umd" in webpack.config.js.

[yeyuguo]

@aj-r it's work

[simeyla]

You can get this error if you accidentally import something from /@angular/compiler instead of /@angular/core. With auto-import this can happen easily.

For example this just happened to me when I used ChangeDetectionStrategy and VSCode suggested the compiler package - and I accepted it without realizing.

[sumantaparida]

WARNING in ./node_modules/html-webpack-plugin/index.js 242:85-92
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./node_modules/dynamic-cdn-webpack-plugin/lib/index.js
@ ./node_modules/dynamic-cdn-webpack-plugin/index.js
@ dll reactBoilerplateDeps