javascript - Confusing behavior when wiring together Rollup, ES modules, TypeScript, and JSX

Question

The things I noted in the title - I started to learn them just recently. They are going not that smooth, so I have to ask this little question on StackOverflow.

What I require

• Something to pack my stuff - here comes Rollup
• Bare module imports for my own module files - using @rollup/plugin-node-resolve for this
• Funny typed language - TypeScript and @rollup/plugin-typescript
• React with JSX - it is react and react-dom packages, and typescript, which is able to process JSX

I read these docs to wire these tools together:

• https://www.typescriptlang.org/tsconfig
• https://www.npmjs.com/package/@rollup/plugin-typescript

I successfully used Rollup, @rollup/plugin-node-resolve, and TypeScript. But with addition of React things went odd.

Demo project

Please look at the example project I made for illustration:
https://github.com/Ser5/RollupWireBug

git clone https://github.com/Ser5/RollupWireBug.git
cd RollupWireBug/
npm install or yarn install
npm run build

The project structure is:

/
    src/
        js/ - only folder that contains my code
            main.tsx - entry point
            test-class.js - for testing bare import
        buggy.tsx - should be excluded from building
    dist/
        bundle.js - Rollup output file

rollup.config.js

To my understanding the config should work like that:

resolve({
    moduleDirectories: ['node_modules/', 'src/js/'],
    extensions:        ['.js', '.ts', '.jsx', '.tsx'],
}),

^ This should mean to bare import modules from node_modules/ and src/js/, searching for files with noted extensions.

And here comes the puzzling part:

typescript({
    include: [
        './**/*',
        //'src/js/**/*',
        //"node_modules/**/*",
    ],
    exclude: [
        "node_modules/",
        "dist/",
        "src/buggy.tsx",
    ],
}),

^ This is how a configuration works for me. I must write ./**/* in the include - which seems odd for me, as I believe I don't need to include every file from the project root - I need only src/js/.

If instead of ./**/* I use src/js/**/*, or src/js/**/* with node_modules/**/* - Rollup refuses to build the project, screeching:

src/js/main.tsx → dist/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
srcjsmain.tsx (7:13)
5:
6: let myName = 'Ser5';
7: let s      = <h1>{myName}</h1>;
                ^
8: console.log(s);
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

It doesn't recognize the JSX syntax.

Because of ./**/* in the include I also need to have the exclude section - otherwise Rollup/TypeScript will crawl into src/buggy.js and even dist/, and try to build them as well.

tsconfig.json

I understand it as follows:

"baseUrl": "./",
"paths": {
    "*": [
        "node_modules/*",
        "src/js/*",
    ],
},

^ "Go search modules in node_modules/ and src/js/ directories."

"outDir": "tsout",

^ Really no idea WTF is this. Looks like some temporary folder.

And if instead of this part in rollup.config.js

typescript({
    include: [
        './**/*',
    ],
    ...
}),

I write the same thing in tsconfig.json

{
    include: [
        './**/*',
    ],
    "compilerOptions": {
        ...

The project still doesn't build - displaying Error: Unexpected token for JSX syntax.

Questions

• Where am I wrong?
• Why for @rollup/plugin-typescript I have to include ./**/* right from the root, and block some files with include section? Why can't I simply write src/js/**/* ?
• Why include works only for @rollup/plugin-typescript? And I can't write that include in tsconfig.json?

question from:https://stackoverflow.com/questions/65871497/confusing-behavior-when-wiring-together-rollup-es-modules-typescript-and-jsx

Answer 1

Waitting for answers