How to Use smui with rollup and typescript?

[vbilopav]

Here is my package.json:

{
  "version": "1.0.0",
  "private": true,
  "scripts": {
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-replace": "^5.0.2",
    "@rollup/plugin-terser": "^0.2.1",
    "@rollup/plugin-typescript": "^10.0.1",
    "@tsconfig/svelte": "^3.0.0",
    "npm-check-updates": "^16.6.2",
    "rollup": "^3.9.0",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-svelte": "^7.1.0",
    "sass": "^1.57.1",
    "svelte": "^3.55.0",
    "svelte-check": "^3.0.1",
    "svelte-material-ui": "^7.0.0-beta.0",
    "svelte-preprocess": "^5.0.0",
    "svelte-spa-router": "^3.3.0",
    "tslib": "^2.4.1",
    "typescript": "^4.9.4"
  }
}

Here is my rollup.config.js;

import svelte from "rollup-plugin-svelte";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import terser from "@rollup/plugin-terser";
import sveltePreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";
import css from "rollup-plugin-css-only";
import replace from '@rollup/plugin-replace';
import typescriptCompiler from 'typescript';

const production = !process.env.ROLLUP_WATCH;

const getName = str => {
    var split = str.split("/");
    return (split[split.length - 1].split(".")[0]).toLowerCase();
}

export default (param, globals) => {
    var input;
    var jsOutput;
    var cssOutput;
    var appObject;
    if (typeof param === "string") {
        input = param;
        appObject = getName(input);
        jsOutput = "./wwwroot/build/" + appObject + ".js";
        cssOutput = appObject + ".css";
    } else {
        input = param.input;
        var name = getName(input);
        appObject = param.appObject ? param.appObject : name;
        jsOutput = param.jsOutput ? param.jsOutput : "./wwwroot/build/" + name + ".js";
        cssOutput = param.cssOutput ? param.cssOutput : name + ".css";
    }
    globals = globals || {};
    return {
        input: input,
        output: {
            sourcemap: !production,
            format: "iife",
            name: appObject,
            file: jsOutput,
            globals: globals || {}
        },
        plugins: [
            replace({
                preventAssignment: true,
                "process.env.NODE_ENV": JSON.stringify("development")
            }),
            svelte({
                preprocess: sveltePreprocess({ sourceMap: !production }),
                compilerOptions: {
                    // enable run-time checks when not in production
                    dev: !production
                }
            }),
            // we"ll extract any component CSS out into
            // a separate file - better for performance
            css({ output: cssOutput }),

            // If you have external dependencies installed from
            // npm, you"ll most likely need these plugins. In
            // some cases you"ll need additional configuration -
            // consult the documentation for details:
            // https://github.com/rollup/plugins/tree/master/packages/commonjs
            resolve({
                browser: true,
                dedupe: importee => importee === "svelte" || importee.startsWith("svelte/")
            }),
            
            typescript({
                sourceMap: !production,
                inlineSources: !production,
                types: ["svelte"],
                resolveJsonModule: true,
                typescript: typescriptCompiler,
            }),
            commonjs({ include: "node_modules/**" }),
            // If we"re building for production (npm run build
            // instead of npm run dev), minify
            production && terser(),
        ],
        watch: {
            clearScreen: false
        },
    }
};

And index file;

<script lang="ts">
    import Layout from "./shared/layout/default";
    import Button, { Label } from "@smui/button";
    //import Button, { Label } from "@smui/button";
    //let clicked = 0;
</script>

<Layout>
    Hello world!

    <!-- <Button on:click={() => clicked++}>
        <Label>Default</Label>
    </Button> -->
</Layout>


<style lang="scss">
</style>

It breaks on import Button, { Label } from "@smui/button"; with error:

npx rollup -c ./Pages/Index.rollup.config.js --bundleConfigAsCjs
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

./Pages/Index.entry.ts → ./wwwroot/build/index.js...
[!] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)
node_modules/@smui/common/src/internal/announce.ts (9:9)
 7:  */
 8: export function announce(
 9:   message: string,
             ^
10:   options: { priority?: 'polite' | 'assertive'; ownerDocument?: Document } = {}
11: ) {
    at error (C:\vb-consulting\on\on-excel-ui\OnExcelUI\node_modules\rollup\dist\shared\rollup.js:210:30)
    at Module.error (C:\vb-consulting\on\on-excel-ui\OnExcelUI\node_modules\rollup\dist\shared\rollup.js:13502:16)
    at Module.tryParse (C:\vb-consulting\on\on-excel-ui\OnExcelUI\node_modules\rollup\dist\shared\rollup.js:13896:25)
    at Module.setSource (C:\vb-consulting\on\on-excel-ui\OnExcelUI\node_modules\rollup\dist\shared\rollup.js:13787:39)
    at ModuleLoader.addModuleSource (C:\vb-consulting\on\on-excel-ui\OnExcelUI\node_modules\rollup\dist\shared\rollup.js:23307:20)

Haven't had these problems before. Does anyone have a solution? Thanks.

[hperrin]

I'm getting this same error. I'm not sure how to fix it. Nothing is importing src/internal/announce.ts.

[hperrin]

I think I'm getting closer to understanding why this is happening. It looks like the Typescript plugin is resolving @smui imports when it shouldn't be.

This is from Rollup's fetchResolvedDependency:

{
  source: '@smui/common/internal',
  importer: '/home/hperrin/repos/quickdav/node_modules/@smui/tab-bar/dist/TabBar.svelte',
  resolvedId: {
    assertions: {},
    external: false,
    id: '/home/hperrin/repos/quickdav/node_modules/@smui/common/src/internal/index.ts',
    meta: {},
    moduleSideEffects: true,
    resolvedBy: 'typescript',
    syntheticNamedExports: false
  }
}

[hperrin]

Ok, I've figured it out. The Typescript Rollup plugin looks for a file resolved by Typescript, and if that file is found, it checks to see if it's named like a declaration file (*.d.ts). If it is, it returns null (meaning Typescript doesn't resolve it), but if it's not named that way, it returns it (meaning Typescript resolved it). So Typescript is thinking it has resolved the SMUI modules, because the type files aren't named like declaration files.

[hperrin]

My brain hurts after tracking that bug down. :P

[hperrin]

You need something like this in your rollup config:

import resolve from '@rollup/plugin-node-resolve';

// then later in your plugins:
resolve({
  browser: true,
  exportConditions: ['default', 'module', 'import', 'svelte'],
  extensions: ['.mjs', '.js', '.json', '.node', '.svelte'],
})