Microbundle: (rpt2 plugin) semantic error TS2304: Cannot find name 'h'.

[MarkLyck]

This is related to #608 but the solution does not work for me and the core issue was never solved.

My build was working on 0.1.11
My build fails on 0.1.12

cli command: yarn microbundle

Error:

yarn run v1.17.3
$ microbundle
(rpt2 plugin) Error: /Users/marklyck/colony/colony-app/src/Admin/index.tsx(58,6): semantic error TS2304: Cannot find name 'h'.
Error: /Users/marklyck/colony/colony-app/src/Admin/index.tsx(58,6): semantic error TS2304: Cannot find name 'h'.
    at error (/Users/marklyck/colony/colony-app/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/Users/marklyck/colony/colony-app/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/Users/marklyck/colony/colony-app/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at Object.error (/Users/marklyck/colony/colony-app/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    at RollupContext.error (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17194:30)
    at /Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24958:23
    at arrayEach (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:534:11)
    at forEach (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
    at printDiagnostics (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24931:5)
    at Object.transform (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:27374:17)

this happens on the first line of JSX I have in my .tsx file.

looking into this h it seems to be an alias for jsx

https://github.com/developit/microbundle/blob/2c32109528c6b4d370afe44e20d0c09e2b18c3d9/src/index.js#L556

The suggested solution in the other ticket was adding --jsx to the command.

microbundle -f es,cjs --jsx React.createElement.

However this did not solve the problem for me it seems.

When running the above command I get the following error instead:

yarn run v1.17.3
$ /Users/marklyck/colony/colony-app/node_modules/.bin/microbundle -f es,cjs --jsx React.createElement
(rpt2 plugin) Error: /Users/marklyck/colony/colony-app/src/Admin/Providers.tsx(15,3): semantic error TS17016: JSX fragment is not supported when using --jsxFactory
Error: /Users/marklyck/colony/colony-app/src/Admin/Providers.tsx(15,3): semantic error TS17016: JSX fragment is not supported when using --jsxFactory
    at error (/Users/marklyck/colony/colony-app/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/Users/marklyck/colony/colony-app/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/Users/marklyck/colony/colony-app/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at Object.error (/Users/marklyck/colony/colony-app/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    at RollupContext.error (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17194:30)
    at /Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24958:23
    at arrayEach (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:534:11)
    at forEach (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
    at printDiagnostics (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24931:5)
    at Object.transform (/Users/marklyck/colony/colony-app/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:27374:17)

either way forcing the --jsx doesn't seem to be a solution, but rather a workaround.

I don't believe microbundle is meant to require this?

Here is my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "esNext",
    "strictNullChecks": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "target": "es2019",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "types": ["react", "jest", "node"],
    "baseUrl": ".",
    "paths": {
      "~*": ["./src/*"],
      "common/*": ["src/common/*"],
      "tests/*": ["tests/*"]
    }
  },
  "include": ["src/**/*", "src/typings.d.ts", "@types"],
  "exclude": ["./node_modules", "dist"]
}

and my .babelrc

module.exports = {
  presets: ["@babel/preset-react", "@babel/preset-typescript"],
  plugins: [
    "styled-components",
    "@babel/plugin-syntax-export-default-from",
    [
      "module-resolver",
      {
        root: ["."],
        alias: {
          "~": "./src/",
          common: "./src/common",
          Admin: "./src/Admin",
          tests: "./tests",
        },
      },
    ],
  ],
};

[marvinhagemeister]

semantic error TS17016: JSX fragment is not supported when using --jsxFactory

Looks like TypeScript doesn't actually compare the value of jsxFactory and only checks if it is undefined or not. The default value listed in their docs is React.createElement. If you leave it blank it works, but if you set it to the same value as the default, it breaks :shrug:

either way forcing the --jsx doesn't seem to be a solution, but rather a workaround.

microbundle was born out of the build pipeline of the Preact framework. There the default is to transpile jsx to h. We (mainly @developit) put effort into turning our build pipeline into a reusable cli tool, because people were asking for it as it's uniquely focused on aggressively cutting down size. Because of that heritage the default is h.

Changing that to React.createElement would break all existing packages in the Preact ecosystem where microbundle is used.

[MarkLyck]

@marvinhagemeister thanks for the quick reply!

If I don't specify --jsx React.createElement

and just run yarn microbundle --jsx I get the error:

rpt2: config error TS5024: Compiler option 'jsxFactory' requires a value of type string.

What's the correct way to do it with React?

EDIT: Did not mean to Close this 🤦

[marvinhagemeister]

@MarkLyck You were already correct in your first approach to use --jsx React.createElement :+1: The --jsx flag always expects an argument.

[MarkLyck]

@marvinhagemeister ahh okay, so just waiting for this PR you made to make it into a release to fix the Fragment issue?

https://github.com/developit/microbundle/pull/623