CODEWITHSUNDEEP
javascriptnode.jsreactjstypescriptrollupjs
Ser5
Ser5

Reputation: 349

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

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

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

Upvotes: 1

Views: 1439

Answers (1)

NickHTTPS
NickHTTPS

Reputation: 799

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! :)

Upvotes: 1

Related Questions