I have the following code..

// ui.js (generated by rollup

    import Vue from 'vue';

    import VueRouter from 'vue-router';



    (()=>{

         console.log("Wow it actually works");

         Vue.use(VueRouter);

         const routes = [

             {

                 path: '/',

                 component: Viewport

             }

         ];

         const router = new VueRouter({

             mode: "history",

             routes: routes

         });

         window.app = new Vue({ router });

         window.app.$mount('#jg-app');

    })();



<script src="ui.js" type="module"> </script>

The problem is when I run this I get...

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

This leads me to believe I need a "fat" js that includes dependencies.

I also want to keep everything in es6 modules and avoid introducing say babel.

Is there a way to do this using rollup?

Update

Tried this...

import Vue from "./vue";

But then I get...

Error: Could not resolve './vue' from src/index.js

As far as I can tell this is not possible. I instead had to move the import from the ui project to the server project and create a static js file that looked like this...

//client

import Vue from "./vue"

let app = new Vue(...);

app.$mount('#jg-app');

and import the esm.browser version

// server

app.use('/vue', express.static(__dirname + '/node_modules/vue/dist/vue.esm.browser.js'));

// template

script(src="/main.js" type="module")

Now Vue is working, however, dependencies like Vue-Router appear to not have this es.browser style file.

This is not a solution, it's a workaround

The below rollup config is not esm, it's just a way to create a bundle with dependencies included.

You get one minified browser-compatible JS file.

Here's my working example rollup.config.js (you should replace input: 'src/index.js' with your web app entry point and output.file with a location for the generated bundle):

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

import commonjs from 'rollup-plugin-commonjs';

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

import babel from 'rollup-plugin-babel';

import visualizer from 'rollup-plugin-visualizer';

import { terser } from "rollup-plugin-terser";





const browserPlugins = [

    resolve({browser: true}), // so Rollup can properly resolve cuid

    babel({

        exclude: 'node_modules/**',

        babelrc: false,

        presets: ['es2015-rollup'],

    }),

    // builtins(),

    commonjs(),

    visualizer(),

    terser(),

]



export default [

    // browser-friendly UMD build

    {

        // external: Object.keys(globals),

        input: 'src/index.js',

        output: {

            name: 'thinflux',

            file: './dist/browser/thinflux.min.js',

            format: 'umd'

        },

        plugins: browserPlugins,

    }

];

One more thing: express should statically serve the output.file path, not your source files