question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

require.context is not a function

See original GitHub issue

I’m getting this error when running webpack-isomorphic-tools' withwebpack`

/<dir>/src/content/index.js:9
[1] var contents = require.context('./', true, /content\.yml$/);
[1]                          ^
[1] 
[1] TypeError: require.context is not a function
[1]     at Object.<anonymous> (index.js:2:28)
[1]     at Module._compile (module.js:425:26)
[1]     at loader (/<dir>/node_modules/babel-register/lib/node.js:134:5)
[1]     at Object.require.extensions.(anonymous function) [as .js] (/<dir>/node_modules/babel-register/lib/node.js:144:7)
[1]     at Module.load (module.js:356:32)
[1]     at Function.Module._load (module.js:313:12)
[1]     at Module.require (module.js:366:17)
[1]     at require (module.js:385:17)
[1]     at Object.<anonymous> (/<dir>/src/selectors/index.js:34:16)
[1]     at Module._compile (module.js:425:26)

How to I circumvent/fix this? the code:

var contents = require.context('./', true, /content\.yml$/);

is used to fetch the data files to an array on runtime. The directory tree looks like this:

├── content
│   ├── index.js
│   ├── 2013
│   │   └── content.yml
│   ├── 2014
│   │   └── content.yml
│   ├── 2015
│   │   └── content.yml
│   └── 2016
│       └── content.yml

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:39 (23 by maintainers)

github_iconTop GitHub Comments

3reactions
catamphetaminecommented, Feb 11, 2016

Well, for example, you could do something like this:

//this file includes all contents indexed by directory name
let contents

if (__CLIENT__)
{
  contents = require.context('./', true, /content\.yml$/);
}
else
{
  const path = require('path')
  const fs = require('fs')
  for (let child of fs.readdirSync(__dirname))
  {
    console.log(child)
    if (fs.statSync(path.join(__dirname, child)).isDirectory())
    {
      contents[path] = require(path.join(__dirname, child, 'content.yml'))
    }
  }
}

__CLIENT__ may be set in your Webpack DefinePlugin, for example.

1reaction
catamphetaminecommented, Feb 11, 2016

For anyone who got here from Google or from the To do list:

While looking for a possibility to implement require.context function I currently see no clean way to do it (there is a dirty way in the end of this message).

The require() function is created in the internal/module module to which we have no access https://github.com/nodejs/node/blob/master/lib/module.js#L413 https://github.com/nodejs/node/blob/7c603280024de60329d5da283fb8433420bc6716/lib/internal/module.js#L9

If there was a way to get a hold of that require variable before it is passed to module compilation function then it would be possible to inject a context property into it. Alternatively the makeRequireFunction function could be instrumented if we had a way to import the internal/module module and modify its exports.

The function itself would look like this:

require.context = function(base, scan_subdirectories, regular_expression) {
  const contents = {}

  function read_directory(directory) {
    for (let child of fs.readdirSync(directory)) {
      const full_path = path.join(directory, child)
      if (fs.statSync(full_path).isDirectory()) {
        if (scan_subdirectories) {
          read_directory(full_path)
        }
      } else {
        if (regular_expression && !regular_expression.match(full_path)) {
          continue
        }
        contents[path.relative(base, full_path)] = require(full_path)
      }
  }

  read_directory(base)

  return contents
}

The dirty way I found is:

const original_compile = require('module').prototype._compile
require('module').prototype._compile = function(content, filename)
{
    var preamble = ''

    if (starts_with(content, `'use strict'`) || starts_with(content, `"use strict"`))
    {
        preamble = `"use strict";`
    }

    preamble += `require.context = function() { console.log('require.context code here') };;;` 

    content = preamble + content

    // return value is undefined
    return original_compile.call(this, content, filename)
}

It’s “dirty” because it prepends some code to the require()d module code therefore leaving traces. But it works, i tried (this code has to be executed before the module of interest is require()d).

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeError: require.context is not a function · Issue #2487
Hi guys, Issue details If you use require.context within a React component the storyshots will fail with TypeError: require.context is not a ...
Read more >
How to resolve “TypeError: require.context is not a function” in ...
While we were writing Jest tests, we ran into an the error “TypeError: require.context is not a function”. This is because of the...
Read more >
How can I mock Webpack's require.context in Jest?
With this function, you don't need to change any require.context call, it will execute with the same behavior as it would (if it's...
Read more >
Dependency Management - webpack
A context module exports a (require) function that takes one argument: the request. The exported function has 3 properties: resolve , keys ,...
Read more >
require.context is not a function - My-Blog
require.context is not a function. 解决方案:. 错误信息如下 ... at Module.load (internal/modules/cjs/loader.js:1040:32) at Function.Module.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found