"__webpack_require__ is not defined" with atlassian-webresource-webpack-plugin

Confluence Development Confluence Server
,
1

I’m trying to use the atlassian-webresource-webpack-plugin, but I am getting:

Uncaught ReferenceError: __webpack_require__ is not defined
    at batch.js?devtoolbar=true&gatekeeper-ui-v2=true&healthcheck-resources=true&highlightactions=true&hostenabled=true&locale=en-US&user-logged-in=true:24285:27

My JS file is:

alert("Hello world!");

And Atlassian’s webpack plugin transforms it into:

"undefined"!=typeof AJS&&(__webpack_require__.p=AJS.contextPath()+"/s/DEV_PSEUDO_HASH/_/download/resources/com.playsql.requirementyogi:assets-DEV_PSEUDO_HASH/"),alert("Hello world!");

Questions:

2

If it helps, my webpack.config.js is this:

const path = require('path');
const WrmPlugin = require("atlassian-webresource-webpack-plugin");

const PLUGIN_KEY = "com.playsql.requirementyogi";
const FRONTEND_SRC_DIR = "./requirementyogi/src/main/front-end";
const OUTPUT_DIR = "./requirementyogi/target/classes";

module.exports = {
  entry: {
    'my-entry': './' + path.join(FRONTEND_SRC_DIR, 'my-first-file.js'),
  },
  plugins: [
    new WrmPlugin({
      pluginKey: PLUGIN_KEY,
      contextMap: {
        // Those are the <context> tags that should be found in the atlassian-plugin.xml, so if you need
        // more contexts, search Confluence's source code for <context> tags.
        'my-feature': ['atl.general'],
      },
      xmlDescriptors: path.resolve(OUTPUT_DIR, 'META-INF', 'plugin-descriptors', 'wr-defs.xml')
    })
  ],
  output: {
    filename: 'bundled.[name].js',
    path: path.resolve(OUTPUT_DIR),
  },
};
3

The solution came from @remie (maybe you want to get credits for this answer, Remie ;), copy it if you want):

I didn’t have the “runtime”, which can be included by adding the following config to module.exports:

  optimization: {
    runtimeChunk: 'single',
  },
2 Likes
4

I met the same problem with just a one line js (only console.log), the runtimeChunk: 'single' can solve the problem.

But I don’t know the reason, why “webpack_require is not defined” ?

Could someone pls tell me the cause?

5

I can’t identify what I’m doing differently, but I have it working in my code and the builded JS code does not contain webpack_require. It looks like this in my case:

"undefined"!==typeof AJS&&(n.p=AJS.contextPath()+"/s/SOME_HASH/_/download/resources/aptis.plugins.epicSumUp:assets-SOME_HASH/")

It looks like webpack_require should be replaced during the building process. If i remember correctly you should also define chunkLoadingGlobal in output to prevent conflicts with other plugins

our webpack output also contains something like this:

config.output.libraryExport = 'default';
config.output.libraryTarget = 'window';
config.output.library = 'OutAppName';
config.output.chunkLoadingGlobal = 'webpackJsonpOurAppName';