Getting "define cannot be used indirect" error when bundling with Webpack

Question

When I try to bundle my code written in AMD I get the error Uncaught Error: define cannot be used indirect as soon as I use the define() function. How can I solve this? It is not an option to change the define() to import since the whole project is written in RequireJS AMD

This is my Webpack configuration:

const path = require("path");

module.exports = {
    entry: {
        app: './app/js/app/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'app/build'),
        filename: 'main.js'
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/env']
            }
        }]
    }
};

My entry file:

define('app', [
    'lib/angular',
    'lib/has',
], function (angular, has) {
    'use strict';

    return angular.module('app', ['ngAnimate', 'ngSanitize', 'angular-require'])

}, function(error) {
    console.error(error);
});

This is the output it is giving me:

!function (e) {
    var n = {};

    function r(t) {
        if (n[t]) return n[t].exports;
        var o = n[t] = {i: t, l: !1, exports: {}};
        return e[t].call(o.exports, o, o.exports, r), o.l = !0, o.exports
    }

    r.m = e, r.c = n, r.d = function (e, n, t) {
        r.o(e, n) || Object.defineProperty(e, n, {enumerable: !0, get: t})
    }, r.r = function (e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
    }, r.t = function (e, n) {
        if (1 & n && (e = r(e)), 8 & n) return e;
        if (4 & n && "object" == typeof e && e && e.__esModule) return e;
        var t = Object.create(null);
        if (r.r(t), Object.defineProperty(t, "default", {
            enumerable: !0,
            value: e
        }), 2 & n && "string" != typeof e) for (var o in e) r.d(t, o, function (n) {
            return e[n]
        }.bind(null, o));
        return t
    }, r.n = function (e) {
        var n = e && e.__esModule ? function () {
            return e.default
        } : function () {
            return e
        };
        return r.d(n, "a", n), n
    }, r.o = function (e, n) {
        return Object.prototype.hasOwnProperty.call(e, n)
    }, r.p = "", r(r.s = 0)
}([function (e, n, r) {
    var t;
    void 0 === (t = function () {
        "use strict";
        r(1)("app", ["lib/angular", "lib/has"], function (e, n) {
            return e.module("app", ["ngAnimate", "ngSanitize", "angular-require"])
        }, function (e) {
            console.error(e)
        })
    }.apply(n, [])) || (e.exports = t)
}, function (e, n) {
    e.exports = function () {
        throw new Error("define cannot be used indirect")
    }
}]);

However the entry file is being imported by the RequireJS config file:

var bower_components = bower_components || 'bower_components';

require.config({
    paths: {
        'lib/angular': bower_components + '/angular/angular.min',
        'lib/angular-animate': bower_components + '/angular-animate/angular-animate.min',
        'lib/sprintf': bower_components + '/sprintf/dist/sprintf.min',
        'lib/twitter-text': bower_components + '/twitter-text-js/js/twitter-text',
        'lib/jsdiff': bower_components + '/jsdiff/diff',
        es6: "lib/requirejs-babel/es6",
        babel: "lib/requirejs-babel/babel-5.8.34.min",
        'babel-plugin-module-resolver': 'lib/babel-plugin-module-resolver-standalone/index'
    },
    babel:{
        fileExtension: ".js"
    },
    packages: [{
            name: 'app',
            location: 'build' //This directs to the file compiled by webpack
        }, {
            name: 'app/blogLegacy',
            location: 'apps/blog-legacy'
        },{
            name: 'app/blog',
            location: 'apps/blog-modular'
        },{

EDIT

Full error:

Uncaught Error: define cannot be used indirect
    at module.exports (webpack:///(webpack)/buildin/amd-define.js?:2:8)
    at eval (main.js:1)
    at Object../app/js/app/main.js (main.js?bust=1558595950937:96)
    at __webpack_require__ (main.js?bust=1558595950937:20)
    at main.js?bust=1558595950937:84
    at main.js?bust=1558595950937:87
module.exports @ amd-define.js:2
(anonymous) @ main.js:1
./app/js/app/main.js @ main.js?bust=1558595950937:96
__webpack_require__ @ main.js?bust=1558595950937:20
(anonymous) @ main.js?bust=1558595950937:84
(anonymous) @ main.js?bust=1558595950937:87
angular.js:38 

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.20/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.20%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A6%3A417%0A%20%20%20%20at%20http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A21%3A412%0A%20%20%20%20at%20a%20(http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A21%3A53)%0A%20%20%20%20at%20http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A21%3A296%0A%20%20%20%20at%20http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A35%3A46%0A%20%20%20%20at%20r%20(http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A7%3A322)%0A%20%20%20%20at%20g%20(http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A34%3A399)%0A%20%20%20%20at%20cb%20(http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A38%3A135)%0A%20%20%20%20at%20d%20(http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A17%3A381)%0A%20%20%20%20at%20tc%20(http%3A%2F%2Fgo.development%2Fbower_components%2Fangular%2Fangular.min.js%3Fbust%3D1558595950937%3A18%3A179)
    at angular.js:38
    at angular.js:4154
    at r (angular.js:326)
    at g (angular.js:4115)
    at cb (angular.js:4041)
    at d (angular.js:1455)
    at tc (angular.js:1476)
    at Jd (angular.js:1370)
    at HTMLDocument.<anonymous> (angular.js:26446)
    at j (jquery.js:3148)

Answer 1

It seems like you have some modules dependencies which are using define in a strange way (do not use the standard umd boilerplate).

You will have to find which one is the dependency with the problem and then do something like this in your webpack config for that lib:

module: {
    noParse: /node_modules\/json-schema\/lib\/validate\.js/
}

Some known modules with this issue: set-getter, jquery-migrate, Dexie

There are also a lot of issues opened on webpack github page:
https://github.com/webpack/webpack/issues/138
https://github.com/webpack/webpack/issues/2958
https://github.com/doowb/set-getter/issues/1