webpack-bot
Followers
21

Events

issue comment
Add `i64` to the set of JS-compatible wasm types in `syncWebAssembly` mode

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 24 minutes ago
closed issue
Webpack 5 entry dependOn property with UMD exports does not allow AMD loader to load dependent modules

Bug report

What is the current behavior?

The newly-introduced dependOn feature to be released with Webpack 5 seems to have non-deterministic behaviour when exporting UMD modules and using a require-based (i.e. AMD) loader.

What appears to be the fundamental issue is that an import of a module that depends on another does not result in a proper import of the dependent module; e.g. if Module A depends on Module B, then a simple define([ModuleA], function(ModuleA) { ... }) does not seem to kick off a proper require of Module B.

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

webpack.config.js snippet:

entry: {
  ModuleC: `${process.cwd()}/ModuleC`,
  ModuleB: {
    import: `${process.cwd()}/ModuleB`,
    dependOn: 'ModuleC',
  },
  ModuleA: {
    import: `${process.cwd()}/ModuleA`,
    dependOn: ['ModuleB', 'ModuleC'],
  }
},
output: {
  path: `${process.cwd()}/dist`,
  filename: '[name].js',
  library: 'modules',
  libraryTarget: 'umd'
}

Module A:

import ModuleB from './ModuleB';
import ModuleC from './ModuleC';

const ModuleA = function() {
  console.log('A');
  ModuleB();
  ModuleC();
};

export default ModuleA;

Module B:

import ModuleC from './ModuleC';

const ModuleB = function() {
  console.log('B');
  ModuleC();
};

export default ModuleB;

Module C:

const ModuleC = function() {
  console.log('C');
};

export default ModuleC;

Bundling these with webpack results in strange behaviour - I have created a couple of scenarios in my minimal test github repo to demonstrate this:

  1. In basepage-1.html, I test out the simpler case of simply loading ModuleA (in main-1.js) in the browser. This doesn't ever work (breakpoints indicate that require simply returns a number like 1 or 2). The network indicates that no attempt is made to load ModuleB or ModuleC.
  2. In basepage-2.html, I test out the more complex case of loading all of the Modules C through A (in that order, in main-2.js). Continual refreshes of the browser sometimes allows different modules to work, but the actual output of the first ModuleX.default() call can change depending on what I assume to be the result of a race condition of the module loads.

What is the expected behavior?

  1. In basepage-1.html (i.e. main-1.js), I expect ModuleA to successfully load ModuleB and ModuleC, resulting in an output of:
A    // Here begins output of ModuleA
B
C
C
  1. In basepage-2.html (i.e. main-2.js), I expect all three modules to load successfully, and the calls to the functions resulting in an output of:
C    // Here begins output of ModuleC
B    // Here begins output of ModuleB
C
A    // Here begins output of ModuleA
B
C
C

If I remove the dependOn field from my webpack config and load the three non-dependent chunks as regular entry points, there is no race condition and all modules load properly and provide the proper output.

