Source map printing to console

Question

Hello, for some reason, when I switched over to this plugin from the typescript2 plugin, the sourcemap for my umd bundle is printing to the console on each build. Any idea why this would be happening?

I switched over to generate .d.ts typing files for each output file generated, which I really like!

Thanks : )

Hey there. Im not entirely sure I understand the question 🙂. What do you mean when you say that the SourceMap prints to the console? Is something printed by rollup-plugin-ts while you're building a bundle?

Thanks for the quick response. I've inserted my rollup.config.js below. When rollup is bundling the input: 'src/TsiClient.ts', it prints the entire minified sourcemap to the terminal in vscode. This wasn't happening before. It seems to be new since I switched to this plugin.

// import typescript from '@rollup/plugin-typescript';
import ts from "@wessberg/rollup-plugin-ts";
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import path from 'path';
import postcssUrl from "postcss-url";
import analyze from 'rollup-plugin-analyzer';
import autoExternal from 'rollup-plugin-auto-external';
import visualizer from 'rollup-plugin-visualizer';

const getPluginConfig = (target) => {

    // Common plugins
    const config = [
        nodeResolve(),
        ts(),
        commonjs({sourceMap: false}),
        // json(),
        analyze({summaryOnly: true, limit: 20}),
        visualizer()
    ]

    // umd specific plugins
    if(target === 'umd'){
        config.push(
            terser(), 
            postcss({
                extract:'tsiclient.min.css',
                plugins: [
                    postcssUrl({
                        url: 'inline',
                    })
                ],
                minimize: true,
                sourceMap: true
            }),
        );
    }

    // esm specific plugins
    if(target === 'esm'){
        config.push(
            autoExternal(),
            postcss({
                extract:'tsiclient.css',
                plugins: [
                    postcssUrl({
                        url: 'inline',
                    })
                ],
                minimize: false,
                sourceMap: false
            }),    
        );
    }

    return config;
}

export default () => {
    // browser-friendly UMD build ()
    const browserBundle = 
    {
        input: 'src/TsiClient.ts',
        output: {
            file: path.join('dist', pkg.main),
            format: 'umd',
            name: 'TsiClient',
            sourcemap: true
        }
    };

    // ESM Component build
    const esmComponentBundle = 
    {
        input: {
            // TsiClient core
            ServerClient: 'src/ServerClient/ServerClient.ts',
            UXClient: 'src/UXClient/UXClient.ts',
            Utils: 'src/UXClient/Utils.ts',

            // Direct component imports 
            LineChart: 'src/UXClient/Components/LineChart/LineChart.ts',
            AvailabilityChart: 'src/UXClient/Components/AvailabilityChart/AvailabilityChart.ts',
            PieChart: 'src/UXClient/Components/PieChart/PieChart.ts',
            ScatterPlot: 'src/UXClient/Components/ScatterPlot/ScatterPlot.ts',
            GroupedBarChart: 'src/UXClient/Components/GroupedBarChart/GroupedBarChart.ts',
            Grid: 'src/UXClient/Components/Grid/Grid.ts',
            Slider: 'src/UXClient/Components/Slider/Slider.ts',
            Hierarchy: 'src/UXClient/Components/Hierarchy/Hierarchy.ts',
            AggregateExpression: 'src/UXClient/Models/AggregateExpression.ts',
            Heatmap: 'src/UXClient/Components/Heatmap/Heatmap.ts',
            EventsTable: 'src/UXClient/Components/EventsTable/EventsTable.ts',
            ModelSearch: 'src/UXClient/Components/ModelSearch/ModelSearch.ts',
            DateTimePicker: 'src/UXClient/Components/DateTimePicker/DateTimePicker.ts',
            TimezonePicker: 'src/UXClient/Components/TimezonePicker/TimezonePicker.ts',
            EllipsisMenu: 'src/UXClient/Components/EllipsisMenu/EllipsisMenu.ts',
            TsqExpression: 'src/UXClient/Models/TsqExpression.ts',
            ModelAutocomplete: 'src/UXClient/Components/ModelAutocomplete/ModelAutocomplete.ts',
            HierarchyNavigation: 'src/UXClient/Components/HierarchyNavigation/HierarchyNavigation.ts',
            SingleDateTimePicker:'src/UXClient/Components/SingleDateTimePicker/SingleDateTimePicker.ts',
            DateTimeButtonSingle: 'src/UXClient/Components/DateTimeButtonSingle/DateTimeButtonSingle.ts',
            DateTimeButtonRange: 'src/UXClient/Components/DateTimeButtonRange/DateTimeButtonRange.ts',
            ProcessGraphic: 'src/UXClient/Components/ProcessGraphic/ProcessGraphic.ts',
            PlaybackControls: 'src/UXClient/Components/PlaybackControls/PlaybackControls.ts',
            ColorPicker: 'src/UXClient/Components/ColorPicker/ColorPicker.ts',
            GeoProcessGraphic: 'src/UXClient/Components/GeoProcessGraphic/GeoProcessGraphic.ts'
        },
        output: {
            dir: 'dist',
            format: 'esm',
            sourcemap: false
        }
    }

    // Attach plugins to browserBundle
    browserBundle.plugins = getPluginConfig('umd');

    // Attach plugins to esmComponentBundle
    esmComponentBundle.plugins = getPluginConfig('esm');

    let bundle = [browserBundle, esmComponentBundle]

    return bundle;
};

