汇总错误：构建 npm 包时 React 组件中预期存在未解决的依赖关系和表达式

Question

I am not able to build React Component using rollup. I tried all possible way to bundle react component which is having jsx. but same code are working fine when I am not using jsx. 

package.json file

    {
      "name": "npm-test-package",
      "version": "1.0.0",
      "description": "",
      "main": "dist/index.js",
      "type": "module",
      "scripts": {
        "build:dev": "rollup -c --environment NODE_ENV:development",
        "build": "rollup -c --environment NODE_ENV:production"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@rollup/plugin-terser": "^0.4.4",
        "rollup": "^4.13.0"
      },
      "dependencies": {
        "@rollup/plugin-babel": "^6.0.4",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "rollup-plugin-commonjs": "^10.1.0",
        "rollup-plugin-node-resolve": "^5.2.0"
      }
    }

rollup.config.js

    import terser from "@rollup/plugin-terser";
    import resolve from "rollup-plugin-node-resolve";
    import commonjs from "rollup-plugin-commonjs";
    import { babel } from "@rollup/plugin-babel";

    const devMode = process.env.NODE_ENV === "development";
    console.log(`${devMode ? "development" : "production"} mode bundle`);

    export default [
      {
        input: "src/index.js",
        output: {
          file: "dist/index.js",
          format: "es",
          sourcemap: devMode ? "inline" : false,
          plugins: [
            terser({
              ecma: 2020,
              mangle: { toplevel: true },
              compress: {
                module: true,
                toplevel: true,
                unsafe_arrows: true,
                drop_console: !devMode,
                drop_debugger: !devMode,
              },
              output: { quote_style: 1 },
            }),
          ],
          plugins: [
            resolve(),
            babel({
              exclude: "node_modules/**",
              presets: ["@babel/env", "@babel/preset-react"],
            }),
            commonjs(),
          ],
          external: ["react", "prop-types"],
          globals: {
            react: "React",
          },
        },
      },
    ];

src/components/MyComponent

    import React from "react";

    const MyComponent = (props) => {
      const { name } = props;
      return (
        <>
          <div>
            <h1>Hello, my name is {name} </h1>
          </div>
        </>
      );
    };

    export default MyComponent;

error

src/index.js → dist/index.js...
[!] RollupError: src/components/MyComponent.js (6:4): Expression expected
src/components/MyComponent.js (6:4)
4:   const { name } = props;
5:   return (
6:     <>
       ^
7:       <div>
8:         <h1>Hello, my name is {name} </h1>
RollupError: Expression expected
at Object.getRollupError (C:\Users\saura\OneDrive\Desktop\my-awesome-button-alert-component\node_modules\rollup\dist\shared\parseAst.js:282:41)
at ParseError.initialise (C:\Users\saura\OneDrive\Desktop\my-awesome-button-alert-component\node_modules\rollup\dist\shared\rollup.js:12586:40)
at convertNode (C:\Users\saura\OneDrive\Desktop\my-awesome-button-alert-component\node_modules\rollup\dist\shared\rollup.js:14326:10)
at convertProgram (C:\Users\saura\OneDrive\Desktop\my-awesome-button-alert-component\node_modules\rollup\dist\shared\rollup.js:13646:12)
at Module.setSource (C:\Users\saura\OneDrive\Desktop\my-awesome-button-alert-component\node_modules\rollup\dist\shared\rollup.js:15463:24)
at ModuleLoader.addModuleSource (C:\Users\saura\OneDrive\Desktop\my-awesome-button-alert-component\node_modules\rollup\dist\shared\rollup.js:19758:13)

Answer 1

我遇到了类似的问题，通过添加解决了它

"jsx": "react",

在我的 tsconfig.json 中