Other relevant information: webpack version: 5.0.0-beta.14 Node.js version: 10.18.1 Operating System: macOS Mojave 10.14.6 Additional tools:

  1. Any recent-ish Chrome browser version
  2. RequireJS (found here: https://requirejs.org/docs/release/2.3.6/minified/require.js)
Created at 5 hours ago
issue comment
Bump eslint-plugin-jest from 24.7.0 to 27.1.1

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 7 hours ago
issue comment
Bump terser from 5.10.0 to 5.15.1

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 7 hours ago
issue comment
ESM builds should substitute `__filename` and `__dirname` references in CommonJS

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

Created at 18 hours ago
closed issue
Webpack 5 ModeFederation error when shared package version is not in semver

Bug report

What is the current behavior? One of our packages has version 'dev' set in package.json as it is internal not released yet package.

....
"dependencies": {
    "{PACKAGE_NAME}": "dev",
}
....

When I try to configure ModeFederationPlugin for our main app I configure shared modules as follows:

const packageJson = require('../package.json');

const packageName = packageJson.name;
const packageDeps = packageJson.dependencies;

new ModuleFederationPlugin({
   ....
    shared: {
      ...packageDeps,
      react: {
        singleton: true,
        eager: true,
        requiredVersion: packageDeps.react,
      },
      'react-dom': {
        singleton: true,
        eager: true,
        requiredVersion: packageDeps['react-dom'],
      },
    },
    ....
  }),

When I run webpack it gives me next error:

ERROR in resolving fallback for shared module ($PACKAGE_NAME}
Module not found: Error: Can't resolve 'dev' in '{PATH_TO_FILE_USING_PACKAGE}'

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

  1. Add package with version different from semantic versioning standard to dependencies of the project
  2. Try to add ModuleFederationPlugin to the webpack config of the app with the following config:
const packageJson = require('../package.json');

const packageName = packageJson.name;
const packageDeps = packageJson.dependencies;

new ModuleFederationPlugin({
    name: packageName,
    remotes: {},
    shared: {
      ...packageDeps,
      angular: {
        singleton: true,
        eager: true,
        requiredVersion: packageDeps.angular,
      },
      react: {
        singleton: true,
        eager: true,
        requiredVersion: packageDeps.react,
      },
      'react-dom': {
        singleton: true,
        eager: true,
        requiredVersion: packageDeps['react-dom'],
      },
    },
  }),
  1. Run webpack and see the errors in the console

What is the expected behavior? I assume that if webpack can resolve node_modules with non-semantic versioning then ConsumeSharedPlugin should also be able to

If any additional info is needed for me, please let me know

Other relevant information: webpack version: 5.24.4 Node.js version: v14.15.0 Operating System: macOS Catalina Version 10.15.7 Additional tools:

Created at 1 day ago
closed issue
`experiments.outputModule: true` throws type-error for property on runtime chunk

Bug report

What is the current behavior? Setting experiments.outputModule: true provokes an error in the compiled bundle in the browser, when using a (single) runtime chunk. The error occurs in the main file main.9557a1f0.js, on the very last line of the file:

Uncaught TypeError: (intermediate value).X is not a function

The last few lines in main.9557a1f0.js, error happens on the last line:

// load runtime
import __webpack_require__ from "./runtime.45fa48bb.js";
import * as __webpack_self_exports__ from "./main.9557a1f0.js";
__webpack_require__.C(__webpack_self_exports__);
var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
var __webpack_exports__ = __webpack_require__.X(0, [532,736], () => (__webpack_exec__(5762)));

runtime.45fa48bb.js looks like this:

/******/ "use strict";
/******/ var __webpack_modules__ = ({});
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/ 
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ 	// Check if module is in cache
/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
/******/ 	if (cachedModule !== undefined) {
/******/ 		return cachedModule.exports;
/******/ 	}
/******/ 	// Create a new module (and put it into the cache)
/******/ 	var module = __webpack_module_cache__[moduleId] = {
/******/ 		// no module.id needed
/******/ 		// no module.loaded needed
/******/ 		exports: {}
/******/ 	};
/******/ 
/******/ 	// Execute the module function
/******/ 	__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ 
/******/ 	// Return the exports of the module
/******/ 	return module.exports;
/******/ }
/******/ 
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/ 
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = (module) => {
/******/ 		var getter = module && module.__esModule ?
/******/ 			() => (module['default']) :
/******/ 			() => (module);
/******/ 		__webpack_require__.d(getter, { a: getter });
/******/ 		return getter;
/******/ 	};
/******/ })();
/******/ 
/******/ /* webpack/runtime/create fake namespace object */
/******/ (() => {
/******/ 	var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
/******/ 	var leafPrototypes;
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 16: return value when it's Promise-like
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = this(value);
/******/ 		if(mode & 8) return value;
/******/ 		if(typeof value === 'object' && value) {
/******/ 			if((mode & 4) && value.__esModule) return value;
/******/ 			if((mode & 16) && typeof value.then === 'function') return value;
/******/ 		}
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		var def = {};
/******/ 		leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
/******/ 		for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
/******/ 			Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
/******/ 		}
/******/ 		def['default'] = () => (value);
/******/ 		__webpack_require__.d(ns, def);
/******/ 		return ns;
/******/ 	};
/******/ })();
/******/ 
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ 	// define getter functions for harmony exports
/******/ 	__webpack_require__.d = (exports, definition) => {
/******/ 		for(var key in definition) {
/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 			}
/******/ 		}
/******/ 	};
/******/ })();
/******/ 
/******/ /* webpack/runtime/ensure chunk */
/******/ (() => {
/******/ 	__webpack_require__.f = {};
/******/ 	// This file contains only the entry chunk.
/******/ 	// The chunk loading function for additional chunks
/******/ 	__webpack_require__.e = (chunkId) => {
/******/ 		return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
/******/ 			__webpack_require__.f[key](chunkId, promises);
/******/ 			return promises;
/******/ 		}, []));
/******/ 	};
/******/ })();
/******/ 
/******/ /* webpack/runtime/get javascript chunk filename */
/******/ (() => {
/******/ 	// This function allow to reference async chunks
/******/ 	__webpack_require__.u = (chunkId) => {
/******/ 		// return url for filenames based on template
/******/ 		return "chunks/" + chunkId + "." + {"62":"4d22a6c6","67":"eb5bd192","76":"a053f510","101":"11f763f3","154":"4ed28fbc","164":"58123216","252":"689b50e8","328":"39fece55","357":"3dcc8e36","364":"00dedba0","389":"a8523a16","414":"e59e9e99","458":"37991620","470":"aba0e8ed","538":"6f777776","615":"414e5680","694":"53e67fa9","708":"b4af9267","777":"1c04f591","800":"cc3bed2e","805":"02503685","806":"c545008d","842":"35ac0e89","930":"d9316a87","968":"247135fd","970":"60833f54","991":"64dd4b9c"}[chunkId] + ".js";
/******/ 	};
/******/ })();
/******/ 
/******/ /* webpack/runtime/get mini-css chunk filename */
/******/ (() => {
/******/ 	// This function allow to reference all chunks
/******/ 	__webpack_require__.miniCssF = (chunkId) => {
/******/ 		// return url for filenames based on template
/******/ 		return "" + "styles" + "." + "c71fa8d7" + ".css";
/******/ 	};
/******/ })();
/******/ 
/******/ /* webpack/runtime/global */
/******/ (() => {
/******/ 	__webpack_require__.g = (function() {
/******/ 		if (typeof globalThis === 'object') return globalThis;
/******/ 		try {
/******/ 			return this || new Function('return this')();
/******/ 		} catch (e) {
/******/ 			if (typeof window === 'object') return window;
/******/ 		}
/******/ 	})();
/******/ })();
/******/ 
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/ 
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = (exports) => {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/ })();
/******/ 
/******/ /* webpack/runtime/publicPath */
/******/ (() => {
/******/ 	__webpack_require__.p = "/static/";
/******/ })();
/******/ 
/******/ /* webpack/runtime/export webpack runtime */
/******/ export default __webpack_require__;
/******/ 
/******/ /* webpack/runtime/import chunk loading */
/******/ (() => {
/******/ 	// no baseURI
/******/ 	
/******/ 	// object to store loaded and loading chunks
/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ 	// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ 	var installedChunks = {
/******/ 		666: 0,
/******/ 		532: 0
/******/ 	};
/******/ 	
/******/ 	var installChunk = (data) => {
/******/ 		var {ids, modules, runtime} = data;
/******/ 		// add "modules" to the modules object,
/******/ 		// then flag all "ids" as loaded and fire callback
/******/ 		var moduleId, chunkId, i = 0;
/******/ 		for(moduleId in modules) {
/******/ 			if(__webpack_require__.o(modules, moduleId)) {
/******/ 				__webpack_require__.m[moduleId] = modules[moduleId];
/******/ 			}
/******/ 		}
/******/ 		if(runtime) runtime(__webpack_require__);
/******/ 		for(;i < ids.length; i++) {
/******/ 			chunkId = ids[i];
/******/ 			if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ 				installedChunks[chunkId][0]();
/******/ 			}
/******/ 			installedChunks[ids[i]] = 0;
/******/ 		}
/******/ 	
/******/ 	}
/******/ 	
/******/ 	__webpack_require__.f.j = (chunkId, promises) => {
/******/ 			// import() chunk loading for javascript
/******/ 			var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
/******/ 			if(installedChunkData !== 0) { // 0 means "already installed".
/******/ 	
/******/ 				// a Promise means "currently loading".
/******/ 				if(installedChunkData) {
/******/ 					promises.push(installedChunkData[1]);
/******/ 				} else {
/******/ 					if(!/^(532|666)$/.test(chunkId)) {
/******/ 						// setup Promise in chunk cache
/******/ 						var promise = import("./" + __webpack_require__.u(chunkId)).then(installChunk, (e) => {
/******/ 							if(installedChunks[chunkId] !== 0) installedChunks[chunkId] = undefined;
/******/ 							throw e;
/******/ 						});
/******/ 						var promise = Promise.race([promise, new Promise((resolve) => (installedChunkData = installedChunks[chunkId] = [resolve]))])
/******/ 						promises.push(installedChunkData[1] = promise);
/******/ 					} else installedChunks[chunkId] = 0;
/******/ 				}
/******/ 			}
/******/ 	};
/******/ 	
/******/ 	__webpack_require__.C = installChunk;
/******/ 	
/******/ 	// no on chunks loaded
/******/ })();
/******/ 
/************************************************************************/
/******/ 
/******/ 

