Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
MarkLyck opened this issue May 20, 2020 · 4 comments · Fixed by #623
Closed

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

MarkLyck opened this issue May 20, 2020 · 4 comments · Fixed by #623

Comments

@MarkLyck
Copy link

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

microbundle/src/index.js

Line 556 in 2c32109

jsx: options.jsx || 'h',

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 marvinhagemeister mentioned this issue May 20, 2020
Merged
@marvinhagemeister
Copy link
Collaborator 

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 🤷

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
Copy link
Author

MarkLyck commented May 20, 2020 •
edited
Loading

@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
Copy link
Collaborator

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

@MarkLyck
Copy link
Author

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

#623

JLarky added a commit to fogbender/fogbender-oss that referenced this issue Aug 11, 2022
@JLarky
adding solid to pacakges/fogbender messing up with jsx in react apps
70ccf3a 
- because microbundle-crl was hard coded for react there was no such problem before
- for some reason it will try to use solid jsx in those react projects unless you provide this flag
- there's probably a way to configure babel or rollup to use react other ways, but this works, so I'm going with this
- developit/microbundle#763 (comment)
- developit/microbundle#622
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

TS: Fix Fragments broken when jsxFactory is set developit/microbundle
2 participants
@marvinhagemeister @MarkLyck