Develop Reference

TypeError: multi is not a function / default import from rollup-plugin-multi-input does not work from ESM package

I found a plugin rollup-plugin-multi-input which fixes the problem of not being able to specifiy a glob to the test rollup config. For the unt tests, the entry point is not a single entity from which an import graph can be derived. It is just a collection of source files containing tests, which doesnt fit input requirement of rollup.
However, my attempt at trying to use it was fruitless:
rollup-config.tests.mjs:
import multi from 'rollup-plugin-multi-input';
const testConfig = {
input: ['test/**/*.spec.ts'],
external: ["chai", "mocha", "dirty-chai"],
output: {
format: "es",
file: `dist/${name}-bundle.test.js`,
plugins: [],
sourcemap: true
},
plugins: [
multi(),
resolve(),
commonjs(),
typescript({
tsconfig: "./tsconfig.test.json"
})
],
}
just resulted in this error:
[!] TypeError: multi is not a function
TypeError: multi is not a function
Looking at the exported code from the plugin, I can see that the default export is a function:
var _default = function(param) {
}
exports.default = _default;
So I don't know why this doesnt work.
I since discovered that there is another plugin that does a similar thing: #rollup/plugin-multi-entry:
import entry from "rollup-plugin-multi-entry";
plugins: [
entry(),
resolve(),
commonjs(),
typescript({
tsconfig: "./tsconfig.test.json"
})
],
so configured and invoked in exactly the same way, but now it works in the way that I wanted it to; the test bundle is created and mocha indeed sees all the tests and executes them successfully.
So let's take a look at that export and see if there is a difference in what is exported:
Well the first thing to notice is that its dist folder contains a .mjs file and a .js file. Since we're importing from an ESM package ("type": "module" in package.json), I guess we're using the default export from the .mjs file:
function multiEntry() {
...
}
export default multiEntry;
With rollup-plugin-multi-input, I even tried using the createRequire from "module":
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const multi = require('rollup-plugin-multi-input');
but that failed for the same reason.
So whats the problem here? Why does default import from rollup-plugin-multi-input not work?

Problems with some classes not exporting when it should have arose when porting codebase from Webpack to Rollup

So, I'm porting an old 2017 codebase from Webpack to Rollup for performance and code size reasons, also because of the old dependencies that the codebase used.
Unfortunately, The new Rollup version has a problem that I couldn't figure out a solution for. It doesn't seem to export some classes (In this case Engine and BackgroundLayer), but the Webpack unaltered version does. Is there a reason for this?
The Error in question:
Uncaught ReferenceError: Engine is not defined
Here's my rollup.config.js
import arraybuffer from '#wemap/rollup-plugin-arraybuffer';
import { babel } from "#rollup/plugin-babel";
import commonjs from "#rollup/plugin-commonjs";
import pkg from './package.json';
import resolve from "#rollup/plugin-node-resolve";
// import { terser } from "rollup-plugin-terser";
export default {
input: "src/index.js",
output: {
name: "index",
file: `dist/${pkg.name}.js`,
format: "umd",
},
external: ['ms'],
plugins: [
arraybuffer({ include: '**/*.dat' }), // so Rollup can import .dat files
resolve(), // so Rollup can find `ms`
commonjs(), // so Rollup can convert `ms` to an ES module
// terser(), // minifying
// babel configuration
babel({ exclude: 'node_modules/**', babelHelpers: "runtime", skipPreflightCheck: true }),
]
}
If anybody requires the full codebase, here are the two versions:
Webpack Code: https://github.com/kdex/earthbound-battle-backgrounds
Rollup Code: https://github.com/IamRifki/earthbound-battle-backgrounds-rollup

Figured it out, I had to call my bundle.js inside a module:
index.html
<script type="module">
import { BackgroundLayer, Engine } from "./bundle.js";
const engine = new Engine([new BackgroundLayer(153), new BackgroundLayer(298)]);
engine.animate();
</script>

What causes failure to compile SASS in this svelte applcation?

