question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Specify JSX Runtime?

See original GitHub issue

Thanks for creating this! I had issues with vite and generating .d.ts files, but tsup has been working great!

The only thing I noticed with my React library are these errors:

ReferenceError: React is not defined

Adding import * as React from 'react'; at the top of each file fixes it.

But based on https://github.com/developit/microbundle/issues/763#issuecomment-877388109, I was wondering if it’d be possible to do something similar like:

tsup --jsx 'React.createElement' --jsxImportSource react --globals react/jsx-runtime=jsx

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:4
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

8reactions
egoistcommented, Oct 4, 2021

Now in v5.3.0 you can use the --inject flag or the inject option to achieve this:

tsup --inject ./react-import.js
// react-import.js
import React from 'react'

export { React }

or for preact:

import { h, Fragment } from 'preact'

export { h, Fragment }

But ideally, in the future, we should read jsxImportSource from tsconfig.json and automatically do this for you.

5reactions
darklight9811commented, Oct 4, 2021

@egoist the documentation is missing a lot of important information, things that I discovered reading the source code. It also doesn’t say anything about inject

Read more comments on GitHub >

github_iconTop Results From Across the Web

Introducing the New JSX Transform – React Blog
Flow supports the new JSX transform in v0.126.0 and up, by adding react.runtime=automatic to your Flow configuration options. Removing Unused ...
Read more >
babel/plugin-transform-react-jsx
Automatic runtime is a feature added in v7.9.0 . With this runtime enabled, the functions that JSX compiles to will be imported automatically....
Read more >
TSConfig Option: jsxImportSource - TypeScript
Declares the module specifier to be used for importing the jsx and jsxs factory functions when using jsx as "react-jsx" or "react-jsxdev" which...
Read more >
How to enable new JSX transform in React?
Yes! You'll no longer need to import React to each. and. every. component. you write. Instead, it will be imported automatically!
Read more >
Implementing a runtime version of JSX – The Guild
Today we're going to understand how a JSX parser thinks by implementing one of our own. Unlike Babel, rather than compiling, we're going...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found