Babel transpiler always fails

[mdvorscak]

First of all, thanks for writing this library! It is very useful for generating typings, especially with multiple entry points. I am however running into an issue when trying to use babel as a transpiler, I always get the same error message:

Error: [BABEL] unknown: Configuration contains string/RegExp pattern, but no filename was passed to Babel
with the stack trace:

Error: [BABEL] unknown: Configuration contains string/RegExp pattern, but no filename was passed to Babel
    at matchPattern (C:\Project\node_modules\@babel\core\lib\config\config-chain.js:587:11)
    at patterns.some.pattern (C:\Project\node_modules\@babel\core\lib\config\config-chain.js:572:5)
    at Array.some (<anonymous>)
    at matchesPatterns (C:\Project\node_modules\@babel\core\lib\config\config-chain.js:571:19)
    at configFieldIsApplicable (C:\Project\node_modules\@babel\core\lib\config\config-chain.js:543:10)
    at configIsApplicable (C:\Project\node_modules\@babel\core\lib\config\config-chain.js:533:7)
    at forEach (C:\Project\node_modules\@babel\core\lib\config\config-chain.js:387:13)
    at Array.forEach (<anonymous>)
    at C:\Project\node_modules\@babel\core\lib\config\config-chain.js:384:42
    at buildPresetChain (C:\Project\node_modules\@babel\core\lib\config\config-chain.js:48:17)

I've seen this issue when trying with multiple rollup entry points as well as a single entry point. Everything seems to work fairly well when I remove babel but I am missing some transforms.

The config that has the issue is just the basic one from the README:

ts({
	transpiler: "babel"
})

P.S. Not sure if it's related to the babel transform missing but when I have a file that contains only a re-export like this:
export { default } from "./Button";
the typings generated for it are blank. Is this normal or should I open a separate issue for it?

[wessberg]

Hi there. Thanks for submitting this issue!

(1) Interesting. When all you provide is simply transpiler: "babel", rollup-plugin-ts will attempt to locate the nearest babel config from your project root. It may be a .babelrc file, it may be a babel.config.js file, or it may come from your package.json file. It would seem that it has found a config, but apparently it doesn't like its contents. Could you maybe paste the contents of your babel config so I can take a closer look?

(2) The issue you are experiencing sounds like it is related to #10. If you export something from a module which in turn also exports something from another one, declarations won't be emitted. If that's what's going on here, then that will be covered by the linked issue, but if not, then yes, a separate issue will be better :-)

[mdvorscak]

Hey, thanks for the quick response!

Here is my babel.config.js (which is in the root directory of the project):

