New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot find module "." When I use require.context #4772

Closed
yleo77 opened this Issue Apr 24, 2017 · 10 comments

Comments

Projects
None yet
9 participants
@yleo77

yleo77 commented Apr 24, 2017

Do you want to request a feature or report a bug?

Bug

What is the current behavior?
The code snippet should work as expected, I think. But in fact, it's not work as expected when i using Identifier instead of Literal.

var regexp = /^\.\/.*\.js$/;
var req = require.context("./templates", false, regexp);   // Uncaught Error

var bool = false;
var req = require.context("./templates", bool, /^\.\/.*\.js$/);   // Uncaught Error

var dir = "./templates";
var req = require.context(dir, false, /^\.\/.*\.js$/);   // Uncaught Error

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

main.js (or anywhere in javascript files)

var regexp = /^\.\/.*\.js$/;
var req = require.context("./templates", false, regexp);   // Uncaught Error

This code above the line can reproduce the bug.

What is the expected behavior?
No Error. When i use Identifier instead of Literal.

Please mention other relevant information such as the browser version, Node.js version, webpack
version and Operating System.

Max OS X 10.12
Node 7.8.0
webpack 1.x 2.x

FYI, I found the return value at L17 in lib/dependencies/RequireContextDependencyParserPlugin.js file is wrong, the expected type is a RegExp, But it's not in fact.

Further info, something about evaluate in Parser.js, for example:

this.plugin("evaluate Identifier", function(expr) {
  //...
  if(this.scope.definitions.indexOf(expr.name) === -1) {	
  //...
  } else {
    return this.applyPluginsBailResult1("evaluate defined Identifier " + name, expr);
  }
});

But I don't find this.plugin("evaluate defined Identifier", function(expr) {...});, am i missing something?

@sokra

This comment has been minimized.

Member

sokra commented Apr 24, 2017

It must be statically analyzable... Only literals are supported.

@sokra sokra closed this Apr 24, 2017

@shcallaway

This comment has been minimized.

shcallaway commented Jun 16, 2017

Hey @sokra , do you mind elaborating on why these require.context vars have to be statically analyzable? I want to use an environment variable to determine which files get included in the context, so I am passing the variable into a RegEx object, and passing the RegEx to require.config. It doesn't work obviously — but it seems like a really legitimate use case.

hiroppy added a commit to hiroppy/slides that referenced this issue Oct 20, 2017

fix: fix slide's path for bundling
webpack/webpack#4772
Don't include unnecessary items in the bundle.
@sneakyfildy

This comment has been minimized.

sneakyfildy commented Nov 1, 2017

What if someone do not need to require all images from the folder, how we supposed to require only certain images without referencing them one by one with hardcoded set of require calls

@mcm-ham

This comment has been minimized.

mcm-ham commented Nov 15, 2017

I needed this behaviour too, a workaround is to use webpack define plugin:

boot-tests.ts

require.context(CLIENT_APP_PATH, true, /\.spec\.ts$/);

webpack.config.js

module.exports = {
  plugins: [new DefinePlugin({ CLIENT_APP_PATH: JSON.stringify('c:/path/to/client') })]
}

This works because the DefinePlugin does a find of the name and replaces it with the string on compile.

@JounQin

This comment has been minimized.

Member

JounQin commented Dec 2, 2017

@sokra The error should be more specific, I wasted a few hours to find out why it throw an error here...

@vjpr

This comment has been minimized.

vjpr commented Jan 18, 2018

Just to summarize, require.context's arguments must be static and not be variables.

Works:

const req = require.context('../stories', true, /.stories.js$/)

Won't work:

const regex = /.stories.js$/
const req = require.context('../stories', true, regex)
@ahettlin

This comment has been minimized.

ahettlin commented Mar 27, 2018

Just ran into this issue today. Would be very nice to have. I had everything set up to be able to run a single spec file through karma on-demand via a command line argument, then nope...

swernerx added a commit to sebastian-software/edge that referenced this issue Apr 23, 2018

Finally found a solution for my issue with running storybook in both …
…locations: inside edge platform and inside apps later on. Thanks to webpack/webpack#4772 (comment)
@ricardoribasmrf

This comment has been minimized.

ricardoribasmrf commented Sep 26, 2018

Hey guys, there is an alternative for this? I believe that making some templating on the file itself would not be the best solution. Unfortunately, i don't see a proper solution for this problem. I've spent a couple of hours preparing a variable-based solution but then i smashed my nose on the door 😂. Thankfully, thanks to the documentation i didn't spend more hours on that hehe

@sokra

This comment has been minimized.

Member

sokra commented Sep 27, 2018

do you mind elaborating on why these require.context vars have to be statically analyzable?

webpack need to determine at build time (before any of your code runs) which files need to be bundled. It doesn't necessarily have to be a static string, it could also be a variable defined with the DefinePlugin or basic string operations applied these things.

An alternative is to use require(variable) and use the ContextReplacementPlugin to provide the "staticness" via config. In this case you need to specify all possible values of variable in the arguments of the plugin (or crawl a directory).

@ricardoribasmrf

This comment has been minimized.

ricardoribasmrf commented Sep 28, 2018

It worked like a charm 🎉 🥇 Thanks for the help buddy!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment