解析模块说明符时出错：从 API 进行动态导入时做出反应

Posted 2023-02-22

【中文标题】解析模块说明符时出错：从 API 进行动态导入时做出反应

【英文标题】：Error resolving module specifier: react while doing dynamic import from API

【发布时间】：2020-06-26 07:12:16

【问题描述】：

我正在尝试从 API 动态导入反应组件库。 js文件获取成功。 babel 转译也成功了。如果我像import Dummy from './components/js/Dummy.js' 这样从localhost 动态导入Dummy.js 文件，它可以工作。但是 API 导入失败并出现以下错误。 react lazy 也会出现同样的错误。我基本上想动态加载库并向其发布事件。我是反应和前端开发的新手。如果这太愚蠢了，请原谅！。

Error resolving module specifier: react 

我的 App.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()
  ]

Dummy.js。我在 dist/dummy.js 中验证了 babel 转译发生正确。我将转换后的版本上传到我的静态托管网站。

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

class Dummy extends React.Component 

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


export default Dummy;

我有不同的目标要在同一个应用程序中构建、启动我的服务器、创建汇总包等。所以，我非常有信心我的汇总不会干扰应用程序的运行。

【问题讨论】：

你是怎么解决这个问题的？我无法得到有效的答案，汇总配置中不存在选项 externalGlobals。

您必须将其包含在项目中，我想npmjs.com/package/rollup-plugin-external-globals 才能使 externalGlobals 可用。我将 dummy.js 创建为 esm 包，并将其 css 和必要的 umd 依赖项托管在静态站点中，并且能够将其加载到我的应用程序中。我放弃了这个项目，但从另一个站点/API 加载确实有效。如果我找到它会上传完整的代码。

【参考方案1】：

汇总捆绑配置不正确。我试图用 commonjs 插件创建一个 es 输出，而实际上我需要一个 esm 模块。 'react' 的错误是因为它没有解决。必须在进行汇总捆绑时使用 window.React。此外，应将 App.js 卷成 esm 包，以使其动态导入 Dummy.js。在包含 app.js 包的 html 中，我必须包含 react 和 react 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",
    )
  ]
;

【讨论】：

感谢您的更新，您能否澄清您提到的关于 app.js 捆绑包的要点。如果您也可以共享 app.js 的汇总配置，那就太好了，因为我假设 dummy.js 是通过汇总单独捆绑的单独组件，而 app.js 是单独的？对

您好，对于这个巨大的延迟表示歉意。您可以将 app.js 和 dummy.js 视为单独的应用程序。我的 app.js 是一个 Web 应用程序，而 dummy.js 只是为了可以从静态托管站点获得以动态加载。我能够将 dummy.js 作为 esm 模块动态加载，它的 css 文件和 dummy.js 组件所需的 umd 模块必须单独下载。我没有任何 app.js 的汇总配置