Gutenberg: Import names aren't validated before writing dependency file

[iandunn]

Describe the bug

dependency-extraction-webpack-plugin doesn't validate import names. If an invalid name is used, the parent script will silently fail to load, which can be confusing and time-consuming to fix.

Expected behavior

The watch script should throw an error to the console, to alert the dev that they used an invalid dependency.

To reproduce

1. Enqueue a script that depends on a deps.json file. e.g.,

wp_enqueue_script(
    'foo',
    plugins_url( 'dist/foo.js', __FILE__ ),
    json_decode( file_get_contents( __DIR__ . '/dist/foo.deps.json' ) ),
);

1. Make a type in an import statement. e.g.,

import { Button } from '@wordpress/component'; // missing an `s` at the end

1. Load the page where the script should be enqueue, notice that it's no longer there.

[gziolo]

It seems like this should be handled on the linter side instead. Well, at least this is what we introduced in Gutenberg lately with “import/no-extraneous-dependencies” rule in https://github.com/WordPress/gutenberg/pull/16969. It’s handled per package and only for non-test files in Gutenberg but it might be a good idea to set it in recommended config of ESLint and override in the project as Gutenberg is a special case here. @nerrad, @ntwb, and @swissspidy what do you think?

[nerrad]

Ya I agree, linter. A couple IDE's I've used will also warn on invalid imports.

[gziolo]

~My attempt to enable ESLint rule in https://github.com/WordPress/gutenberg/pull/20905 didn’t work as expected 🙁~

It looks like the bug was fixed and it has landed in Gutenberg. Next step is to move it to the ESLing plugin.