I really can't tell you why this might be happening. The only scenario in which rollup-plugin-ts logs to the console is if you pass debug: true as a plugin option. It would help me greatly (as mentioned in the issue template) if you can prepare a minimal repro in which this is happening that I can clone and take a look at.

@wessberg, thanks for the reply. This is the branch I'm working on. Running npm run build will reproduce this.

I'm also running into issues with allowSyntheticDefaultImports: true. The current state of the branch I linked builds perfectly with rollup-plugin-typescript2, but when I change the typescript plugin to rollup-plugin-typescript, it runs into a number of import errors and spits out an enormous source-map in the console.

I'd love to use your plugin for the .d.ts declarations alongside each generated bundle, rather than nested into source directories, but I can't seem to get past these other issues. Any and all help is appreciated!

Thanks again : )

I just cloned that repo and switched to your branch and ran npm run build.

I did see several warnings produced by Rollup about this being rewritten to undefined in the console (if you want to fix this, pass the context: "window" option to your Rollup configuration if you're targeting a browser environment), but none of them were related to or reported by this plugin, and no source map was ever logged to the console. The text contents of the file node_modules/azure-maps-control/dist/atlas.min.js were, however, logged to the console by Rollup, since this was rewritten in that file as well.

Finally, Rollup throws an error because you're trying to do import moment from moment which is syntactically acceptable in TypeScript with the allowSyntheticDefaultImports option, but remember that it is Rollup - not TypeScript - that needs to be able understand and build a graph of your dependencies and their exports in order to bundle them together in your application.

And currently based on your Rollup configuration, You're relying on @rollup/plugin-node-resolve to teach Rollup how to resolve bare module specifiers via node module resolution, but it points to the main property of moment which is an UMD module. That is not something that Rollup can understand. That's where @rollup/plugin-commonjs comes in, which is a plugin that tries its best at rewriting UMD and CommonJS to ESM so Rollup can understand it. But it does not succeed at rewriting that module into valid ESM. But it doesn't have to! Because moment actually ships with an esm build as well, pointed to via the jsnext:main property in their package.json file. So I would recommend the following:

In your rollup.config.js, first set the context: "window" option to silence the this warnings from Rollup.
In yourrollup.config.js, update the call to thenodeResolvefunction to also allow for it to parse thejsnext:main` field:

nodeResolve({
    mainFields: ["jsnext:main", "module", "main"]
})

That will lead you another error: You're relying on an older version moment-timezone (0.5.21), and that version does not ship typings. But since your tsconfig.json has the allowJs: true option enabled, you are allowed to import from it anyway. I would strongly recommend that you upgrade your moment-timezone dependency to 0.5.31 which comes with typings and makes that problem go away:

In your package.json, update the dependency on moment-timezone to ^0.5.31

Fixing that will lead you to yet another error: error: 'default' is not exported by node_modules/moment-timezone/index.js, imported by src/UXClient/Utils.ts. This is a very common error when you're using @rollup/plugin-commonjs. It does its best at rewriting CommonJS to ESM, but it can't always do a perfect job. So sometimes you'll have to help it. In this case, let me recommend consulting the documentation for @rollup/plugin-commonjs to see how you might be able to work around it.

Note that absolutely none of this has any relation to this plugin, but I felt like giving you a little help here. In the future, if you believe you've found a bug in rollup-plugin-ts, please follow the issue template as suggested and create a minimal, simple repro that is isolated and clearly showcases the problem.

Thank you! These responses are amazing.

I honestly can't figure out these default export errors from the CJS import. For now, I'm using rollup-plugin-ts for the esm bundle with moment & moment-timezone marked as external dependencies, and rollup-plugin-typscript2 for the umd bundle with moment & moment-timezone wrapped up.

Hopefully I'll be able to switch over to rollup-plugin-ts for both bundles, but this is working for now!

wessberg / rollup-plugin-ts

Source map printing to console #118

Question