.tsx files cause failed to transpile error on build

[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).

[wardpeet]

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.

[crobinson42]

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...

[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.

[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.

[developit]

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