Unable to render module using RequireJS with MVC.net

Question

I am trying to render a module using requirejs using factory pattern in MVC.net but I am getting the error

Uncaught Error: Mismatched anonymous define() module: function () {

My project folder strucutre is something as shown below.

require.config.js:

requirejs.config({
"baseUrl": "Scripts",
"paths": {
    "JALModule": "Views/Claim/Startup/JAL",
    "SeniorCareModule": "Views/Claim/Startup/NonReferral/SeniorCare"
}
});

I am using .net bundling and minification, when the application is rendered on the browser below is the structure.

JALModule.js:

define(function () {
return {
    // declare the function to change the background color
    setBackgroundJAL: function (color) {
        console.log('HI');
    }
};
});

I am accessing the above module from a factory class:

define(function (require) {

var claimTypes = {
    'JAL': require('JALModule')
    , 'SeniorCare': require('SeniorCareModule')
    //, 'W2': require('modules/W2')
};
return function (claimType) {
    try {
        return new claimTypes[claimType];
    } catch (error) {
        throw new Error('Unknown Claim Type Specified.');
    }
}
});

Am I missing some configuration or are the relative paths defined incorrectly.? Need your valuable inputs on this.

Thanks Sajesh

Answer 1

I was able to fix this issue after trying all possibilities. 1) I had to change the config file to provide the correct path:

requirejs.config({
"baseUrl": "../Scripts",
"paths": {
    "JAL": "../../Views/Claim/Startup/JAL",
    "SeniorCare": "../../Views/Claim/Startup/NonReferral/SeniorCare",
    "ClaimStartupFactory": "../../Views/Claim/Startup/ClaimStartupFactory"
}
});

2) Also I had to remove the .net minification of all the files that are defined in requirejs config.

3) Direct reference of the requirejs config link in Layout.cshtml file

<script src="~/Scripts/require.config.js"></script>

Hope this will help others.