Svelte: Svelte 3 and PouchDB : rollup configuration ?

[Jimskapt]

Hello !

I'm struggling to use PouchDB 7 with my new application based on Svelte 3 template and technology that I learning since a couple of weeks. _(It is a exiting technology, I would like to take this opportunity to thank you !)_

I think there is a problem in the Rollup configuration file, as PouchDB designers (@nolanlawson) seems to have by the past, but it looks like they have fixed their problems.

Here is a repository dedicated to my problem, based on Svelte 3 template (with degit) as described in the quick start : svelte_rollup_pouchdb_issue.

For history, following is current code :

rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import { string } from 'rollup-plugin-string';
import json from 'rollup-plugin-json';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/bundle.js'
    },
    plugins: [
        string({
            include: '**/*.fluent',
        }),

        json({
            include: '**/*.json',
        }),

        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/bundle.css');
            }
        }),

        // 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(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

npm run dev

warning on build time

rollup v1.17.0
bundles src/main.js → public/bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on 'events'. You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins
LiveReload enabled
[...]
(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at 'events', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
events (imported by node_modules/pouchdb/lib/index-browser.es.js)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
events (guessing 'events')
created public/bundle.js in 1.7s

[2019-07-19 08:03:39] waiting for changes...

rollup.config.js

[...]
import { string } from 'rollup-plugin-string';
import json from 'rollup-plugin-json';
import builtins from 'rollup-plugin-node-builtins';

const production = !process.env.ROLLUP_WATCH;

export default {
    [...]
    plugins: [
        builtins(),

        string({
            include: '**/*.fluent',
        }),

        [...]
    ],
    watch: {
        clearScreen: false
    }
};

npm run dev

no errors on build time

rollup v1.17.0
bundles src/main.js → public/bundle.js...
LiveReload enabled
created public/bundle.js in 1.8s

[2019-07-19 08:08:25] waiting for changes...

in the browser

error on runtime

ReferenceError: global is not defined index-browser.es.js:1026:23
    app index-browser.es.js:1026
    <anonyme> bundle.js:20597

rollup.config.js

[...]
import { string } from 'rollup-plugin-string';
import json from 'rollup-plugin-json';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';

const production = !process.env.ROLLUP_WATCH;

export default {
    [...]
    plugins: [
        globals(),
        builtins(),

        string({
            include: '**/*.fluent',
        }),

        [...]
    ],
    watch: {
        clearScreen: false
    }
};

npm run dev

fatal error on build time

rollup v1.17.0
bundles src/main.js → public/bundle.js...
[!] Error: 'default' is not exported by node_modules/immediate/lib/browser.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module-
node_modules/pouchdb/lib/index-browser.es.js (1:7)
1: import immediate from 'immediate';
          ^
2: import uuidV4 from 'uuid';
3: import Md5 from 'spark-md5';
Error: 'default' is not exported by node_modules/immediate/lib/browser.js
    at error (/my_project_path/node_modules/rollup/dist/rollup.js:9408:30)
    at Module.error (/my_project_path/node_modules/rollup/dist/rollup.js:13347:9)
    at handleMissingExport (/my_project_path/node_modules/rollup/dist/rollup.js:13269:21)
    at Module.traceVariable (/my_project_path/node_modules/rollup/dist/rollup.js:13656:17)
    at ModuleScope.findVariable (/my_project_path/node_modules/rollup/dist/rollup.js:12367:39)
    at FunctionScope.findVariable (/my_project_path/node_modules/rollup/dist/rollup.js:2968:38)
    at ChildScope.findVariable (/my_project_path/node_modules/rollup/dist/rollup.js:2968:38)
    at FunctionScope.findVariable (/my_project_path/node_modules/rollup/dist/rollup.js:2968:38)
    at ChildScope.findVariable (/my_project_path/node_modules/rollup/dist/rollup.js:2968:38)
    at FunctionScope.findVariable (/my_project_path/node_modules/rollup/dist/rollup.js:2968:38)

Thank you !

[creaven]

If move globals() after commonjs() it works. As I understand globals adds some imports and commonjs thinks that it is already es6 file and don't make necessary changes (but not 100% sure about it).
(it is rollup configuration issue, not related to svelte)

[Jimskapt]

Oh, yeah, it works, now ! :clap:

Thank you so much for your help, @creaven !

[vcheeze]

I'm having a similar issue - I'm trying to use Sapper with its default template, and at build time it gives me the fetch is not defined error. Is this also a Rollup configuration issue?

[dhonx]

@vcheeze can you give the error output from that ???

[vcheeze]

Here's the output I get. Thanks!

[dhonx]

@vcheeze Try to read this out https://github.com/rollup/rollup/issues/1459, hopefully it can solve your problem... 🙂

[vcheeze]

@donnisnoni95 I'm now importing whatwg-fetch at the top, and adding the module context option like this: moduleContext: { [require.resolve('whatwg-fetch')]: 'window' } in my rollup.config.js. The fetch is not defined error has gone away, but I seem unable to set the module context correctly, as a new error tells me that self is not defined.

Error:

My rollup.config.js:

import 'whatwg-fetch';
import resolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
import { sass } from 'svelte-preprocess-sass';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/');

export default {
    client: {
        input: config.client.input(),
        output: config.client.output(),
        plugins: [
            replace({
                'process.browser': true,
                'process.env.NODE_ENV': JSON.stringify(mode)
            }),
            svelte({
                dev,
                hydratable: true,
                emitCss: true,
                preprocess: {
                    style: sass({}, { name: 'scss' })
                }
            }),
            resolve({
                browser: true,
                dedupe
            }),
            commonjs(),

            legacy && babel({
                extensions: ['.js', '.mjs', '.html', '.svelte'],
                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: {
                    style: sass({}, { name: 'scss' })
                }
            }),
            resolve({
                dedupe
            }),
            commonjs()
        ],
        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,
    },

    moduleContext: {
        [require.resolve('whatwg-fetch')]: 'window'
    }
};

[Bandit]

@vcheeze did you ever solve this? I get an error trying to import PouchDB from 'pouchdb' in any client code using Sapper

'events' is imported by node_modules/pouchdb/lib/index-browser.es.js, but could not be resolved – treating it as an external dependency

[vcheeze]

Sorry for the late reply. I never solved this, and will attempt again soon. I'll update you if anything useful comes up @Bandit

[zahachtah]

I had to use webpack instead, would have preferred rollup. so if any solution I'd be happy to know

[rixo]

For those still searching or who will found this issue, I've had PouchDB working with Rollup by installing rollup-plugin-node-builtins and just adding it to the plugins list:

rollup.config.js

import builtins from 'rollup-plugin-node-builtins'

export default {
  ...
  plugins: [
    ...
    builtins(),
  ]
}

Further notes:

• I've added the builtins plugin after the commonjs one, due to the comment above, but I've not tested if it matters (and I'm not in a mood to fix what's working right now)

• I'm using the pouchdb-browser variant of PouchDB (don't think that makes a difference, but it's possible it does)

[zahachtah]

Yes, also got it working after changing the order as above after some fiddling!

thanks for letting us know about this cleaner solution!