Skip to content

.tsx files cause failed to transpile error on build #715

Closed

Description

@crobinson42

Fresh project, microbundle 0.12.3.

My package.json source prop points to index.ts which imports index.tsx then causes this:

(rpt2 plugin) Error: failed to transpile '/Users/coryrobinson/projects/sscs/sscs-app-layout/src/index.tsx'
Error: failed to transpile '/Users/coryrobinson/projects/sscs/sscs-app-layout/src/index.tsx'
    at error (/Users/coryrobinson/projects/sscs/sscs-app-layout/node_modules/rollup/dist/shared/node-entry.js:5400:30)

If I remove the import import './index.tsx'; the build works (but is empty).

Activity

  1. wardpeet commented on Sep 2, 2020

    @wardpeet
    Collaborator

    Hi @crobinson42!

    Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

    If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

  2. crobinson42 commented on Sep 3, 2020

    @crobinson42
    Author

    sscs-app-layout.zip

    This is a POC I started to work on so ignore the code stuff but you'll see src/index.ts that imports src/index.tsx and if you comment out the import for index.tsx and run npm run build it will work...

  3. krobing commented on Oct 13, 2020

    @krobing

    I have the same issue and I realize that it's happening cause the rollup bundler and rollup-plugin-typescript2 plugin what generate the below terminal output if the exported files have the .tsx extensions format, but it doesn't happen whether it's not. Nonetheless, this does not always happen:

    Note: when I compile again on terminal the ouput issue can be reference another component path

    [dev:bundle] (rpt2 plugin) Error: failed to transpile '/home/krobing/Documentos/Projects/metrocuadrado-front-components/src/components/inc/Form/InputMask.tsx'
    [dev:bundle] Error: failed to transpile '/home/krobing/Documentos/Projects/metrocuadrado-front-components/src/components/inc/Form/InputMask.tsx'
    [dev:bundle]     at error (/home/krobing/Documentos/Projects/metrocuadrado-front-components/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    [dev:bundle]     at throwPluginError (/home/krobing/Documentos/Projects/metrocuadrado-front-components/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    [dev:bundle]     at Object.error (/home/krobing/Documentos/Projects/metrocuadrado-front-components/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    [dev:bundle]     at Object.error (/home/krobing/Documentos/Projects/metrocuadrado-front-components/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    [dev:bundle]     at cache.getCompiled (/home/krobing/Documentos/Projects/metrocuadrado-front-components/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:27361:30)
    [dev:bundle]     at TsCache.getCompiled (/home/krobing/Documentos/Projects/metrocuadrado-front-components/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24834:33)
    [dev:bundle]     at Object.transform (/home/krobing/Documentos/Projects/metrocuadrado-front-components/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:27347:36)
    [dev:bundle]     at Promise.resolve.then (/home/krobing/Documentos/Projects/metrocuadrado-front-components/node_modules/rollup/dist/shared/node-entry.js:13117:25)

    and my exports.ts entry point file looks like this:
    Note: the import and export paths are .tsx extensions to React components

    // include export for each type signatures definition
    export * from './typings/global'
    // export * from './typings/decorators'
    export * from './typings/selectors'
    export * from './typings/paginator'
    
    // export components
    // -----------------
    export { default as Layout } from './components/Layout'
    export * from './components/Layout'
    export { default as Button } from './components/inc/Button'
    export * from './components/inc/Button'
    export { default as LinkButton } from './components/inc/Button/LinkButton'
    export * from './components/inc/Button/LinkButton'
    export { default as Badge } from './components/inc/Badge'
    export * from './components/inc/Badge'
    export { default as Img } from './components/inc/Img'
    export * from './components/inc/Img'
    export { default as Alert } from './components/inc/Alert'
    // export * from './components/inc/Alert'
    // dropdown
    export { default as Dropdown } from './components/inc/Dropdown'
    export * from './components/inc/Dropdown'
    export { default as NavDropdown } from './components/inc/Dropdown/NavDropdown'
    export * from './components/inc/Dropdown/NavDropdown'
    // cards, boxes & panels
    export { default as Panel } from './components/inc/Panel'
    export * from './components/inc/Panel'
    export { default as CardImg } from './components/inc/Cards/CardImg'
    export * from './components/inc/Cards/CardImg'
    // form & fields
    export { default as AddOrRemove } from './components/inc/Form/AddOrRemove'
    export * from './components/inc/Form/AddOrRemove'
    export { default as AddField } from './components/inc/Form/AddField'
    export * from './components/inc/Form/AddField'
    export { default as Checkbox } from './components/inc/Checks/Checkbox'
    export * from './components/inc/Checks/Checkbox'
    export { default as CheckButton } from './components/inc/Checks/CheckButton'
    export * from './components/inc/Checks/CheckButton'
    export { default as RadioBox } from './components/inc/Checks/RadioBox'
    export * from './components/inc/Checks/RadioBox'
    export { default as CheckOption } from './components/inc/Form/CheckOption'
    export * from './components/inc/Form/CheckOption'
    export { default as Select } from './components/inc/Form/Select'
    export * from './components/inc/Form/Select'
    // export { default as Autocomplete } from './components/inc/Form/Autocomplete'
    export { default as InputMask } from './components/inc/Form/InputMask'
    export * from './components/inc/Form/InputMask'
    export { default as TextField } from './components/inc/Form/TextField'
    export * from './components/inc/Form/TextField'
    export { default as InputGroup } from './components/inc/Form/InputGroup'
    export * from './components/inc/Form/InputGroup'
    export { default as Form } from './components/inc/Form'
    export * from './components/inc/Form'
    // and keep going down...

    the input & ouput config's members from package.json looks like this:

    {
     ...
      "source": "src/export.ts",
      "main": "dist/metrocuadrado-ui.js",
      "umd:main": "dist/metrocuadrado-ui.umd.js",
      "module": "dist/metrocuadrado-ui.esm.js",
      "esmodule": "dist/metrocuadrado-ui.modern.js",
      "typings": "types/index.d.ts",
     ...
    }

    However, another example where I compile an entrypoint file named utils.ts what only exports .ts extensions since this just exports utilities/helpers functions, the above mentioned does not happen.

  4. krobing commented on Oct 13, 2020

    @krobing

    Apparently it's due to a cache issue at the entry file, but I'm not entirely sure or I don't know how to solve it.

  5. developit commented on Dec 18, 2020

    @developit
    Owner

    This is very likely fixed by #738, which will be released shortly. Please re-open if it's still an issue then.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions