Mention that successfully bundling requires rollup-plugin-node-resolve

[eddieantonio]

I'm a super n00b at this Rollup thingymobobber, but I've been trying to build my own app using Svelte from scratch — WITHOUT using a boilerplate. I tried copy-pasting the example in the README.md, but it didn't work. Rollup was giving me this error:

$ npx rollup -c  

src/main.js → dist/bundle.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
svelte/internal (imported by src/main.js, src/App.svelte)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
svelte/internal (guessing 'internal')
created dist/bundle.js in 76ms

I tried importing svelte/internal in node, and it worked fine. Eventually, I looked at some GitHub examples of Svelte 3 + Rollup, and found this plugin required for ALL of them: rollup-plugin-node-resolve. I popped it into my config:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    svelte({
      // You can restrict which files are compiled
      // using `include` and `exclude`
      include: 'src/**/*.svelte',
    }),
    resolve()
  ]
}

And everything worked!

ACTION ITEM

State in the README that rollup-plugin-node-resolve is required and must be used to have a fully working rollup.config.js.

[patoi]

npm i -D rollup-plugin-commonjs and add to config file:

1. import commonjs from 'rollup-plugin-commonjs'
2. commonjs()

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
// install with: npm i -D rollup-plugin-commonjs
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    svelte({
      // You can restrict which files are compiled
      // using `include` and `exclude`
      include: 'src/**/*.svelte',
    }),
    resolve(),
    commonjs()
  ]
}

[ghosh]

I'm getting the same error when I install Svelte in a yarn workspace. However, it works properly when I install it via npx degit ...

Not sure if this should be its own issue.

[mikestead]

@ghosh same issue here re workspaces

[mikestead]

For anyone else that hits this issue when using yarn workspaces, you can work around it by avoiding the hoisting of rollup-plugin-svelte

"workspaces": {
    "packages": [ "packages/*" ],
    "nohoist": [
      "**/rollup-plugin-svelte",
      "**/rollup-plugin-svelte/**"
    ]
  }

[mihar-22]

Just a note here that when using Yarn Workspaces, because the packages are symlinked they are resolved absolutely, so rollup-plugin-svelte doesn't resolve the .svelte files if a module key is defined in package.json and files are present, even if a svelte key is defined.

I fixed it by adding mainFields: ['svelte', 'module', 'main'] (order is important!) to @rollup-plugin-node-resolve which is documented here. I think it'd be safer to just have this set regardless if you're using Workspaces or not.

[wasdee]

I observed this in my electron-svelte app.

instead of

yarn run autobuild

use

npm run autobuild

did solved my issue.
Noted that autobuild script is defined as rollup -c -w

[elimisteve]

This worked for me, except replacing the archived/deprecated rollup-plugin-commonjs with @rollup/plugin-commonjs, then ensuring that @rollup/plugin-commonjs is running the latest version.

Specifically upgrading @rollup/plugin-commonjs from version 11.0.0 to 11.1.0 fixed everything!