react lazy load external amd modules

Question

My react app has external resources outside src/ so i have ejected react-scripts and disabled ModuleScopePlugin. Referenced the external library in resolve.alias and used across the application.

resolve.alias: {
  'genlib': path.resolve(fs.realpathSync(process.cwd()), 'lib/genlib/js/src'),
  'config': path.resolve(fs.realpathSync(process.cwd()), 'config/dev'),
  'messages': path.resolve(fs.realpathSync(process.cwd()), 'config/messages')
}

genlib is the external library im trying to reference.

The external library is AMD using requirejs.

One of the file in the library lazy loads a class using require.

define('class1', ['require', ...], function(require, ...) {
  //
  require([variable], function()...)
});

The above require is throwing Cannot find module 'xxx' at runtime from webpackEmptyContext.

When require from above code is consoled then below is logged instead of require function. Confused why webpackEmptyContext is consoled out instead of webpackContext function

ƒ webpackEmptyContext(req) {
    var e = new Error("Cannot find module '" + req + "'");
    e.code = 'MODULE_NOT_FOUND';
    throw e;
}

I have not changed any of the webpack.config.js except adding alias and disabling ModuleScopePlugin.

What else needs to be added or changed in config to lazy load amd modules.

webpack v4.19.1
react-dev-utils v7.0.1

Sandeep · Accepted Answer · 2019-03-14 16:56:30Z

1

I have solved by using ContextReplacementPlugin.

Added below code to webpack config plugins.

new webpack.ContextReplacementPlugin(/genlib[\\/]services/, /.*$/),

Now a map is created with all the files in the services directory and webpackContext loads the files when required.

answered Mar 14, 2019 at 16:56

Sandeep

2,12121 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Code Drop Over a year ago

is that possible to use ContextReplacementPlugin along with Craco (alternative webpack override for Create React Apps)

amarmishra · Accepted Answer · 2019-03-14 09:27:32Z

0

You will see babel-loader in return object of webpack.config.js file. module -> rules array First code is to run the linter

    {
      test: /\.(js|mjs|jsx)$/,
      enforce: 'pre',
      use: [
        {
          options: {
            formatter: require.resolve('react-dev-utils/eslintFormatter'),
            eslintPath: require.resolve('eslint'),

          },
          loader: require.resolve('eslint-loader'),
        },
      ],
      include: [
          paths.appSrc,
          'paht/to/external-library/using/requirejs' <---- Add your external file path for loader to parse the AMD files
      ],
    }

Similarly include file path to test entry of JS files test: /\.(js|mjs|jsx|ts|tsx)$/,

Can you try this and check?

answered Mar 14, 2019 at 9:27

amarmishra

6136 silver badges15 bronze badges

3 Comments

Sandeep Over a year ago

I have tried this. Included path of external library for both eslint and babel-loader. But it is still throwing the same error.

amarmishra Over a year ago

can you show your resolve.alias code? Also, try adding libraryTarget: 'umd' in output object.

Sandeep Over a year ago

I have updated the Question with resolve.alias. Tried adding libraryTarget: 'umd'. No use :(

Collectives™ on Stack Overflow

react lazy load external amd modules

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related