Skip to content

React with Storybook preset does not build without adjustments to tsconfig.json #212

@SirSKillz

Description

@SirSKillz

Current Behavior

Creating a new project with npx dts-cli create test3, choosing the react-with-storybook preset and then running npm run build will give you this error:

(typescript) RollupError: src/index.tsx:1:8 - error TS1259: Module '"C:/Users/_/repos/test3/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import React, { FC, HTMLAttributes, ReactChild } from 'react';
         ~~~~~

  node_modules/@types/react/index.d.ts:47:1
    47 export = React;
       ~~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.


    at error (C:\Users\_\repos\test3\node_modules\rollup\dist\shared\rollup.js:353:30)
    at Object.error (C:\Users\_\repos\test3\node_modules\rollup\dist\shared\rollup.js:1721:20)
    at RollupContext.error (C:\Users\_\repos\test3\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:1452:26)
    at C:\Users\_\repos\test3\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:27634:26
    at Array.forEach (<anonymous>)
    at printDiagnostics (C:\Users\_\repos\test3\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:27610:17)
    at typecheckFile (C:\Users\_\repos\test3\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:27966:9)
    at Object.<anonymous> (C:\Users\_\repos\test3\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:28103:21)
    at Generator.next (<anonymous>)
    at C:\Users\_\repos\test3\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:63:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\_\repos\test3\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:59:12)
    at Object.transform (C:\Users\_\repos\test3\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:28084:20)
    at C:\Users\_\repos\test3\node_modules\rollup\dist\shared\rollup.js:1914:40

Expected behavior

A new project should build correctly without errors

Suggested solution(s)

As the error hints towards, add "allowSyntheticDefaultImports": true in the tsconfig.json file

Additional context

None

Your environment

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 18.75 GB / 31.91 GB
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 121.0.6167.187
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    dts-cli: ^2.0.4 => 2.0.4
    typescript: ^5.3.3 => 5.3.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions