Ошибка при разрешении спецификатора модуля: реагируйте при выполнении динамического c импорта из API

Question

Я пытаюсь динамически импортировать реагирующую библиотеку компонентов из API. Файл js получен успешно. Вавилонская транспиляция тоже прошла успешно. Если я динамически импортирую файл Dummy. js с локального хоста, например import Dummy from './components/js/Dummy.js', он работает. Однако импорт API завершается с ошибкой ниже. Та же ошибка возникает и с ленивым реагированием. Я в основном хочу динамически загружать в него события lib и publi sh. Я новичок ie, чтобы реагировать и фронт-энд разработки. Пожалуйста, извините, если это слишком глупо!.

Error resolving module specifier: react 

Мое приложение. js

import React, { lazy, Suspense } from 'react';
import './App.css';
import ErrorBoundary from './ErrorBoundary';

class App extends React.Component {

render(){

    const loader = () => import( /*webpackIgnore: true*/ `https://example.com/Dummy.js`);
    const Dummy = ReactDynamicImport({ loader });


    const LoadingMessage = () => (
      "I'm loading..."
    )

    return (
    <div className="App">
      <h1>Simplewidget</h1>
      <div id="simplewidget">
      <ErrorBoundary>
      <Suspense fallback={LoadingMessage}>
        <Dummy />
        </Suspense>
        </ErrorBoundary>
      </div>
    </div>
    );
  }
}

export default App;

rollup.config. js, После нескольких попыток я пришел к настройке ниже https://github.com/jaebradley/example-rollup-react-component-npm-package/blob/master/rollup.config.js

// node-resolve will resolve all the node dependencies
import resolve from '@rollup/plugin-node-resolve';

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import filesize from 'rollup-plugin-filesize';
import localResolve from 'rollup-plugin-local-resolve';

export default {
  input: 'src/components/js/Dummy.js',
  output: {
    file: 'dist/Dummy.js',
    format: 'es',
    globals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      }
  },
  // All the used libs needs to be here
  external: [
    'react',
    'react-dom'
  ],
  plugins: [
  babel({
    exclude: 'node_modules/**',
  }),
  localResolve(),
  resolve({
    browser: true,
  }),
  commonjs(),
  filesize()
  ]
}

Пустышка. js. Я подтвердил в dist / dummy. js, что трансплантация вавилона произошла правильно. Я загрузил трансплантированную версию на свой хостинг-сайт stati c.

import React from "react";
import ReactDOM from "react-dom";

class Dummy extends React.Component {

  render() {
    return (
      <h1>Hello</h1>
    );
  }
}

export default Dummy;

У меня есть разные цели для сборки, запуска сервера, создания связующего пакета и т. Д. c в одном приложении. Поэтому я уверен, что мой накопительный пакет не помешает запуску приложения.

Answer 1

Неправильная конфигурация объединения. Я пытался создать вывод es с помощью общего плагина js, хотя на самом деле мне требовался модуль esm. Ошибка в «реакции» заключается в том, что она не устранена. Пришлось сделать так, чтобы он использовал window.React при выполнении свертки. Кроме того, приложение. js должно быть свернуто как пакет esm, чтобы динамически импортировать Dummy. js. В HTML, где включен пакет приложения. js, мне пришлось включить сценарии реакции и реакции js umd.

export default {
  input: "./src/components/js/Dummy.js",
  output: {
    file: './dist/Dummy.js',
    format: 'esm'
   },
   plugins: [
    babel({
      exclude: "node_modules/**"
    }),
    resolve(),
    externalGlobals({
    "react": "window.React",
    "react-dom": "window.ReactDOM",
    })
  ]
};