expose-loader: Doesn't work as expected when exposing @apollo/client

Bug report

When trying to expose @apollo/client, I get an error

Actual Behavior

The browser dev console shows this error:

Uncaught ReferenceError: require is not defined index-exposed.js:1

The output of index-exposed.js in the dev console is:

var ___EXPOSE_LOADER_IMPORT___ = require("-!./index.js");
var ___EXPOSE_LOADER_GET_GLOBAL_THIS___ = require("../../expose-loader/dist/runtime/getGlobalThis.js");
var ___EXPOSE_LOADER_GLOBAL_THIS___ = ___EXPOSE_LOADER_GET_GLOBAL_THIS___;
if (typeof ___EXPOSE_LOADER_GLOBAL_THIS___["ApolloClient"] === 'undefined') ___EXPOSE_LOADER_GLOBAL_THIS___["ApolloClient"] = ___EXPOSE_LOADER_IMPORT___;
else throw new Error('[exposes-loader] The "ApolloClient" value exists in the global scope, it may not be safe to overwrite it, use the "override" option')
module.exports = ___EXPOSE_LOADER_IMPORT___;

Note that I have other modules being exposed immediately before and after @apollo/client and they all work fine (when @apollo/client isn’t being exposed) - though none of them have an @ or / in them

Expected Behavior

The @apollo/client module should be exposed in the window object like other exposed modules

How Do We Reproduce?

Use the following expose line in a js file, and then transpile it using webpack:

import 'expose-loader?exposes=ApolloClient!@apollo/client';

Please paste the results of npx webpack-cli info here, and mention other relevant information

System: OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish) CPU: (12) x64 Intel® Core™ i7-10750H CPU @ 2.60GHz Memory: 5.94 GB / 15.25 GB Binaries: Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.0/bin/yarn npm: 8.19.3 - ~/projects/build-stack-update/node_modules/.bin/npm Browsers: Firefox: 106.0.3 Packages: copy-webpack-plugin: ^11.0.0 => 11.0.0 html-loader: ^4.2.0 => 4.2.0 markdown-loader: ^8.0.0 => 8.0.0 remove-files-webpack-plugin: ^1.5.0 => 1.5.0 webpack: ^5.74.0 => 5.74.0 webpack-cli: ^4.10.0 => 4.10.0 webpack-sources: ^3.2.3 => 3.2.3

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 26 (13 by maintainers)

Most upvoted comments

@alexander-akait that worked, thanks!

@angel-git Just use

import 'my-module.js!=!expose-loader?exposes=DotComponents|DotComponents!@digital-ai/dot-components';

Otherwise due to inline syntax webpack just ignores the file, because there is no module name and can’t undestand that need to parse/handle this file

my-module.js can have any name, but should have .js/.cjs/.mjs as an extension

Ahh okay. I’m gonna have to read up on virtual modules some time. For now you’ve given me a way forward, so thank you!

There is no magic:

  1. We create virtual module, so webpak try to parser it as esm then cjs
  2. When we say expose ApolloClient using ApolloClient named export from @apollo/client package

😄

Awesome, thanks. If I have time to look into this I’ll see what I can see