What is the expected behavior? There shouldn't be an error on calling __webpack_require__.X(); i.e. X should be an exsiting property on __webpack_require__.

Other relevant information: webpack version: 5.46.0 Node.js version: 14.17.3 Operating System: Ubuntu

Created at 1 day ago
closed issue
[wasm] emit producer section

Feature request

What is the expected behavior? Since https://github.com/WebAssembly/tool-conventions/pull/65, tooling is expected to emit the custom producer section.

Note that we should only add the Webpack entry and preserve the original producer.

What is motivation or use case for adding/changing the behavior? For future pipeline/tooling analysis.

How should this be implemented in your opinion? webassemblyjs

Are you willing to work on this yourself? yes

Created at 2 days ago
issue comment
Bump core-js from 3.20.3 to 3.25.5

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 2 days ago
issue comment
Bump eslint-plugin-jest from 24.7.0 to 27.1.0

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 2 days ago
closed issue
Native CSS support

Current State: opt-in via experiments.css: true

Explainer (not everything is implemented yet):

  • experiments.css: true enables the native css support in webpack
  • This will be enabled by default in webpack 6
  • There will be multiple modes depending on how you reference CSS
    • A: import "./style.css": Attaches the stylesheet to the document as side effect of importing. @import and url() are resolved.
    • B: import stylesheet from "./style.css" asset { type: "css" }: Exports the unattached stylesheet as default export. You can adopt it according to the spec. @import is not allowed (yet), but url() will be resolved.
    • C: import { main } from "./style.module.css": Like A, but renames all css classes, keyframes and css variables and exports the new names. Global selectors are only allowed with explicit :global selector prefix. @import and url() are resolved.
    • D: new URL("./style.css", import.meta.url): Gives an URL to a stylesheet including all styles. @import and url() are resolved.
    • E: import { main } from "./style.module.css": Like C, but for the node.js target. It generates a JSON module with the exports from the CSS.
  • A and C will bundle all CSS of a chunk into a single CSS file (per chunk)
  • splitChunks will allow to move CSS around
  • output.cssFilename and output.cssChunkFilename allows to configure the filename template for css files. By default it copies filename resp. chunkFilename with extension changed to .css
  • HMR will update CSS when you edit it.
  • There is external CSS that will lead to @import "..." in the output css files
  • There are external assets that will lead to a external url.
  • class names are based on module ids, so you need to make sure that SSR and Client module ids match
    • E1: Compute module ids in a deterministic way -> DeterministicModuleIdsPlugin
    • E2: Store module ids in a file and load them on the other side -> SyncModuleIdsPlugin
  • In addition to the default bindings, you can use type: "css/..." in rules to apply loader results as css. e. g. for Sass support.
  • This will replace mini-css-extract-plugin and css-loader
  • It will be more performant, by using a css tokenizer instead of postcss
  • There is a css minimizer in production mode.

