Requirejs callback undefined on code splitting

Question

I'm a newbie to RequireJS I have a ReactJS app with index.jsx as an entry point

// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';


export function callBackForRequirejs() {
    return "testing";
}

When I load my build via RequireJS I get these callbacks

require(["/path/to/bundle"], function(callback) {
    console.log(callback) // I get "callBackForRequirejs"
}, function(err){
    console.log(err)
});

But when I do code splitting I'm getting undefined in the callback, for code splitting I'm using these configs

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial",
            }
        }
    }
}

UPDATE:

Actually, my react app is a plugin for some external app, the external app loads my plugin via RequireJS. The code inside an external app is something like this

case 1:

require(['/pathof/my/react/plugin/bundle.js'],
    function(callbackwhenpluginloads){
        callbackwhenpluginloads()
    })

Since the size of my bundle.js is very large so I decided to split it into two parts one which comes from node_modules and one from my code

Now the external plugin loads my react plugin something like this

case 2:

require(['/pathof/my/react/plugin/bundle.js', 
'/pathof/my/react/plugin/vendor.js' ], function(callbackwhenpluginloads){
    callbackwhenpluginloads()  // callbackwhenpluginloads is undefined 
})

I'm getting undefined callback when the external app loads my plugin in

Answer 1

Actually, based on RequireJS docs for starting you did the following way and it works well:

require(['/path/to/bundle.js'], function(callback) {
  console.log(callback) // you get callbackForRequireJS
}, function(error) {
  console.log(error)
});

And now you did a code-splitting on your project, so you should consider this the vendor.js is like a dependency to split bundle.js file. so you should follow this example to load the dependencies at the first and then run the other split code. so your code is something like below:

requirejs.config({
  paths: {
    reactApp: 'path/to/bundle.js'
  },
  deps: ['path/to/vendor.js'],
});


require(['reactApp'], function(callback) {
  console.log(callback) // it should works now
}, function(error) {
  console.log(error)
});

Or there is another way that I don't recommend it:

require(['path/to/vendor.js'], function() {
  require(['path/to/bundle.js'], function(callback) {
    console.log(callback) // it should works now
  }, function(bundleError) {
    console.log('bundleError', bundleError)
  });
}, function(vendorError) {
  console.log('vendorError', vendorError)
});