Using require('...') with a variable vs. using a string in webpack

Active3 hr before
Viewed126 times

8 Answers


Thanks for contributing an answer to Stack Overflow!,Stack Overflow en español, Meta Stack Overflow ,Stack Overflow em Português

Adding an empty string fixed the problem for me. So, below code should work:

let appleIcons =, appleIcon => {
   appleIcon.href = require('' + appleIcon.href);
   return appleIcon;

No CommonJS allowed, for example, you can't use require, module.exports or exports,File extensions are required when importing wasm file,.wasm with "type": "module" in package.jsonFile extensions are required when importing wasm file,ES6 (Recommended)importexportimport()Dynamic expressions in import()

Statically import the exports of another module.

import MyModule from './my-module.js';
import {
} from './other-module.js';
load more v

Wanting to run require('foo') at runtime (and same for import('foo')) seems reasonable and possible to me.,And if you think about it in general, being constrained to use string literals only does feel very limiting, I mean you are stripped from the ability to make runtime, dynamic decisions on module loading.,Seems like require wants passed string to be static, not dependent on any runtime actions.,Thanks for your reply. Let me explain why I think it is important to be able to import a module without directly referencing it (using a string literal).

var name = "myComponent";
var component = require("myApp/components/" + name); //does NOT work - returns Requiring unknown module error
var component = require("myApp/components/myComponent"); //DOES work even when those string values are EXACTLY the same
load more v

However, configuring Webpack and its dependencies can be stressful and is not always a straightforward process, especially for beginners.,We can reference dependencies by relative paths to the files we need, and if we want to import components into containers in our source code, it looks like the following:,If we want to include modules from externally hosted scripts, we need to define them in the configuration. Otherwise, Webpack cannot generate the final bundle.,This blog post provides guidelines, with examples, of how to configure Webpack for different scenarios, and points out the most common pitfalls related to bundling of project dependencies using Webpack.

Let’s say we have the following project structure:

   node_modules -
   bower_modules -
   src -
   script -
   components -
   Modal.js -
   Navigation.js -
   containers -
   Home.js -
load more v

Here's the fixed webpack.config.js:,Two things were causing my problems here:,So can you explain me why the second example works and the first one throws an error? How do i put a variable inside of require('')?,When I print the value of appleIcon.href and i try to put it directly into the require('') it works.

I'm mapping an array of objects that have a "name" and a "href" property.

let appleIcons =, appleIcon => {
   appleIcon.href = require(appleIcon.href);
   return appleIcon;

When I print the value of appleIcon.href and i try to put it directly into the require('') it works.

appleIcons =, appleIcon => {
   appleIcon.href = require('./../../mobile-config/apple-icon-57x57.png');
   return appleIcon;
load more v

A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.,Your .env files can include sensitive information. Because of this,dotenv-webpack will only expose environment variables that are explicitly referenced in your code to your final bundle.,dotenv-webpack wraps dotenv and Webpack.DefinePlugin. As such, it does a text replace in the resulting bundle for any instances of process.env., path ('./.env') - The path to your environment variables.

// .env
DB_HOST = 127.0 .0 .1
DB_PASS = foobar
S3_API = mysecretkey
load more v

Note that the config is built using webpack-chain, so the config variable in all the examples below are instances of a chainable config. You can find more examples in webpack-chain's documentation as well as read the source of the base configs to see how we implemented them.,For simple things, you can merge objects into the final config instead of using chainWebpack,All NativeScript applications are bundled using webpack. To manage the required configuration, we maintain the @nativescript/webpack package.,Optional: add a new chainFn to the internal chain that will be called while resolving the final config.

const webpack = require('@nativescript/webpack')

module.exports = env => {

   return webpack.resolveConfig()
load more v

Strict mode makes several changes to normal JavaScript semantics:,Eliminates some JavaScript silent errors by changing them to throw errors.,SyntaxError: missing variable name,To invoke strict mode for an entire script, put the exact statement "use strict"; (or 'use strict';) before any other statements.

// Whole-script strict mode syntax
'use strict';
var v = "Hi! I'm a strict mode script!";
load more v

Other "variable-using" queries related to "Using require('...') with a variable vs. using a string in webpack"