Integration with Sapper

[gotys]

I can't for the love of God ( after 12 tireless hours of trying ) integrate this into a Sapper app ( using rollup ). PLEASE provide example rollup config for this if posisble. Thank you

P.S: I keep getting this no matter what I try : Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

[ohbob]

I would love to see a working example with sapper as well. Too much time wasted trying to integrate this.

[skipperstrange]

Mw too :'(

[hperrin]

The demo site in the main repo uses this with Sapper. I also have a project called Sound Rodeo in my GitHub page that uses SMUI/Sapper/Rollup.

[hperrin]

Here you go: https://github.com/hperrin/soundrodeo

[ticruz38]

still not able to use it, here is my config

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import typescript from "@rollup/plugin-typescript";
import babel from "rollup-plugin-babel";
import svelte from "rollup-plugin-svelte";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import config from "sapper/config/rollup.js";
import autoPreprocess from "svelte-preprocess";

import pkg from "./package.json";

const mode = process.env.NODE_ENV;
const dev = mode === "development";
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const extensions = [".js", ".mjs", ".html", ".svelte"];
const preprocess = autoPreprocess({
  typescript: {
    compilerOptions: {
      target: "es6",
      module: "commonjs",
      baseUrl: "./",
    },
    transpileOnly: true,
  },
  postcss: !dev,
});
const postcssOptions = () => ({
  extensions: [".scss", ".sass"],
  extract: false,
  minimize: true,
  use: [
    [
      "sass",
      {
        includePaths: ["./theme", "./node_modules"],
      },
    ],
  ],
});
const onwarn = (warning, onwarn) => {
  if (warning.code === "THIS_IS_UNDEFINED") return;
  (warning.code === "CIRCULAR_DEPENDENCY" &&
    /[/\\]@sapper[/\\]/.test(warning.message)) ||
    onwarn(warning);
};

export default {
  client: {
    input: config.client.input(),
    output: {
      ...config.client.output(),
      sourcemap: true,
    },
    plugins: [
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      svelte({
        dev,
        hydratable: true,
        emitCss: true,
        preprocess,
      }),
      resolve({ extensions, browser: true, dedupe: ["svelte"] }),
      commonjs(),
      postcss(postcssOptions()),
      typescript(),

      legacy &&
        babel({
          extensions,
          runtimeHelpers: true,
          exclude: ["node_modules/@babel/**"],
          presets: [["@babel/preset-env", { targets: "> 0.25%, not dead" }]],
          plugins: [
            "@babel/plugin-syntax-dynamic-import",
            ["@babel/plugin-transform-runtime", { useESModules: true }],
          ],
        }),
      !dev && terser({ module: true }),
    ],

    onwarn,
  },

  server: {
    input: config.server.input(),
    output: config.server.output(),

    plugins: [
      replace({
        "process.browser": false,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      svelte({
        generate: "ssr",
        dev,
        preprocess,
      }),
      resolve({ dedupe: ["svelte"], extensions }),
      commonjs(),
      postcss(postcssOptions()),
      typescript(),
    ],
    external: Object.keys(pkg.dependencies).concat(
      require("module").builtinModules ||
        Object.keys(process.binding("natives"))
    ),

    onwarn,
  },

  serviceworker: {
    input: config.serviceworker.input(),
    output: config.serviceworker.output(),
    plugins: [
      resolve(),
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      commonjs(),
      !dev && terser(),
    ],

    onwarn,
  },
};

I just added typescript support, both on preprocessor and on the project, the rest is prettty much the same as your config. Here is the error from rollup:

import './_index.scss'; ^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

I use @smui/textfield only as a dependency