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.

`@types/react` type error with Babel + React 17 JSX -- use rpt2 first

See original GitHub issue

What happens and why it is wrong

Having an issue trying to bundle a Typescript React library using Typescript 4.1.3 and the new JSX transform via babel.

Here’s a link to a repo reproducing the issue: https://github.com/jksaunders/rollup-plugin-typescript2-jsx-runtime-bug

Steps:

npm install
npm run build

The error:

[!] (plugin rpt2) Error: [...]/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/Button.tsx(1,10): semantic error TS2305: Module '"../../../node_modules/@types/react/jsx-runtime"' has no exported member 'jsx'.

So it’s having trouble with @types/react. Interestingly, uninstalling @types/react allows the build to go through. (npm uninstall @types/react then npm run build to reproduce this behaviour.)

I had the same issue with the actual React library (before installing @types/react), then applied the @rollup/plugin-node-resolve as shown in rollup.config.js lines 20-22. I tried to do the same with @types/react but it didn’t change the result.

I have an application project building with the JSX transform, Typescript and React (with @types/react) successfully, so I don’t believe it’s an issue with @types/react.

Environment

Mac Node: 12.12.0

Versions

  npmPackages:
    rollup: ^2.35.1 => 2.35.1 
    rollup-plugin-typescript2: ^0.29.0 => 0.29.0 
    typescript: ^4.1.3 => 4.1.3

rollup.config.js

`rollup.config.js`:

import typescript from 'rollup-plugin-typescript2';
import { DEFAULT_EXTENSIONS } from '@babel/core';
import pkg from './package.json';
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

const input = 'src/index.ts';
const external = [
  ...Object.keys(pkg.dependencies || {}),
  ...Object.keys(pkg.peerDependencies || {}),
  /@babel\/runtime/,
  /@babel\/plugin-transform-runtime/,
];

const plugins = [
  babel({
    babelHelpers: 'runtime',
    extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],
  }),
  resolve({
    resolveOnly: [/^(?!react$)/],
  }),
  typescript({
    typescript: require('typescript'),
  }),
];

