I have an older webapp that uses React but also some older libraries. I am using Webpack 5 to bundle my files.

When I start the app, I get this error:

Uncaught TypeError: underscore__WEBPACK_IMPORTED_MODULE_1__.default.noConflict is not a function

Its on this line in the EntryPoint.js file:

var  underscore = _.noConflict();

And it's used like this:

import _ from 'underscore';
import Backbone from 'backbone';
import $ from 'jquery';

$.noConflict(true);
Backbone.noConflict();

// error here
var  underscore = _.noConflict();

underscore.templateSettings = {
    interpolate: /\{\{(.+?)\}\}/g, 
    evaluate: /\{%([\s\S]+?)%\}
};

I also tried this:

import underscore from 'underscore';
import Backbone from 'backbone';
import $ from 'jquery';

$.noConflict(true);
Backbone.noConflict();

// error here
underscore.noConflict();

underscore.templateSettings = {
    interpolate: /\{\{(.+?)\}\}/g, 
    evaluate: /\{%([\s\S]+?)%\}
};

I believe i am using it correctly based on the underscore docs:

https://underscorejs.org/#noConflict

Does anyone know what could be causing this?

Thanks!