Implemented:

  • A
  • @import url("...");
  • @import "...";
  • url()
  • chunking
  • on demand loading
  • HMR
  • splitChunks
  • output.cssFilename
  • external type css-import
  • external type asset
  • :export blocks
  • C (partially)
    • classes
    • ids
    • keyframes + animation
    • css variables + var()
  • correct css order in output file
  • warnings for ordering issues
  • E
  • E1
  • E2

Not implemented/tested, but Planned (ordered by priority):

  • :import blocks
  • C (partially)
    • composes: xxx
    • composes: xxx from "..."
    • composes: xxx from global
    • var(xxx from "...")
    • var(xxx from global)
  • image-set() image()
  • contenthashing for CSS files
  • @import url("...") media query;
  • wasm css tokenizer
  • css minimizer
  • D
  • @import url("...") layer(test);
  • @import url("...") supports(...);
  • B

Known bugs:

  • url() in css leaves a asset JS Module in js chunk
Created at 2 days ago
issue comment
Bump jest-diff from 27.5.0 to 29.1.2

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 3 days ago
issue comment
Bump jest-cli from 27.5.0 to 29.1.2

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 3 days ago
issue comment
Bump core-js from 3.20.3 to 3.25.4

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 3 days ago
issue comment
Bump jest-circus from 27.5.0 to 29.1.2

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 3 days ago
issue comment
Bump pretty-format from 27.5.0 to 29.1.2

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 3 days ago
issue comment
module federation returns blank in dev when connecting to remote repo, works in prod

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

