How to configure runtimeChunk with precompiled file path in webpack 5 or alternative

Question

Earlier in webpack version 4 and node 14 version, runtimeChunkName was with pre-comipled chunk filepath, but now this is not working in webpack 5.

const beforeRenderPath = before-render/js/dist/BeforeRenderActivity-dyn;

const runtimeChunkName = env === 'development' ? ../${beforeRenderPath} : ./plugins/${beforeRenderPath};

optimization: {
  splitChunks: {
    cacheGroups: {
      antd: {
        name: 'antd',
        test: (module) => {
          return (
            /antd|rc-/.test(module.context) ||
            /ant-design[\\/]icons/.test(module.context)
          );
        },
        chunks: 'all',
        priority: 2,
        enforce: true
      },
      ... some_more_vendors,
  runtimeChunk: {
    name: runtimeChunkName
  }

How to serve runtimeChunk name with the help of filepath reference in webpack 5?

Error received is: Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

Entry points looks like this:

This is served from plugin.json which is hash map.

{
  "../../conf/login/js/dist/LoginView": "./plugins_on_premise/login/js/LoginView.tsx",
  "../auth-provider/js/dist/AuthProvider": "./plugins_on_premise/auth-provider/js/AuthProvider.ts",
  "../auth-provider/js/dist/RenewTokenActivity-dyn": "./plugins_on_premise/auth-provider/js/RenewTokenActivity-dyn.tsx",
  "../_context-switch/js/dist/ContextSwitchActivity-dyn": "./plugins_on_premise/_context-switch/js/ContextSwitchActivity-dyn.tsx",
  "../change-password/js/dist/ChangePasswordActivity-dyn": "./plugins_on_premise/change-password/js/ChangePasswordActivity-dyn.tsx",
  "../before-render/js/dist/BeforeRenderActivity-dyn": 
  "./plugins/before-render/js/BeforeRenderActivity-dyn.tsx"
}

These are the versions in use:

"webpack": "5.88.2",
"webpack-bundle-analyzer": "4.9.0",
"webpack-chunk-rename-plugin": "1.0.3",
"webpack-cli": "5.1.4",
"webpack-dev-middleware": "6.1.1",
"webpack-dev-server": "4.15.1",
"webpack-hot-middleware": "2.25.4"

runtimeChunkName in webpack-4 was pointing to a specific file: BeforeRenderActivity as a dependency or pre-check earlier. But wepack 5 says, now need to use dependOn with import syntax.

So what should be correct syntax for entries and now going forward runTimeChunkname should be kept or deleted or modified for optimization benefits that was carried from webpack 4.

Requesting a working example or steps to fix this.

How to fix this issue with multiple plugin entry that requires one precompiled entry in webpack 5?

Anvil

I see your comment with The shared entry point should be loaded for all entry points in runtime and thats the ask., So, just to clarify, you're looking to make sure that the shared files, for plugin are added for each entry separately, is that right? – Kubetz

Yes, correct @Oxts – Anvil

Answer 1

I'm not quite sure of what you mean when you say -

runtimeChunkName was with pre-comipled chunk filepath

The documentation for v5 and v4 for runtimeChunk is same and the only effect this takes is appending the provided path to the runtime module generated for optimization, as mentioned in the docs. So by providing a value like ../${beforeRenderPath} what you were trying to do is load the module, one directory up for each runtime module?

From the statement -

runtimeChunkName in webpack-4 was pointing to a specific file: BeforeRenderActivity as a dependency or pre-check earlier. But wepack 5 says, now need to use dependOn with import syntax.

I think my speculation above is correct and as mentioned by you in response to my comment on the post, what you're expecting is to load a specific set of modules for every runtime module, instead of just having one of those shared module included globally and be used everywhere.

The shared entry point should be loaded for all entry points in runtime and thats the ask.

To do that in Webpack 5, here's what you'll need to do -

const env = process.env.NODE_ENV; // or whatever
let beforeRenderPaths = ["before-render/js/dist/BeforeRenderActivity-dyn", "auth-provider/js/dist/RenewTokenActivity-dyn"];

beforeRenderPaths = beforeRenderPaths.map(path => env === "development" ? `../${path}` : `./plugins/${beforeRenderPath}`);

module.exports = {
  //...
  entry: {
    a: { import: "./src/a.js", dependOn: "shared" },
    b: { import: "./src/b.js", dependOn: "shared" },
    c: { import: [ "./src/c.js", "./src/f.js"], dependOn: "shared"},
    'shared': beforeRenderPaths,
  },
  //...
  runtimeChunk: true
};

And then, make sure to import the shared modules in all the places like so -

import 'before-render/js/dist/BeforeRenderActivity-dyn';
import 'auth-provider/js/dist/RenewTokenActivity-dyn';

Let me know if I misunderstood something or missed something.

NOTE: This practice is frowned upon by webpack. Read this for more information and check this for understanding exactly why. I'm guessing that your use case is to do some sort of housekeeping stuff before loading anything, like authentication, checking active plan etc.

Kubetz

I cannot load imports on all modules now which doesn't work for me. There is a internal component library which we use as a dev dependency that sets a particular project instance and it is customisable. So every plugin that loads requires instance creation that was happening as runtimechunk in webpack 4. All modules rely on that provider function which can only be executed when instance is created in runtime without imports on all modules. Hope this clears – Anvil

I see. For that you'll have to use some plugin to add import for each module. I'm not really sure how this even worked for you in v4, I didn't think runtimeChunk would do something like that. Would it be possible for you to create a small sample project depicting the behaviour you had in the v4? That'll give me an idea to help you out. One more thing, do try the config I've suggested without adding imports, see what you get. – Kubetz

Field 'browser' doesn't contain a valid alias configuration /Users/mshreevatsa/Documents/projects/cn2/ui/before-render/js/dist/BeforeRenderActivity-dyn.tsx doesn't exist .js Because its a class and instance not created, it refers to prod code which is still not exist during compilation in v5. in V4, everything was compiled and in runTime, we use to refer either for dist or public folder – Anvil

It seems to me that you've bootstrapped webpack manually. I tried to create a small project with config and some files, I got this error for browser field too, the issue here is that when we import something like ./src/path/Button and don't provide the extension, the bundler doesn't like it because browser won't know what kind of file it is. If we add the extension at the end of the import, it compiles happily. Due to the chunks being small for my test, I wasn't getting a split behavior. If you could share a sample of v4 config, working the way to want it to, I'll be able to help. – Kubetz

i am rewarding you before the bounty gets wasted. But i still havent fixed this issue. Ill post the errors in sometime – Anvil

@MithunShreevatsa Waiting. – Kubetz

I have added the configs here: codesandbox.io/s/nervous-dust-jqzvmp?file=/package.json. Almost in the final stage of fixing this. But beforeRenderActivity page is not loading due to path issues. Please help fix the path !ErrorImage – Anvil

At line 53 of webpack.config.js when you iterate over the entries and conditionally, add the dependOn for all the parts, if the entry is for ../before-render/js/dist/BeforeRenderActivity-dyn, you're using that to add an entry in the else block, while the dependOn is always BeforeRenderActivity-dyn, there's no entry for BeforeRenderActivity-dyn but for ../before-render/js/dist/BeforeRenderActivity-dyn, how does that work? – Kubetz

yes dependOn doesnt depend on self plugin right, so excluded – Anvil

No, what I meant was that if you're using BeforeRenderActivity-dyn as the dependency name, then the entry name should be same as well, whereas you're using the path from the plugins.json as the entry name. – Kubetz

yes its the same – Anvil

I agree and correct @Oxts, that was the problem and fixed. Thank you so much and i close this here. I even updated codesandbox with latest webpack.config and plugin code – Anvil

Rewarding every effort in answering a blocker challenge for me – Anvil

@MithunShreevatsa Mark as accepted as well? – Kubetz

@Oxts - with this changes, i am facing one more bundling error. [webpack-dev-middleware] Error: Prevent writing to file that only differs in casing or query string from already written file. <e> This will lead to a race-condition and corrupted files on case-insensitive file systems. – Anvil

@MithunShreevatsa Have you tried any solutions yet? This appears for the first result of the google search. Could you list what have you done so far and whether you've changed config? – Kubetz

/Users/mshreevatsa/Documents/projects/cn2/ui/web/sandbox/slipstream/dist/public/installed_plugins/dist/runtime~Module[2515: /Users/mshreevatsa/Documents/projects/cn2/ui/web/node_modules/happypack/loader.js. It says its bcome of runtime~Module not sure what can be done for this – Anvil

Raised a separate question: #77083830 – Anvil