Rollup + Typescript error when importing files outside baseUrl

Question

I put together a rollup build system that takes a folder of Typescript components exports them as modules.

The build system works perfectly if the component files live within the folder structure:

src/components/Button

but the problem arises when I try to import them from outside the baseUrl meaning:

../../javascript/components/Button

As soon as I try this I get the following errors:

[!] Error: The keyword 'interface' is reserved

This is what my tsconfig file looks like:

{
    "compilerOptions": {
        "jsx": "react",
        "module": "es2015",
        "target": "es2017",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "baseUrl": ".",
        "preserveSymlinks": true,
        "esModuleInterop": true,
        "paths": {
            "ui": ["../../components"]
        }
    },
    "include": ["src/**/*.tsx"],
    "exclude": ["node_modules"]
}

and my rollup.config

import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import less from 'rollup-plugin-less';
import alias from 'rollup-plugin-alias';

const plugins = [
    alias({
        ui: '../../components',
        resolve: ['.tsx', '.ts', '.less']
    }),
    resolve(),
    commonjs({
        // All of our own sources will be ES6 modules, so only node_modules need to be resolved with cjs
        include: 'node_modules/**',
        namedExports: {
            'node_modules/react/index.js': [
                'Component',
                'PropTypes',
                'createElement'
            ],
            'node_modules/lodash/lodash.js': ['isEmpty', 'isString']
        }
    }),
    less({ insert: 'true' }),
    typescript()
];

export default {
    plugins,
    external: ['react'],
    input: './src/main.js',
    output: {
        sourcemap: true,
        file: './lib/index.js',
        format: 'cjs'
    }
};

Thanks so much in advance!!!

Answer 1

After investigating for a while, I found that @rollup/plugin-typescript only transform files inside of project root by default. To override that behavior, you need to specify in the include option of the plugin, the globs for the files you plan to use, including the files inside of your project.

import ...


const plugins = [
    /* ... */
    typescript({
      include: [
        // Project files
        './**/*.ts+(|x)',
        // Files from outside of the project
        '../../javascript/**/*.ts+(|x)'
      ]
    })
];

export default {
    /* ... */
};

You will also need to do this in your 'tsconfig.json', because the plugin will complain that the external files are not listed in your tsconfig.