Webpack динамически загружает модуль node_module во время выполнения в браузере

Question

Вариант использования:

• БД содержит список имен виджетов, которые может видеть каждый пользователь
• Каждый виджет является модулем_узла
• Нам нужнодинамически загружать модуль узла виджета в пользовательском интерфейсе

Пример:

import React from 'react'
import axios from 'axios'
import { StaticRouter,Route, Switch, NavLink } from 'react-router-dom';
const AsyncComponent = (moduleName) => {
  return require('../node_modules/' + moduleName) //This line is not working if the moduleName is mentioned at runtime, if it is statically mentioned then it works fine.
  //or something like
  return import('../node_modules/' + moduleName)

}
export default class Dashboard extends React.Component{
  state = {
    widgets : [],
    appIsMounted: false
  }

  componentDidMount(){
    axios.get('/widgets', (response) => { //DB contains list of widgets names for the specific user and there will be node_module for each widget or functionality.
      this.setState({
        widgets: response.data //list of functionalities or widgets to show in the UI
      })
    })
  }

  render(){
    return (
        <StaticRouter>
          <div>
 **strong text**               {
                    this.state.widgets && this.state.widgets.map(module => {
                        return <nav>
                            <NavLink to={`/${module}`} exact activeClassName="active">{module.module}</NavLink>
                            </nav>
                    })
                }
            </div>
            <div>
              <Switch>
              {
                this.state.widgets && this.state.widgets.map(module => {
                  return <Route path={`/${module}`} exact component={AsyncComponent.bind(this, module)} />
                })
              }
            </Switch>
            </div>
            </StaticRouter>
        )
  }
}

Пожалуйста, дайте мне знать, если кто-нибудь сталкивался с этой проблемой.

Answer 1

Добавьте этот код в babelLoader или в конфигурацию вашего Webpack.

Исключите только модули узлов:

exclude: /node_modules/

Исключите модули узлов и некоторые другие библиотеки

Например:я буду использовать библиотеку salesforce-ux в качестве моей внешней библиотеки

exclude: /node_modules\/(?!(@salesforce-ux)\/).*/

Answer 2

• Вам не нужно ставить перед именем вашего модуля префикс ../node_modules.Все модули автоматически разрешаются, если только конфигурация разрешения не переопределена явно.
• Я тоже однажды столкнулся с той же проблемой, если я правильно понимаю.Можете ли вы попробовать один раз, включив функцию AsyncComponent внутри вашего Route JSX.Кроме того, это должно быть так

const asyncComponent = bundle => (location, cb) => {
	bundle().then(component => {
		cb(null, component.default ? component.default : component);
	});
};

asyncComponent(() =>
    import(/* webpackChunkName: "CategoryLanding" */ 'pages/CategoryLandingPage/CategoryLandingPage.js')
   )