webpack dynamic module loader by require

by

You cannot use a variable as argument to require. Webpack needs to know what files to bundle at compile time. As it does no program flow analysis, it can’t know what you pass to the function. In that case it might be obvious, but this could go as far as using user input to decide what module to require, and there is no way webpack can possibly know which modules to include at compile time, so webpack does not allow it.

The example you posted is a bit different. You could use require with a concatenated string. For example:

require(`./src/${moduleName}/test`);

Which modules does webpack need to include in the bundle? The variable moduleName could be anything, so the exact module is not known at compile time. Instead it includes all modules that could possibly match the above expression. Assuming the following directory structure:

src
├─ one
│   └─ test.js
├─ two
│   ├─ subdir
│   │   └─ test.js
│   └─ test.js
└─ three
    └─ test.js

All of these test.js files will be included in the bundle, because moduleName could be one or something nested like two/subdir.

For more details see require with expression of the official docs.

You cannot loop through an array and import every module of the array, with the above exception by concatenating a string, but that has the effect of including all possible modules and should generally be avoided.

More Related Contents:

  1. Define global variable with webpack
  2. How to build minified and uncompressed bundle with webpack?
  3. Conditional build based on environment using Webpack
  4. Webpack Express Cannot Resolve Module ‘fs’, Request Dependency is Expression
  5. Webpack bundles my files in the wrong order (CommonsChunkPlugin)
  6. In the `import` syntax of ES6, how is a module evaluated exactly?
  7. NodeJs : TypeError: require(…) is not a function
  8. Webpack and external libraries
  9. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  10. Webpack: Bundle.js – Uncaught ReferenceError: process is not defined
  11. How does require() in node.js work?
  12. Webpack 5 – Uncaught ReferenceError: process is not defined
  13. Node JS and Webpack Unexpected token
  14. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  15. How to get access to webpack-dev-server from devices in local network?
  16. Conflict: Multiple assets emit to the same filename
  17. Output an ES module using webpack
  18. How can I use webpack with express?
  19. Use of require(lib) versus in Electron apps
  20. Execute a command line binary with Node.js
  21. SyntaxError: Unexpected token function – Async Await Nodejs
  22. ES6 modules implementation, how to load a json file
  23. How to store Configuration file and read it using React
  24. How can I ‘require’ CommonJS modules in the browser? [closed]
  25. Why is an _id with ObjectID added to when using MongoDB’s $push to add new object to an array?
  26. Mongoose.js: Find user by username LIKE value
  27. Secure random token in Node.js
  28. How do I stream response in express?
  29. How to disable ESLint in vue-cli?
  30. ASYNC / AWAIT SyntaxError: await is only valid in async functions and the top level bodies of modules

Leave a Comment