Build Tooling: Watch task can produce error when many files change (ENAMETOOLONG)

[aduth]

Recently I've observed that in changing branches, the process which runs npm run dev will halt with an error:

[1] Error: ENAMETOOLONG: name too long, mkdir '/Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-editor/build/components/provider/index.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-editor/src/components/rich-text/index.native.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-editor/src/components/rich-text/list-edit.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-editor/src/components/rich-text/list-edit.native.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-editor/src/components/rich-text/style.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-editor/src/components/url-popover/index.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-editor/src/store/reducer.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-editor/src/store/selectors.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/button/style.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/columns/editor.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/cover/style.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/editor.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/group/edit.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/group/editor.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/group/index.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/group/theme.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/index.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/paragraph/style.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/shortcode/edit.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/shortcode/editor.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/theme.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/block-library/src/video/edit.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/blocks/src/api/parser.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/dom/src/dom.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/edit-post/src/components/header/style.scss /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/format-library/src/link/inline.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/rich-text/src/is-active-list-type.js /Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/packages/rich-text/src'
[1]     at Object.mkdirSync (fs.js:752:3)
[1]     at Function.sync (/Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/node_modules/mkdirp/index.js:71:13)
[1]     at buildJsFileFor (/Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/bin/packages/build.js:169:9)
[1]     at buildJsFile (/Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/bin/packages/build.js:101:2)
[1]     at Set.forEach (<anonymous>)
[1]     at buildFiles (/Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/bin/packages/build.js:90:21)
[1]     at Object.<anonymous> (/Users/andrew/Documents/Code/vvv/www/editor/htdocs/wp-content/plugins/gutenberg/bin/packages/build.js:214:2)
[1]     at Module._compile (internal/modules/cjs/loader.js:701:30)
[1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
[1]     at Module.load (internal/modules/cjs/loader.js:600:32)

I expect the issue here is that we group many file updates into a single rebuild which is run after a 100ms delay:

gutenberg/bin/packages/watch.js

Lines 67 to 75 in aac1a37

	setInterval( () => {
	const files = Array.from( filesToBuild.keys() );
	if ( files.length ) {
	filesToBuild = new Map();
	try {
	execSync( `${ BUILD_CMD } \"${ files.join( ' ' ) }\"`, { stdio: [ 0, 1, 2 ] } );
	} catch ( e ) {}
	}
	}, 100 );

For some reason, this appears to be used in the build step when creating the target directory for the built file:

gutenberg/bin/packages/build.js

Line 169 in aac1a37

mkdirp.sync( path.dirname( destPath ) );

I would expect this should only be using an individual file's directory, not the full set of changed files. It's unclear to me why it does, or if there are other ramifications to the fact that buildJsFileFor might be receiving a file argument of multiple files.

[ellatrix]

I've seen this error too:

[1] Error: ENAMETOOLONG: name too long, mkdir '/Users/ella/gutenberg/packages/block-library/build/button/index.js /Users/ella/gutenberg/packages/block-library/src/cover/index.js /Users/ella/gutenberg/packages/block-library/src/gallery/edit.js /Users/ella/gutenberg/packages/block-library/src/gallery/index.js /Users/ella/gutenberg/packages/block-library/src/group/index.js /Users/ella/gutenberg/packages/block-library/src/heading/index.js /Users/ella/gutenberg/packages/block-library/src/html/index.js /Users/ella/gutenberg/packages/block-library/src/image/index.js /Users/ella/gutenberg/packages/block-library/src/latest-comments/index.js /Users/ella/gutenberg/packages/block-library/src/latest-posts/index.js /Users/ella/gutenberg/packages/block-library/src/legacy-widget/index.js /Users/ella/gutenberg/packages/block-library/src/list/index.js /Users/ella/gutenberg/packages/block-library/src/media-text/deprecated.js /Users/ella/gutenberg/packages/block-library/src/media-text/index.js /Users/ella/gutenberg/packages/block-library/src/missing/index.js /Users/ella/gutenberg/packages/block-library/src/more/index.js /Users/ella/gutenberg/packages/block-library/src/nextpage/index.js /Users/ella/gutenberg/packages/block-library/src/paragraph/index.js /Users/ella/gutenberg/packages/block-library/src/preformatted/index.js /Users/ella/gutenberg/packages/block-library/src/pullquote/edit.js /Users/ella/gutenberg/packages/block-library/src/pullquote/index.js /Users/ella/gutenberg/packages/block-library/src/quote/index.js /Users/ella/gutenberg/packages/block-library/src/rss/index.js /Users/ella/gutenberg/packages/block-library/src/search/index.js /Users/ella/gutenberg/packages/block-library/src/separator/index.js /Users/ella/gutenberg/packages/block-library/src/shortcode/index.js /Users/ella/gutenberg/packages/block-library/src/spacer/index.js /Users/ella/gutenberg/packages/block-library/src/subhead/index.js /Users/ella/gutenberg/packages/block-library/src/tag-cloud/index.js /Users/ella/gutenberg/packages/block-library/src/template/index.js /Users/ella/gutenberg/packages/block-library/src/text-columns/index.js /Users/ella/gutenberg/packages/block-library/src/verse/index.js /Users/ella/gutenberg/packages/block-library/src/video/index.js /Users/ella/gutenberg/packages/core-data/src/actions.js /Users/ella/gutenberg/packages/core-data/src/controls.js /Users/ella/gutenberg/packages/core-data/src/reducer.js /Users/ella/gutenberg/packages/core-data/src/resolvers.js /Users/ella/gutenberg/packages/core-data/src/selectors.js /Users/ella/gutenberg/packages/edit-post/src/components/visual-editor/style.scss /Users/ella/gutenberg/packages/edit-post/src/store/effects.js /Users/ella/gutenberg/packages/block-editor/src/components/block-edit/index.js /Users/ella/gutenberg/packages/block-editor/src/components/block-list/block.js /Users/ella/gutenberg/packages/block-editor/src/components/block-list/index.js /Users/ella/gutenberg/packages/block-editor/src/components/block-list/multi-controls.js /Users/ella/gutenberg/packages/block-editor/src/components/block-list/style.scss /Users/ella/gutenberg/packages/block-editor/src/components/block-mover/index.js /Users/ella/gutenberg/packages/block-editor/src/components/rich-text/index.js /Users/ella/gutenberg/packages/block-editor/src/components/rich-text/index.native.js /Users/ella/gutenberg/packages/block-editor/src/store/actions.js /Users/ella/gutenberg/packages/block-editor/src/store/effects.js /Users/ella/gutenberg/packages/block-editor/src/store/reducer.js /Users/ella/gutenberg/packages/block-editor/src/store'
[1]     at Object.mkdirSync (fs.js:752:3)
[1]     at Function.sync (/Users/ella/gutenberg/node_modules/mkdirp/index.js:71:13)
[1]     at buildJsFileFor (/Users/ella/gutenberg/bin/packages/build.js:169:9)
[1]     at buildJsFile (/Users/ella/gutenberg/bin/packages/build.js:101:2)
[1]     at Set.forEach (<anonymous>)
[1]     at buildFiles (/Users/ella/gutenberg/bin/packages/build.js:90:21)
[1]     at Object.<anonymous> (/Users/ella/gutenberg/bin/packages/build.js:214:2)
[1]     at Module._compile (internal/modules/cjs/loader.js:701:30)
[1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
[1]     at Module.load (internal/modules/cjs/loader.js:600:32)

[ellatrix]

It's definitely this error I'm always running into. Every time I change branches, npm run dev stops working.

[aduth]

I'll plan to work on this on Friday.