I am working on a project with Svelte and the material design library Svelte Material UI.
This material design library requires SASS, so I installed a preprocessor with npm install svelte-preprocess and added preprocess: autoPreprocess() in rollup.config.js. So I now have:
plugins: [
svelte({
// 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: css => {
css.write('public/build/bundle.css');
},
preprocess: autoPreprocess()
}),
routify({ singleBuild : true}),
replace({
// stringify the object
APPENV: JSON.stringify({
isProd: production,
...config().parsed // attached the .env config
}),
}),
// more stuff
]
I have a file smui.js with this content:
import Button from '#smui/button';
import Checkbox from '#smui/checkbox';
import Chips from '#smui/chips';
import Dialog from '#smui/dialog';
import FormField from '#smui/form-field';
import Select from '#smui/select';
export {
Button,
Checkbox,
Chips,
Dialog,
FormField,
Select
}
In my index.svelte file I am importing the above this way: import * as Smui from "../smui.js";.
Instead of a success message with the port on which the app should run, I get:
[!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
node_modules\#smui\dialog\_index.scss (1:0)
1: #import "smui-theme";
^
2: #import "./style";
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
What am I doing wrong?

I had the same issue and somehow I managed to fix this with rollup-plugin-postcss plugin. Update your rollup.config.js with the following code and you should have _smui-theme.scss in your one of sass directories.
import postcss from 'rollup-plugin-postcss'
...
plugins: [
svelte({
// 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: css => {
css.write('public/build/bundle.css')
}
}),
postcss({
extensions: ['.css'],
extract: true,
minimize: true,
use: [['sass', { includePaths: ['./src/(yoursass-directory-name)', './node_modules'] }]]
})

I've never used #import to import components from a NPM package, but at the readme package you're referencing it recommends using 'import x from" svelte-material'. Also pay attention that svelte-preprocess won't be supported by the package you're referencing, take a look at the readme:
To bundle this in your own code, use a Sass processor (not a Sass Svelte preprocessor, but a Sass processor).

How do I import shared modules using rollup without duplicating code?

I have two we components lets call then comp1 and comp2 and my project structure looks like this...
web-components
packages
comp1
package.json
comp2
package.json
lerna.json
rollup.config.json
package.json
Both of these import the Polymer material lib #material/mwc-icon-button. The problem arises when I build the projects. The material code is then injected into both outputs. I want to avoid this but I can't think of how to do it. I thought about using global variables but then the implementer has to know to install the material dependency and properly configure the global but this seems pretty onerous.
So the question is what is the proper way to do this without repeating code in the output?
Here is my full rollup config...
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import pug from 'rollup-plugin-pug';
import postcss from 'rollup-plugin-postcss';
const globals = {}
// const external = Object.keys(pkg.dependencies);
const plugins = [
resolve({
module: true,
main: true,
jsnext:"main",
browser: true
}),
postcss({
plugins: []
}),
commonjs(),
pug()
];
module.exports = {
plugins,
input: 'src/jrg-dropdown.mjs',
output: {
file: 'dist/index.mjs',
format: 'esm',
globals
}
};

Can we write typescript inside a svelte component?

Is it possible to write Typescript inside the script tag in a svelte component?
I came across https://github.com/pyoner/svelte-typescript/tree/master/packages/preprocess
Which if I understand correctly is a typescript preprocessor for svelte which would allow to write typescript in svelte components. However I am not able to get it working
This is how my rollup config looks like
import svelte from "rollup-plugin-svelte";
import resolve from "rollup-plugin-node-resolve";
import replace from "rollup-plugin-replace";
import commonjs from "rollup-plugin-commonjs";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import copy from "rollup-plugin-copy";
import typescript from "rollup-plugin-typescript2";
import { terser } from "rollup-plugin-terser";
import {
preprocess,
createEnv,
readConfigFile
} from "#pyoner/svelte-ts-preprocess";
const tsEnv = createEnv();
const compilerOptions = readConfigFile(tsEnv);
const opts = {
env: tsEnv,
compilerOptions: {
...compilerOptions,
allowNonTsExtensions: true
}
};
const env = process.env.NODE_ENV;
const production = env ? env === "production" : false;
const distFolder = "dist";
export default {
input: "src/index.ts",
output: {
sourcemap: !production,
format: "iife",
name: "app",
file: `${distFolder}/bundle.js`
},
plugins: [
replace({
"process.browser": true,
"process.env.NODE_ENV": JSON.stringify(env)
}),
svelte({
// 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: css => {
css.write(`${distFolder}/bundle.css`);
},
preprocess: preprocess(opts)
}),
// 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/rollup-plugin-commonjs
resolve({
browser: true,
dedupe: importee =>
importee === "svelte" || importee.startsWith("svelte/")
}),
commonjs(),
typescript({
tsconfig: "tsconfig.json",
objectHashIgnoreUnknownHack: true,
clean: production
}),
// Start dev server if not in production mode
!production &&
serve({
open: true,
contentBase: distFolder,
historyApiFallback: true,
host: "localhost",
port: 7000
}),
// Watch the `dist` directory and refresh the
// browser on changes when not in production
!production && livereload(distFolder),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
copy({
targets: [{ src: "public/**/*", dest: `${distFolder}` }]
})
],
watch: {
clearScreen: false
}
};
I am not sure If I have configured this incorrectly or if it is not possible at all to write typescript in svelte?

Yes. Svelte has official support for typescript!
https://svelte.dev/blog/svelte-and-typescript
The starter template comes with a setupTypeScript.js utility: https://github.com/sveltejs/template#using-typescript

Yes you can
This is an example of svelte + typescript + rollup
And this is an exampl of svelte + typescript + parcel

Svelte has official documentation about Typescript support.
Basically, you can add lang="ts" to your script block and svelte preprocessor will take care of compiling
<script lang="ts">
export const hello: string = 'world';
</script>
You can start a new Svelte TypeScript project using the normal template and by running node scripts/setupTypeScript.js before you do anything else:
npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js
To add Typescript to existing projects,
npm install --save-dev #tsconfig/svelte typescript svelte-preprocess svelte-check
Add tsconfig.json at the root of your project
{
"extends": "#tsconfig/svelte/tsconfig.json",
"include": ["src/**/*", "src/node_modules"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}
If you're using Rollup, add the lines with + to rollup.config.js
+ import autoPreprocess from 'svelte-preprocess';
+ import typescript from '#rollup/plugin-typescript';
export default {
...,
plugins: [
svelte({
+ preprocess: autoPreprocess()
}),
+ typescript({ sourceMap: !production })
]
}

Yes, you can. Here's a how-to: Use TypeScript with Svelte / Sapper

You can try to use the next template by npx degit
https://github.com/Zimtir/ST-template
Look at README.md file

It is possible to write ts in the svelte component's script.
There are official templates available with snowpack, vite, and other build tools.
You could also build it on your own with svelte-preprocess and typescript plugin/loader for the respective build tool.
vite svelte-typescript template
snowpack svelte-typescript
template