使用Rollup.js + React 18时出现'Uncaught ReferenceError: React is not defined'错误

Chrome控制台报错：

index.tsx:13 Uncaught ReferenceError: React is not defined
    at index.tsx:13:2

之前用Rollup.js开发过大型纯JS应用，现在想集成React，但遇到问题——代码编译无报错，但浏览器无法运行。搜了大量相关内容，所有建议都无效，求解决。

编译命令 #

rollup -c -w

Rollup编译输出 #

rollup v3.6.0
bundles src/ts/index.tsx → resources/public/js/bundle.js...
LiveReload enabled
created resources/public/js/bundle.js in 1.1s

[2023-01-24 01:11:33] waiting for changes...

配置文件与代码 #

rollup.config.js #

import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/ts/index.tsx',
  output: {
    file: 'resources/public/js/bundle.js',
    format: 'iife',
    sourcemap: 'inline',
    inlineDynamicImports: true,
    globals: {
      "react/jsx-runtime":"jsxRuntime",
      "react-dom/client":"ReactDOM",
      "react":"React"},
  },
  external: [ 'react', 'react/jsx-runtime','react-is', 'react-dom/client','react-dom'],
  watch: true,
  plugins: [typescript(),
        nodeResolve(),
        livereload(),
        babel({
          babelHelpers: "bundled",
              exclude: 'node_modules/**',
              presets: [ ["@babel/preset-react", {"runtime": "automatic"}] ]
        })]
};

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noImplicitAny": true,
    "removeComments": true,
    "checkJs": false,
    "preserveConstEnums": true,
    "sourceMap": true,
  },
  
  "include": ["src"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

index.tsx #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.tsx #

import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者user600830