Why does the "exports-loader" example in Webpack's documentation not work?

Question

Webpack provides the example below in its shimming documentation. In the global exports portion of that page, it gives the following example.

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('globals.js'),
                use: exports-loader?file,parse=helpers.parse
            }
        ]
    }
}

./src/globals.js

var file = 'blah.txt';
var helpers = {
    test: function() { console.log('test something'); },
    parse: function() { console.log('parse something'); }
};

But when I attempt to build, I get:

ERROR in ./webpack.config.js
Module not found: Error: Can't resolve 'globals.js' in '/workspace/my-app'

Why is globals.js not resolving, and why does the example in their documentation assume it will? Am I missing something? Thanks.

Answer 1

Getting this to work with a global exports-loader configuration

I have this working with the following setup:

src/deps.js // this file just declare a global file variable

const file = 'this is the file';

src/app.js // entry point of the webpack bundle. It import's deps.js (even if deps.js does not have an export statement, thanks to export-loader):

import file from './deps.js'
console.log(file);

webpack.config.js // webpack configuration file

module.exports = {
  entry: __dirname + '/src/app.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /deps.js/,
        use: 'exports-loader?file',
      }
    ]
  }
}

package.json // so we can run webpack locally to the project

{
  "name": "exports-loader-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "node_modules/webpack/bin/webpack.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "exports-loader": "^0.7.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

With this setup, assuming webpack.config.js, package.json and src/ are in the root of the project, do:

$ npm run webpack

To bundle the scripts, then:

$ node dist/main.js to check that the file variable is being loaded (to load this in a browser will do the same).

 Getting this to work with an import specific configuration.

(this comes from this other answer).

In order to do so, you need to use just the exports-loader, without any further configuration when you load it in the webpack.config.js:

use: 'exports-loader',

And then specify the variables to wrap in an export clause in every import statement:

import file from 'exports-loader?file!./deps.js'

Why the require.resolve() syntax is not working?

I really don't know. The test clause expects a regex as far as I know (that's why it is called test in fact, because of the test method of regex's in javascript) and I'm not used to other kind of valid syntaxes. I see that in your snippet:

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('globals.js'),
                use: exports-loader?file,parse=helpers.parse
            }
        ]
    }
}

The use value does not have string quotes. I wonder if this is broking the config and then you get a misleading error, I don't know. I actually believe you just didn't paste the quotes when copy and pasting to stack overflow.