Issue 1:
Do you want to request a feature or report a bug?

BUG

What is the current behavior?

require.resolveWeak() can't statically determine module string passed to it as well as import().then.

modules[moduleId] is undefined here:

modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

the moduleId is "./src/components recursive ^\.\/.*$"

Here's the trace:

TypeError: Cannot read property 'call' of undefined
__webpack_require__
http://localhost:3000/static/bootstrap.js:694:29
fn
http://localhost:3000/static/bootstrap.js:115:20
resolve
http://localhost:3000/static/main.js:35453:34
requireSync
http://localhost:3000/static/main.js:80:58
webpackJsonp.../async-module/src/index.js.exports.default
http://localhost:3000/static/main.js:165:10
Loadable
http://localhost:3000/static/main.js:4176:47
getComponent
http://localhost:3000/static/main.js:35434:35
new App
http://localhost:3000/static/main.js:35379:16
http://localhost:3000/static/main.js:12070:18
measureLifeCyclePerf
http://localhost:3000/static/main.js:11850:12

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

For example, try:

require.resolveWeak(`${+new Date() % 2 ? './Example' : './Loading'}`)

What is the expected behavior?

The expected behavior is that resolveWeak will return the moduleId of the corresponding module. The weird thing is that it works when using Webpack on the server, but in the browser (Chrome) it does not work.

In addition, the following works:

import(/* webpackChunkName: "[request]" */ `${+new Date() % 2 ? './Example' : './Loading'}`).then(...

If this is a feature request, what is motivation or use case for changing the behavior?

The motivation and use case for this is for tools like React Loadable and React Universal Component which allow for async-loading + server-side rendering of the same component. Currently such tools don't allow for dynamic component selection (because it depends on resolveWeak for synchronous loading if the module is already available).

If it was just a case of using import().then, such expressions would work. But resolveWeak is needed to make the server-side synchronous rendering magic happen, as well as the synchronous rendering on initial load in the browser if the corresponding chunks are embedded before main.

This is a very important feature for the React Loadable and React Universal Component community and any other future async packages.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

VERSION: 2.6.1 + 3.0.0

NODE: 7.7.2

OSX

Issue 2:
Bug report

What is the current behavior?

"dev" build exits with status 2.

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

It happens when executing webpack serve --progress --profile --config webpack.dev.js

Webpack config

/* eslint-disable import/no-dynamic-require */
const path = require('path');
const { camelCase, startCase } = require('lodash');
const webpack = require('webpack');

const { ModuleFederationPlugin } = webpack.container;
const cwd = process.cwd();
const DIST_PATH = path.resolve(cwd, 'dist');
const SRC_PATH = path.resolve(cwd, 'src');
const PACKAGE_JSON_PATH = path.resolve(cwd, 'package.json');
const INDEX_JS_PATH = path.resolve(SRC_PATH, 'index.js');
const isDev = process.env.BABEL_ENV === 'development';
const NODE_MODULES = 'node_modules';
// PATH FROM EK-REACT_MODULE-BUILD (ie: ek-react-module-build/node_modules)
const NODE_MODULES_ABSOLUTE_PATH = path.resolve(__dirname, NODE_MODULES);
// PATH FROM WHERE THE BUILD IS TRIGGERED (ie: ek-request/node_modules)
const NODE_MODULES_RELATIVE_PATH = path.resolve(cwd, NODE_MODULES);

const {
id: packageId,
exposes,
name,
packageName,
parentPath = '',
remotes,
shared
} = require(PACKAGE_JSON_PATH);

const getDefaultExpose = () => {
const componentName = startCase(name).replace(/ /g, '');
const fullComponentPath = `./${componentName}`;

return { [fullComponentPath]: './' };
};

const baseConfig = {
context: SRC_PATH,
entry: INDEX_JS_PATH,
resolve: {
extensions: ['.js'],
// Avoid duplicates (each module imports only once from app/node_modules)
modules: [
NODE_MODULES_ABSOLUTE_PATH,
NODE_MODULES_RELATIVE_PATH,
NODE_MODULES
]
},
output: {
path: DIST_PATH,
filename: path.join(parentPath, packageId, 'index.js'),
chunkFilename: path.join(parentPath, packageId, 'static', '[name].[chunkhash].js'),
publicPath: 'auto',
library: packageName || packageId,
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.js$/,
include: [SRC_PATH],
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [
[
require.resolve('@babel/preset-env'),
{
// debug: true,
corejs: {
version: '3.14'
},
useBuiltIns: 'usage',
targets: 'defaults'
}
],
[
require.resolve('@babel/preset-react'),
{
development: isDev
}
]
],
plugins: [
require.resolve('babel-plugin-styled-components'),
require.resolve('@babel/plugin-proposal-class-properties')
]
}
}
]
},
{
test: /\.css$/,
use: [
'css-loader'
],
type: 'javascript/auto'
},
{
test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf)$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
},
type: 'javascript/auto'
},
{
test: /\.svg$/,
use: [
require.resolve('@svgr/webpack'),
{
loader: require.resolve('url-loader'),
options: {
esModule: false
}
}
],
type: 'javascript/auto'
}
]
},
plugins: [
new ModuleFederationPlugin({
name: `${camelCase(name)}`,
filename: path.join(parentPath, packageId, 'remoteEntry.js'),
exposes: exposes || getDefaultExpose(),
shared,
remotes
})
]
};

