title: Why does rollup throw "Must use import to load ES Module"?
body: <p>I have the following code that works fine with rollup...</p>
  
  <pre><code>// rollup.config.js
  import pkg from './package.json';
  
  export default [{
    input: pkg.src,
    external: ['ms'],
    output: [
      {
          file: pkg.main,
          format: 'esm'
      }
    ]
  }];
  </code></pre>
  
  <p>I created a project to make simple UMD, CJS and ESM so now I want to make the code...</p>
  
  <pre><code>import { getMJS } from "@jrg/build"
  
  import pkg from './package.json';
  
  export default [
    getMJS(pkg)
  ];
  </code></pre>
  
  <p>But when I try to run this I get...</p>
  
  <pre><code>[!] Error: Must use import to load ES Module: /.../web-components/packages/base/node_modules/@jrg/build/dist/index.mjs
  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /.../web-components/packages/base/node_modules/@jrg/build/dist/index.mjs
      at Module.load (internal/modules/cjs/loader.js:1048:11)
  </code></pre>
  
  <p>What am I missing? The index.mjs file in @jrg/build is...</p>
  
  <pre><code>// node_modules/@jrg/index.mjs
  import { string } from 'rollup-plugin-string';
  
  const myString = string({
    include: "**/*.(html|css|svg)"
  })
  
  const getMJS = function(pkg, plugins){
    plugins = plugins || [ ];
    plugins.push(myString);
    return {
      input: pkg.src,
      plugins: plugins,
      external: ['ms'],
      output: [
        {
          file: pkg.main,
          format: 'esm'
        }
      ]
    }
  };
  export { getMJS };
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>So it does work if I use the CJS version like this...</p>
  
  <pre><code>import * as build from "@jrg/build/dist/index.cjs"
  
  export default [build.getMJS(pkg)];
  </code></pre>
  
  <p>But if I try changing to <code>rollup.config.mjs</code> and running <code>rollup -c rollup.config.mjs</code> I get...</p>
  
  <pre><code>[!] TypeError: defaultLoader is not a function
  </code></pre>