export default [
  {
    input,
    output: {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
    },
    plugins,
    external,
  },
  {
    input,
    output: {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    plugins,
    external,
  },
];

tsconfig.json

`tsconfig.json`:

{
  "compilerOptions": {
    "declaration": true,
    "target": "es5",
    "strictNullChecks": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "lib": ["es6", "dom"],
    "module": "ES2015",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["./src"],
  "exclude": ["node_modules", "dist"]
}

package.json

`package.json`:

{
  "name": "rollup-plugin-typescript2-jsx-runtime-bug",
  "version": "1.10.0",
  "description": "",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "build": "rollup -c"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jksaunders/rollup-plugin-typescript2-jsx-runtime-bug.git"
  },
  "author": "Joshua Saunders <jk.saunders@hotmail.com>",
  "license": "ISC",
  "dependencies": {
    "@babel/runtime": "^7.12.5"
  },
  "peerDependencies": {
    "react": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
    "@babel/plugin-transform-regenerator": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@rollup/plugin-babel": "^5.2.2",
    "@rollup/plugin-node-resolve": "^11.0.1",
    "@types/react": "^17.0.0",
    "@typescript-eslint/parser": "^4.10.0",
    "babel-loader": "^8.2.2",
    "react": "^17.0.1",
    "rollup": "^2.35.1",
    "rollup-plugin-typescript2": "^0.29.0",
    "typescript": "^4.1.3"
  }
}

plugin output with verbosity 3

plugin output with verbosity 3:

$ npm run build

> rollup-plugin-typescript2-jsx-runtime-bug@1.10.0 build rollup-plugin-typescript2-jsx-runtime-bug
> rollup -c


src/index.ts → dist/index.esm.js...
rpt2: built-in options overrides: {
    "noEmitHelpers": false,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "inlineSourceMap": false,
    "outDir": "rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/placeholder",
    "moduleResolution": 2,
    "allowNonTsExtensions": true
}
rpt2: parsed tsconfig: {
    "options": {
        "declaration": true,
        "target": 1,
        "strictNullChecks": true,
        "noEmit": false,
        "jsx": 4,
        "lib": [
            "lib.es2015.d.ts",
            "lib.dom.d.ts"
        ],
        "module": 5,
        "moduleResolution": 2,
        "allowSyntheticDefaultImports": true,
        "configFilePath": "rollup-plugin-typescript2-jsx-runtime-bug/tsconfig.json",
        "noEmitHelpers": false,
        "importHelpers": true,
        "noResolve": false,
        "inlineSourceMap": false,
        "outDir": "rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/placeholder",
        "allowNonTsExtensions": true
    },
    "fileNames": [
        "<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/index.ts",
        "<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/index.ts",
        "<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/Button.tsx",
        "<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/index.ts"
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "compilerOptions": {
            "declaration": true,
            "target": "es5",
            "strictNullChecks": true,
            "noEmit": true,
            "jsx": "react-jsx",
            "lib": [
                "es6",
                "dom"
            ],
            "module": "ES2015",
            "moduleResolution": "node",
            "allowSyntheticDefaultImports": true
        },
        "include": [
            "./src"
        ],
        "exclude": [
            "node_modules",
            "dist"
        ],
        "compileOnSave": false
    },
    "errors": [],
    "wildcardDirectories": {
        "<root>/rollup-plugin-typescript2-jsx-runtime-bug/src": 1
    },
    "compileOnSave": false,
    "configFileSpecs": {
        "includeSpecs": [
            "./src"
        ],
        "excludeSpecs": [
            "node_modules",
            "dist"
        ],
        "validatedIncludeSpecs": [
            "./src"
        ],
        "validatedExcludeSpecs": [
            "node_modules",
            "dist"
        ],
        "wildcardDirectories": {
            "<root>/rollup-plugin-typescript2-jsx-runtime-bug/src": 1
        }
    }
}
rpt2: typescript version: 4.1.3
rpt2: tslib version: 2.0.1
rpt2: rollup version: 2.35.1
rpt2: rollup-plugin-typescript2 version: 0.29.0
rpt2: plugin options:
{
    "typescript": "version 4.1.3",
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "useTsconfigDeclarationDir": false,
    "tsconfigOverride": {},
    "transformers": [],
    "tsconfigDefaults": {},
    "objectHashIgnoreUnknownHack": false,
    "cwd": "<root>/rollup-plugin-typescript2-jsx-runtime-bug"
}
rpt2: rollup config:
{
    "external": [
        "@babel/runtime",
        "react",
        {},
        {}
    ],
    "input": "src/index.ts",
    "plugins": [
        {
            "name": "babel"
        },
        {
            "name": "node-resolve"
        },
        {
            "name": "rpt2"
        },
        {
            "name": "stdin"
        }
    ],
    "output": [
        {
            "file": "dist/index.esm.js",
            "format": "esm",
            "plugins": [],
            "sourcemap": true
        }
    ]
}
rpt2: tsconfig path: <root>/rollup-plugin-typescript2-jsx-runtime-bug/tsconfig.json
rpt2: included:
[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]
rpt2: excluded:
[
    "*.d.ts",
    "**/*.d.ts"
]
rpt2: Ambient types:
rpt2:     <root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/@types/estree/index.d.ts
rpt2:     <root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/@types/json-schema/index.d.ts
rpt2:     <root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/@types/node/index.d.ts
rpt2:     <root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/@types/prop-types/index.d.ts
rpt2:     <root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/@types/react/index.d.ts
rpt2:     <root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/@types/resolve/index.d.ts
rpt2: ambient types changed, redoing all semantic diagnostics
rpt2: transpiling '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/index.ts'
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/code/cache/e5a8acfdc544c2e0173f11d7f24f5830fca8f86d'
rpt2:     cache hit
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/syntacticDiagnostics/cache/e5a8acfdc544c2e0173f11d7f24f5830fca8f86d'
rpt2:     cache hit
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/semanticDiagnostics/cache/e5a8acfdc544c2e0173f11d7f24f5830fca8f86d'
rpt2:     cache hit
rpt2: generated declarations for '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/index.ts'
rpt2: dependency '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/index.ts'
rpt2:     imported by '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/index.ts'
rpt2: resolving './components' imported by '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/index.ts'
rpt2:     to '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/index.ts'
rpt2: transpiling '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/index.ts'
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/code/cache/5fecb52676bbba87cdbf82716154d836c733d9a1'
rpt2:     cache hit
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/syntacticDiagnostics/cache/5fecb52676bbba87cdbf82716154d836c733d9a1'
rpt2:     cache miss
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/semanticDiagnostics/cache/5fecb52676bbba87cdbf82716154d836c733d9a1'
rpt2:     cache miss
rpt2: generated declarations for '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/index.ts'
rpt2: dependency '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/index.ts'
rpt2:     imported by '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/index.ts'
rpt2: resolving './Button' imported by '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/index.ts'
rpt2:     to '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/index.ts'
rpt2: transpiling '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/index.ts'
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/code/cache/00dfcb2a9724d31edd4f343ff0757ebf990ff058'
rpt2:     cache hit
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/syntacticDiagnostics/cache/00dfcb2a9724d31edd4f343ff0757ebf990ff058'
rpt2:     cache miss
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/semanticDiagnostics/cache/00dfcb2a9724d31edd4f343ff0757ebf990ff058'
rpt2:     cache miss
rpt2: generated declarations for '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/index.ts'
rpt2: dependency '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/Button.tsx'
rpt2:     imported by '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/index.ts'
rpt2: resolving './Button' imported by '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/index.ts'
rpt2:     to '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/Button.tsx'
rpt2: transpiling '<root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/Button.tsx'
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/code/cache/3b5efc87915a1323ff283046aec45cf90781bdc0'
rpt2:     cache hit
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/syntacticDiagnostics/cache/3b5efc87915a1323ff283046aec45cf90781bdc0'
rpt2:     cache miss
rpt2:     cache: '<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/.cache/rollup-plugin-typescript2/rpt2_b14a1a1f9603aaf9d7519972002c347b09060899/semanticDiagnostics/cache/3b5efc87915a1323ff283046aec45cf90781bdc0'
rpt2:     cache miss
[!] (plugin rpt2) Error: <root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/Button.tsx(1,10): semantic error TS2305: Module '"../../../node_modules/@types/react/jsx-runtime"' has no exported member 'jsx'.
src/components/Button/Button.tsx
Error: <root>/rollup-plugin-typescript2-jsx-runtime-bug/src/components/Button/Button.tsx(1,10): semantic error TS2305: Module '"../../../node_modules/@types/react/jsx-runtime"' has no exported member 'jsx'.
    at error (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at throwPluginError (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup/dist/shared/rollup.js:17956:12)
    at Object.error (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup/dist/shared/rollup.js:18563:24)
    at Object.error (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup/dist/shared/rollup.js:18125:38)
    at RollupContext.error (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17237:30)
    at <root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:25033:23
    at arrayEach (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:545:11)
    at Function.forEach (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9397:14)
    at printDiagnostics (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:25006:12)
    at Object.transform (<root>/rollup-plugin-typescript2-jsx-runtime-bug/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:29275:17)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rollup-plugin-typescript2-jsx-runtime-bug@1.10.0 build: `rollup -c`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the rollup-plugin-typescript2-jsx-runtime-bug@1.10.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/joshuasaunders/.npm/_logs/2020-12-19T22_14_52_412Z-debug.log
Joshuas-MacBook-Pro:rollup-plugin-typescript2-jsx-runtime-bug joshuasaunders$

Might be related to https://github.com/ezolenko/rollup-plugin-typescript2/issues/255 (though they haven’t included many details there)

Issue Analytics

State:
Created 3 years ago
Reactions:9
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

ezolenkocommented, Apr 23, 2022

Something weird with your babel config there. Build works when I change plugins to

import commonjs from "@rollup/plugin-commonjs";

const plugins = [
 /* babel({
    babelHelpers: 'runtime',
    extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],
  }),*/
  commonjs(),
  resolve(),
  typescript(),
];

0reactions

agilgur5commented, May 15, 2022

So this works properly with an appropriate plugin order.

No Babel config was provided by OP, but can probably assume based on the order that Babel is compiling the TS, not rpt2. rpt2 may then be reading what Babel outputs, and finding a type error in that.

Based on that, I imagine the issue here may be with the Babel config, specifically if it had specified the new option in preset-react: runtime: "automatic". The default is classic if it’s not specifically set (see also this SO answer for code samples). So if that was not set in Babel config but the tsconfig (which was provided) has the newer react-jsx provided, this may result in a mismatch and potentially an error as such.

Closing this out as this never received response from OP (stale) and the plugin order (and other config) seem problematic and likely are the root cause here, and things like Babel config are out-of-scope for this plugin. Will leave unlocked for now in case users may still want to work with each other to fix (likely out-of-scope) misconfigurations.