Created at 5 days ago
closed issue
module federation returns blank in dev when connecting to remote repo, works in prod

I have 2 repos, both microfrontends, created with Module Federation and custom webpack config.

The shared repo is deployed. In the other repo I want to connect to the remote shared version, but if I do that in the webpack.dev.config.ts, where the mode is set to "development", it shows me a blank page with no error.

When I change the mode to "production" it works - I have copied the prod config to the dev, commented out the differences, turned them on one by one and narrowed it down to the mode being the problem.

Based on some tutorials I saw, it looks like this wasn't an issue before. I'm using

"webpack": "5.72.1",
"webpack-cli": "4.9.2",
"webpack-dev-server": "4.8.0"

here's the webpack.dev.config.ts setup that works fine with the mode: "production" and the remote repo given in module federation setup.

const port = 3502;

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  mode: "production", // TODO works with remote repo in module federation setup
  // mode: "development", // TODO doesn't work

  output: {},
  optimization: {
    runtimeChunk: false,
  },
  devServer: {
    port,
    host: "0.0.0.0",
    hot: true,
    historyApiFallback: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  module: {
    rules: [
      {
        test: /\.module\.(css|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]_[local]__[hash:base64:5]",
              },
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        exclude: /\.module\.(css|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
          },
        },
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        use: ["file-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@App": path.resolve(__dirname, "src/App"),
      "@Components": path.resolve(__dirname, "src/App/components"),
      "@Remote": path.resolve(__dirname, "src/App/components/@remote"),
    },
  },
  plugins: [
    new container.ModuleFederationPlugin({
      name: "sof",
      filename: "remoteEntry.js",
      exposes: {
        "./Sof": "./src/App/App.tsx",
      },
      remotes: {
        shared: "shared@https://shared-dev.foo/remoteEntry.js", //this doesn't work with mode: "development"
        // shared: "shared@http://localhost:6002/remoteEntry.js", //this works in both cases
      },
      shared: [
        {
          react: {
            singleton: true,
          },
        },
      ],
    }),
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css",
      chunkFilename: "[id].[hash].css",
    }),
    new ForkTsCheckerWebpackPlugin({
      async: false,
    }),
    new ESLintPlugin({
      extensions: ["js", "jsx", "ts", "tsx"],
    }),
    new Dotenv(),
  ],
  // devtool: "inline-source-map", // TODO
};