module.exports = baseConfig;

Webpack dev config

const path = require('path');
const portfinder = require('portfinder');
const request = require('request');

const DEVELOPMENT_MODE = 'development';

process.env.BABEL_ENV = DEVELOPMENT_MODE;
process.env.NODE_ENV = DEVELOPMENT_MODE;

const baseConfig = require('./webpack.base');

const cwd = process.cwd();
const PACKAGE_JSON_PATH = path.resolve(cwd, 'package.json');
const HOST = process.env.HOST || '0.0.0.0';
const PROXY_SERVER_PORT = process.env.PROXY_SERVER_PORT || 8000;

// eslint-disable-next-line import/no-dynamic-require
const { id: packageId } = require(PACKAGE_JSON_PATH);
let errorStatus = false;

async function startDevServer() {
// Find a suitable port
portfinder.basePort = 8001;
const port = await portfinder.getPortPromise();

// Override some configuration for development environment
const devConfig = {
...baseConfig,
devtool: 'inline-source-map',
mode: DEVELOPMENT_MODE,
target: 'web',
devServer: {
compress: true,
host: HOST,
hot: true,
port,
writeToDisk: true
}
};

// Register module on local proxy server
setInterval(() => {
request(
`http://${HOST}:${PROXY_SERVER_PORT}/register/${encodeURIComponent(`/${packageId}`)}/${port}`,
(error, response) => {
if (response && response.statusCode === 404) {
process.stdout.write('Attempt to connect to server\n');
}
if (error) {
if (!errorStatus) {
console.error({ error });
}
errorStatus = true;
}
}
);
}, 1000);

return devConfig;
}

module.exports = startDevServer;

What is the expected behavior?

The build should finish without errors, this property is supported per configuration.

Other relevant information:

Using:

"dependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.14.4",
"@babel/preset-react": "^7.12.13",
"@svgr/webpack": "^5.5.0",
"babel-loader": "^8.2.2",
"babel-plugin-styled-components": "^1.12.0",
"core-js": "^3.14.0",
"css-loader": "^5.2.6",
"css-minimizer-webpack-plugin": "^3.0.1",
"file-loader": "^6.2.0",
"lodash": "^4.17.21",
"portfinder": "^1.0.28",
"request": "^2.88.2",
"url-loader": "^4.1.1",
"webpack": "^5.38.1",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^4.0.0-beta.3"
},

Node.js version: ^12

Operating System: OSX