Webpack and imports-loader error "Can't resolve"

Question

I'm trying to use Webpack (v3.6.0) to bundle a lot of js files for my web application, some are angular components, but mostly they are legacy code.

The legacy code is heavily interdependent of some specific functions. For instance, we have a specific file that declares 3 functions (PrepareTranslation, PrepareLocalTranslation and Translate), that are used throughout the system.

I was looking for a way to make this 3 functions global, but instead, I found an article about 'imports-loader' that would allow me to inject variables into that code using a specific notation:

require("imports-loader?$=jquery!./myjs");

The above code would, inside myjs.js make

var $ = require('jquery');

However, when I try using this method to inject requires and variables into my classes, Webpack throws an error "Can't resolve imports-loader?$=jquery!./myjs". Removing the ! from the string fixes the error, but I don't quite like the sintax that way, and it differs from everything I was able to find online so far.

My entrypoint script for webpack is as follows:

window._SYS_VER = '452';

import 'jquery';

import 'ThirdParty/angular/angular';

import Emitter from 'ThirdParty/emitter';

//SimpleMVC related
import 'imports-loader?jQuery=jquery./js/simplemvc/simplemvc.modaldialog';
import 'imports-loader?jQuery=jquery./js/simplemvc/simplemvc.paneldialog';
//     import 'imports-loader?jQuery=jquery!./js/simplemvc/simplemvc.paneldialog';
import Translation from 'JS/simplemvc/simplemvc.i18n';

// jQuery related
import 'JS/jquery/ui/jquery-ui.min';
import 'JS/jquery/masked/jquery.maskedinput';
import 'JS/jquery/growl/jquery.growl';
import 'imports-loader?prepareTranslation=>Translation.prepareTranslation./js/jquery/alerts/jquery.alerts';

I have tried using require syntax instead of import, but it works the same way.

I was able to make jquery available on every js using webpack.ProvidePlugin, but it didn't work for my i18n functions, then I started trying with imports-loader

Any ideas?

Answer 1

webpack separate the imports-loaders, so need install via:

yarn add imports-loader