export default config;

here's the prod version. e.g. the output is different, but when I changed the output to an empty object in dev config, it works fine.

const config: Configuration = {
  mode: "production",
  output: {
    path: path.resolve("build"),
    filename: "[name].bundle.js?v=[contenthash]",
  },
  module: {
    rules: [
      {
        test: /\.module\.(css|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]_[local]__[hash:base64:5]",
              },
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        exclude: /\.module\.(css|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
          },
        },
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        use: ["file-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@App": path.resolve(__dirname, "src/App"),
      "@Components": path.resolve(__dirname, "src/App/components"),
      "@Remote": path.resolve(__dirname, "src/App/components/@remote"),
    },
  },
  plugins: [
    new container.ModuleFederationPlugin({
      name: "sof",
      filename: "remoteEntry.js",
      exposes: {
        "./Sof": "./src/App/App.tsx",
      },
      remotes: {
        shared: "shared@https://shared-dev.foo/remoteEntry.js",
      },
      shared: [
        {
          react: {
            singleton: true,
          },
        },
      ],
    }),
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css",
      chunkFilename: "[id].[hash].css",
    }),
    new ForkTsCheckerWebpackPlugin({
      async: false,
    }),
    new ESLintPlugin({
      extensions: ["js", "jsx", "ts", "tsx"],
    }),
    new Dotenv(),
    new CleanWebpackPlugin(),
  ],
};

export default config;

I want to be able to connect to the remote shared repo without having to make manual changes in webpack. Any idea how to?

Created at 5 days ago
issue comment
webpack cache PackFileCacheStrategy

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

Created at 6 days ago
issue comment
Bump jest-cli from 27.5.0 to 29.1.1

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 1 week ago
issue comment
Bump pretty-format from 27.5.0 to 29.1.0

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 1 week ago
issue comment
Bump jest-diff from 27.5.0 to 29.1.0

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 1 week ago
issue comment
Bump jest-circus from 27.5.0 to 29.1.1

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 1 week ago
issue comment
Webpack module federation not using webpack nonce

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

Created at 1 week ago
issue comment
Update AssemblyScript to 0.21.4 and update wasm codegen util

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 1 week ago
issue comment
warn / bail when invalid paths are used in rule.include

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

Created at 1 week ago
issue comment
fix: respect NODE_PATH env variable

@snitin315 Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@alexander-akait Please review the new changes.

Created at 1 week ago
issue comment
fix: respect NODE_PATH env variable

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 1 week ago
issue comment
Bump @babel/core from 7.17.0 to 7.19.3

For maintainers only:

  • [ ] This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
  • [ ] This needs to be backported to webpack 4 (issue will be created when merged)
Created at 1 week ago
issue comment
fix: Add proper callback handling to Compiler readRecords function

@zookatron Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@alexander-akait Please review the new changes.

Created at 1 week ago