2

I have 2 legacy JS files, which I do not want to change. For that reason I want to use exports-loader and imports-loader

File B-legacy needs the global var GLOB from File A-legacy

My webpack.config.js results in 

rules: [
        { test: /\.ts$/, use: 'ts-loader' },     // Typescript file loader;              
        {
            test: path.resolve(__dirname, '../Scripts/legacy/A-legacy'),        
            use: 'exports-loader?GLOB'
        },
        {
            test: path.resolve(__dirname, '../Scripts/legacy/B-legacy'),
            use: 'imports-loader?GLOB'
        } 
    ],

For my understanding that should work. I'm exporting the GLOB var in A-legacy and want to import it to B-legacy.

But building it gives the following error:

ERROR in ./Scripts/legacy/B-legacy.js Module not found: Error: Can't resolve 'GLOB' in 'C:\anypath\Scripts\legacy' @ ./Scripts/legacy/A-legacy.js 2:11-26

I've already tried to add enforce: "pre" to exports-loader rule. But that doesn't change anything

Daniel R
  • 1,122
  • 8
  • 16

1 Answers1

1

Had exactly same error in my setup, although I am using inline imports. The way I have solved the problem was by removing imports-loader for B-legacy file.

Example setup were I was getting Module not found error:

import formValidation from 'exports-loader?FormValidation!./src/form-validation';
import script from '!!imports-loader?$=jquery,FormValidation!./src/script';

Fixed setup:

import formValidation from 'exports-loader?FormValidation!./src/form-validation';
import script from '!!imports-loader?$=jquery!./src/script'; // removed FormValidation

On top of this, I had to expose FormValidation so it is still available in the browser and use imports-loader to define this as window:

import formValidation from 'expose-loader?FormValidation!imports-loader?this=>window!exports-loader?FormValidation!./src/form-validation';

Note that order of loaders is important.

Morpheus
  • 8,829
  • 13
  • 51
  • 77