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

user_982746 0
Viewed 633

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:

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)
src\js\main.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?
rollupjs typescript reactjs node.js javascript
1 Answers

Will try to give you some hints:

  • outDir option says where the JavaScript files will be generated
  • @rollup/plugin-typescript will load any compilerOptions from the tsconfig.json file by default. So if you are passing any option to that (like you did in your repo) it will override those ones that you set in tsconfig.json. Might be better to decide where to config stuff for TS
  • Specifically for your error. See docs here.

You have to do this basically:

import jsx from 'acorn-jsx';
import typescript from '@rollup/plugin-typescript';

export default {
  // … other options …
  acornInjectPlugins: [jsx()],
  plugins: [typescript({ jsx: 'preserve' })]
};

Check Vite out by the way if you want to avoid all this config shenanigans! :)

user_11674720
Related