CODEWITHSUNDEEP
javascripttypescriptbabeljsrollupjs
Patrick Lumenus
Patrick Lumenus

Reputation: 1722

rollup-plugin-babel not recognizing JSX

I am having issues with RollupJS API. For some reason, its not recognizing JSX syntax. Rollup (API) is giving me this error.

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;

Here's the Rollup config.

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,
    };
}

I am using this in a build tool for a SolidJS SSR library I am developing. what is happening here is this function generates the appropriate Rollup configuration file to for the project being build by the user of this library. The returned Rollup configuration object is then being used by the Rollup JS API to build the actual application. Do I need to change the parameters in the babel plugin or something?

Upvotes: 0

Views: 2629

Answers (1)

Patrick Lumenus
Patrick Lumenus

Reputation: 1722

Okay. I figured it out. It’s quite silly really. I just had to make one change to the Babel plugin.

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

Adding the extensions option seemed to have fixed everything.

Upvotes: 3

Related Questions