CODEWITHSUNDEEP
typescriptbabeljsrolluprollupjs
fabien
fabien

Reputation: 2258

rollupjs : working with babel and typescript, absolute imports without the extension

I bundle a library with Rollup and I try to switch from rollup-plugin-typescript2 to rollup-plugin-babel to transpile my typescript code.

This is mostly working but I need to add the extensions and the absolute path is not working.

With the typescript compiler, I could do this:

import MyView from 'routes/myRoute/myView';

route is in the src folder and I have this in my tsconfig.json: 

...
"baseUrl": ".",
"paths": {
  "*": ["src/*"]
},
...

To have it working with babel, I have to switch to relative imports and add the extension like this:

import MyView from './routes/myRoute/myView.tsx';

How can I configure babel or/and rollup to go back to the first implementation?

Here is my current rollup plugins config:

    resolve({
      extensions: ['ts', 'tsx', 'js', 'jsx', '.json'],
      customResolveOptions: {
        moduleDirectory: 'node_modules',
      },
      jail: '/src',
    }),
    babel({
      babelrc: false,
      configFile: false,
      envName: env === 'prod' ? 'production' : 'development',
      exclude: 'node_modules/**',
      extensions: ['ts', 'tsx', 'js', 'jsx', '.json'],
      plugins: [
        [
          'module-resolver',
          {
            extensions: ['ts', 'tsx', 'js', 'jsx', '.json'],
            root: ['./src'],
          },
        ],
      ],
      presets: [
        '@babel/preset-typescript',
        '@babel/preset-react',
        [
          '@babel/preset-env',
          {
            modules: false,
          },
        ],
      ],
    }),

(yes, I put extensions everywhere in the hope it might work)

Upvotes: 0

Views: 1747

Answers (1)

tswistak
tswistak

Reputation: 517

You need to define TypeScript extensions in .babelrc file. You'd need to do something similar to this:

"plugins": [
    [
      "module-resolver",
      {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ],
        "root": [
          "./src"
        ]
      }
    ]
  ]

Take a look here for detailed example: https://github.com/damassi/babel-7-typescript-example

Upvotes: 1

Related Questions