rollup in watch mode building with two versions of rollup - rollup

Question

I have an odd problem as of late. When I run rollup -cw, Rollup bundles my app with Rollup v2.2.0. Everything's fine.
rollup v2.2.0
bundles ./src/index.html → build...
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:8000
External: http://10.0.0.13:8000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: build
[Browsersync] Watching files...
(!) Circular dependencies
src/apollo/client.js -> src/apollo/resolvers/index.js -> src/apollo/resolvers/Query.js -> src/router/router.js -> src/apollo/auth.js -> src/apollo/client.js
node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/select.js -> node_modules/d3-selection/src/selection/index.js
node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/selectAll.js -> node_modules/d3-selection/src/selection/index.js
...and 17 more
(!) Generated an empty chunk
index
created build in 30.8s
[2020-03-26 23:42:30] waiting for changes...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers... (buffered 302 events)
But if I subsequently save a file, rollup will bundle the app with rollup v1.31.1
rollup v1.31.1
bundles ./src/index.html → build, build/nomodule...
bundles ./src/index.html → build, build/nomodule...
bundles ./src/index.html → build, build/nomodule...
bundles ./src/index.html → build...
[!] (plugin copy) Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
[!] (plugin copy) Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
[!] (plugin copy) Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
[!] (plugin Rollup Core) Error: Could not load /path/to/the-app/node_modules/#material/mwc-fab/node_modules/#material/mwc-ripple/ripple-directive.js (imported by /path/to/the-app/node_modules/#material/mwc-fab/mwc-fab-base.js): ENOENT: no such file or directory, open '/path/to/the-app/node_modules/#material/mwc-fab/node_modules/#material/mwc-ripple/ripple-directive.js'
Error: Could not load /path/to/the-app/node_modules/#material/mwc-fab/node_modules/#material/mwc-ripple/ripple-directive.js (imported by /path/to/the-app/node_modules/#material/mwc-fab/mwc-fab-base.js): ENOENT: no such file or directory, open '/path/to/the-app/node_modules/#material/mwc-fab/node_modules/#material/mwc-ripple/ripple-directive.js'
(!) Circular dependencies
src/apollo/client.js -> src/apollo/resolvers/index.js -> src/apollo/resolvers/Query.js -> src/router/router.js -> src/apollo/auth.js -> src/apollo/client.js
node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/select.js -> node_modules/d3-selection/src/selection/index.js
node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/selectAll.js -> node_modules/d3-selection/src/selection/index.js
...and 17 more
(!) Generated an empty chunk
index
created build in 31s
[2020-03-26 23:44:09] waiting for changes...
[Browsersync] Reloading Browsers...
Note that this second build also builds the production version (nomodule)
I don't have rollup v1.31.1 installed in this repo
AFAICT I have no packages that require rollup v1.31.1
> npm ls rollup
the-app#0.1.0 /path/to/the-app
├─┬ #open-wc/demoing-storybook#1.13.8
│ └── rollup#1.32.1
├── UNMET PEER DEPENDENCY rollup#2.2.0
└─┬ rollup-plugin-workbox#5.0.1
└─┬ workbox-build#5.0.0
└── rollup#1.32.1
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-alias#3.0.1
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-beep#0.1.2
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-commonjs#11.0.2
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-json#4.0.2
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-node-resolve#7.1.1
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-replace#2.3.1
npm ERR! peer dep missing: rollup#^0.65.2 || ^1.0.0, required by rollup-plugin-minify-html-literals#1.2.3
npm ERR! peer dep missing: rollup#^1.4.1, required by rollup-plugin-notify#1.1.0
I don't have rollup installed globally, having run yarn global remove rollup and npm r -g rollup
Here's my rollup.config.js
import dotenv from 'dotenv';
import path from 'path';
import alias from '#rollup/plugin-alias';
import beep from '#rollup/plugin-beep';
import commonjs from '#rollup/plugin-commonjs';
import json from '#rollup/plugin-json';
import replace from '#rollup/plugin-replace';
import resolve from '#rollup/plugin-node-resolve';
import { generateSW } from 'rollup-plugin-workbox';
import { terser } from 'rollup-plugin-terser';
import babel from 'rollup-plugin-babel';
import browsersync from 'rollup-plugin-browsersync';
import copy from 'rollup-plugin-copy';
import graphql from '#kocal/rollup-plugin-graphql';
import html from '#open-wc/rollup-plugin-html';
import litcss from 'rollup-plugin-lit-css';
import minifyLitHtml from 'rollup-plugin-minify-html-literals';
import notify from 'rollup-plugin-notify';
import watchAssets from 'rollup-plugin-watch-assets';
dotenv.config();
const PROCESS_WATCHING =
!!(process.argv.some(arg => !!arg.match(/-c?w/)) || process.argv.includes('--watch'));
const production = !PROCESS_WATCHING && process.env.NODE_ENV === 'production';
const replaceConfig = {
...redacted
};
const targets = [
{ src: 'node_modules/systemjs/dist', dest: 'build/assets/systemjs' },
{ src: 'node_modules/#webcomponents', dest: 'build/assets' },
{ src: 'src/favicon.ico', dest: 'build' },
{ src: 'src/favicon.ico', dest: 'build' },
{ src: 'src/manifest.webmanifest', dest: 'build' },
{ src: 'src/assets', dest: 'build' },
{ src: 'src/components/shared.css', dest: 'build' },
{ src: 'src/index.html', dest: 'build' },
{ src: 'src/*.css', dest: 'build' },
];
const customResolver = resolve({
extensions: ['.js', '.json', '.html', '.graphql', '.css'],
dedupe: id => id.includes('lit'),
});
const entries = [{
find: /#(.*)\/(.*)\b/,
replacement: path.resolve(__dirname, 'src/$1/$2'),
}, {
find: /#(.*)\b/,
replacement: path.resolve(__dirname, 'src/$1'),
}];
const esmOutput = {
format: 'esm',
dir: 'build',
sourcemap: true,
};
const nomoduleOutput = {
format: 'system',
dir: 'build/nomodule',
sourcemap: true,
};
const productionOutput = [esmOutput, nomoduleOutput].map(output => ({
...output,
plugins: [
terser(),
minifyLitHtml(),
generateSW(require('./workbox-config.js')),
],
}));
export default {
input: './src/index.html',
output: production ? productionOutput : esmOutput,
watch: {
include: 'src/**',
clearScreen: false,
},
plugins: [
html({ minify: production }),
babel(),
graphql(),
json(),
litcss({ uglify: production }),
customResolver,
alias({ entries, customResolver }),
replace(replaceConfig),
commonjs({ sourceMap: false }),
copy({ targets, copyOnce: PROCESS_WATCHING }),
...PROCESS_WATCHING ? [
watchAssets({ assets: ['src/**/*.html', 'src/**/*.css'] }),
browsersync({
port: 8000,
server: 'build',
single: true,
watch: true,
watchOptions: {
awaitWriteFinish: {
ignoreInitial: true,
stabilityThreshold: 2000,
pollInterval: 100,
ignore: '/assets/**/*',
},
},
}),
] : [],
beep(),
notify(),
],
// Don't warn about `this` - typescript produces these.
onwarn(warning, warn) {
if (warning.code === 'THIS_IS_UNDEFINED') return;
warn(warning);
},
};
What I've Tried
I've tried downgrading to rollup 1.32
I've tried npm dedupe rollup
I've tried yarn global remove rollup
I've tried rm -rf node_modules ; rm package-lock.json ; npm i
I've tried commenting out these plugins:
watchAssets
browsersync
copy
beep
notify
html
I've tried adding this plugin:
{
name: 'sanity-check',
buildStart() {
if (production) console.log('HEY!!!! IT\'S PRODUCTION');
},
},
No logs appeared
No dice.
What is causing this double-build behaviour, and where is rollup 1.31.1 coming from?
Update
Grepping node_modules for 1.31.1 produced this result
$ rg "1\.31\.1" node_modules/#surma
node_modules/#surma/rollup-plugin-off-main-thread/package.json
55: "rollup": "1.31.1"
$ npx npm-why #surma/rollup-plugin-off-main-thread
npx: installed 4 in 1.141s
Who required #surma/rollup-plugin-off-main-thread:
my-pwa > rollup-plugin-workbox > workbox-build > #surma/rollup-plugin-off-main-thread#1.2.0
So perhaps this error is caused by #surma/rollup-plugin-off-main-thread's pinning rollup to a specific version.
What I don't understand is how that makes it possible for npm to reference two rollup bins