module.exports = api => {
  var isEnvDevelopment = api.env() === "development";
  var isEnvProduction = api.env() === "production";
  var isEnvTest = api.env() === "test";
  console.log("api", api.env()); // development
  return {
    presets: [
      isEnvTest && ["@babel/env", { targets: "node 10" }],
      (isEnvProduction || isEnvDevelopment) && "@babel/env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ].filter(Boolean),
    plugins: [
      ["@babel/plugin-proposal-class-properties", { loose: true }],
      ["@babel/plugin-proposal-object-rest-spread", { loose: true }],
      "@babel/plugin-transform-object-assign",
      "@babel/plugin-transform-runtime"
    ]
  };
};

I added a trace to the first function in the babel stack buildPresetChain and the last trace before the error gave me:

    at buildPresetChain (C:\Project\node_modules\@babel\core\lib\config\config-chain.js:47:11)
    at loadPresetDescriptor (C:\Project\node_modules\@babel\core\lib\config\full.js:235:44)
    at config.presets.reduce (C:\Project\node_modules\@babel\core\lib\config\full.js:77:21)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (C:\Project\node_modules\@babel\core\lib\config\full.js:74:38)
    at loadFullConfig (C:\Project\node_modules\@babel\core\lib\config\full.js:108:6)
    at Object.loadOptions (C:\Project\node_modules\@babel\core\lib\config\index.js:27:36)
    at getBabelConfig (C:\Project\node_modules\@wessberg\rollup-plugin-ts\dist\cjs\index.js:3782:18)
    at Object.options (C:\Project\node_modules\@wessberg\rollup-plugin-ts\dist\cjs\index.js:5332:35)
    at applyOptionHook (C:\Project\node_modules\rollup\dist\rollup.js:18404:31)

So, it seems like the issue has to do with the options passed to the function loadOptions (coming from @babel/core), since this is the last call coming from this library. I added a log statement to just before the call to loadOptions (here:

rollup-plugin-ts/src/util/get-babel-config/get-babel-config.ts

Line 135 in 74cae26

config: loadOptions(combined),

) and this was the result:

options { cwd: 'C:\\Project',
  root: 'C:\\Project',
  babelrc: false,
  configFile: false,
  passPerPreset: false,
  envName: 'development',
  filename: undefined,
  plugins:
   [ ConfigItem {
       value: [Function],
       options: [Object],
       dirname: 'C:\\Project',
       name: undefined,
       file: [Object] },
     ConfigItem {
       value: [Function],
       options: [Object],
       dirname: 'C:\\Project',
       name: undefined,
       file: [Object] },
     ConfigItem {
       value: [Function],
       options: undefined,
       dirname: 'C:\\Project',
       name: undefined,
       file: [Object] },
     ConfigItem {
       value: [Function],
       options: undefined,
       dirname: 'C:\\Project',
       name: undefined,
       file: [Object] } ],
  presets:
   [ ConfigItem {
       value: [Function],
       options: undefined,
       dirname: 'C:\\Project',
       name: undefined,
       file: [Object] },
     ConfigItem {
       value: [Function],
       options: undefined,
       dirname: 'C:\\Project',
       name: undefined,
       file: [Object] },
     ConfigItem {
       value: [Function],
       options: undefined,
       dirname: 'C:\\Project',
       name: undefined,
       file: [Object] } ] }

And for the second point, it sounds like might be the same issue, the two files in question are:

// Button/Button.tsx
import React from "react";
import classNames from "classnames";
import MuiButton from "@material-ui/core/Button";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import { Theme } from "@material-ui/core/styles/createMuiTheme";

import { MUI_COLOR } from "../../constants";
import { Color } from "../../constants/interfaces";
import createStyles from "@material-ui/core/styles/createStyles";
import { PropTypes } from "@material-ui/core";

declare module "@material-ui/core/styles/createPalette" {
  interface Palette {
    success: PaletteColor;
  }

  interface PaletteOptions {
    success?: SimplePaletteColorOptions;
  }
}

export const styles = (theme: Theme) =>
  createStyles({
    success: {
      backgroundColor: theme.palette.success.light,

      "&:hover": {
        backgroundColor: theme.palette.success.main
      },

      "&:focus": {
        backgroundColor: theme.palette.success.main
      },

      "&:active": {
        borderColor: "transparent",
        backgroundColor: theme.palette.success.dark
      }
    }
  });

interface ButtonProps extends WithStyles<typeof styles> {
  disabled?: boolean;
  className?: string;
  color: Color;
  variant?: "text" | "outlined" | "contained";
}

const Button: React.FunctionComponent<ButtonProps> = ({
  color,
  classes,
  disabled,
  children,
  className,
  ...props
}) => {
  const muiColor = (MUI_COLOR.includes(color)
    ? color
    : "default") as PropTypes.Color;

  return (
    <MuiButton
      color={muiColor}
      variant="contained"
      disabled={disabled}
      className={classNames(className, {
        [classes.success]: color === "success"
      })}
      {...props}
    >
      {children}
    </MuiButton>
  );
};

export default withStyles(styles)(Button);

and

// Button/index.ts (which is missing the type definitions). 
// It may also be useful to know that this file is one of the rollup entry points
export { default } from "./Button";

[wessberg]

I've investigated (1) and released a fix this evening! It has been published on NPM as v1.1.42. Your babel config should work just fine from now on :-)

Now, for (2):

Without multiple entry points, I just tested with a simple file structure such as the following:

// index.ts is the entry
export { default } from "./Button";

// ./Button.ts
export default class Button {}

The generated type declarations looks like the following:

// Generated declarations
class Button {
}
export { Button as default };

So under those circumstances, it looks just fine. As far as I can tell, the issue you are experiencing is related to the interoperability between rollup-plugin-multi-entry and rollup-plugin-ts. I'll look into it and get back to you.

[wessberg]

I've fixed (2) in commit: 5c9c244 and published a new version on NPM (v1.1.43). Every input path when using the rollup-plugin-multi-entry plugin will now be correctly treated as an entry module when generating declarations. Please test this out and see if it works for you. If it does, I'll go ahead and close this issue. Otherwise, feel free to get back to me.

[mdvorscak]

I can confirm that babel is now working as expected, thanks for the quick turn around on it. I still have issues with multiple entries (I'm not using the plugin but rather multiple inputs from Rollup itself). This is my rollup.config.js:

import del from "rollup-plugin-delete";
import ts from "@wessberg/rollup-plugin-ts";

export default [
  {
    input: {
      index: "src/index.ts",
      Button: "src/atoms/Button/index.ts"
    },
    output: [
      {
        dir: "dist/cjs",
        format: "cjs",
        sourcemap: true
      },
      {
        dir: "dist/esm",
        format: "esm",
        sourcemap: true
      }
    ],
    external: ["react", "react-dom"],
    plugins: [
      del({ targets: ["dist/*"] }),
      ts({
        transpiler: "babel"
      })
    ]
  }
];

But I think since the issues are unrelated I should close this one and open a new one.