rollup-plugin-babel 无法识别 JSX

Question

我在使用 RollupJS 时遇到问题 API。出于某种原因，它无法识别 JSX 语法。 Rollup (API) 给我这个错误。

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

2: import App from "./App";
3: const MyApp = (props) => {
4: return <View index={<App />} url={props.url} serverOptions={props.serverOptions}/>;
^
5: };
6: export default MyApp;

这是汇总配置。

export const loadBuildConfigurationOptions = (tsconfigOptions: object, root: Path = Process.Cwd()): RollupOptions => {
    return <RollupOptions> {
        input: Path.FromSegments(root, "src", "index.ts").toString(),
        output: [
            {
                dir: Path.FromSegments(root, "dist").toString(),
                format: "cjs"
            }
        ],
        external: [
            "solid-js",
            "solid-js/web",
            "solidus"
        ],
        plugins: [
            typescript(tsconfigOptions),
            nodeResolve({
                preferBuiltins: true,
                exportConditions: ["solid"],
                extensions: [".js", ".jsx", ".ts", ".tsx"]
            }),
            nodePolyfill(),
            babel({
                babelHelpers: "bundled",
                presets: [["solid", { generate: "ssr", hydratable: true }]],
            }),
            json(),
            styles(),
            copy({
                targets: [
                    { src: 'src/assets/**/*', dest: 'dist/src/assets' }
                ]
            }),
        ],
        preserveEntrySignatures: false,
        treeshake: true,
    };
}

我在我正在开发的 SolidJS SSR 库的构建工具中使用它。这里发生的是这个函数为这个库的用户正在构建的项目生成适当的 Rollup 配置文件。然后 Rollup JS API 使用返回的 Rollup 配置对象来构建实际的应用程序。需要改babel插件里的参数什么的吗？

Answer 1

好的。我想到了。这真的很傻。我只需要对 Babel 插件进行一项更改。

babel({
                babelHelpers: "bundled",
                presets: [["solid", { generate: "ssr", hydratable: true }]],
extensions: [“.js”, “.ts”, “.jsx”, “.tsx”],
            }),

添加 extensions 选项似乎解决了所有问题。

rollup-plugin-babel 无法识别 JSX

rollup-plugin-babel not recognizing JSX

javascript

typescript

babeljs

rollupjs