Vite compiler dev mode, option to add type = module to all js assets

[brychanmd]

I noticed when trying to import and use an icon library that I could not add imports to the app.js file in the TailPress theme.

I was getting the following console error:

Uncaught SyntaxError: import declarations may only appear at top level of a module in [app.js:1:1](http://localhost:3000/resources/js/app.js)

Noticed that the app.js file was of type text/javascript not module so can't add imports.

Dug into the register assets stuff in the TailPress Framework (ViteCompiler.php) and noticed that you have a filter to apply type = module to the vite client but nothing else, so I removed the if statement and now it's applying type module to the app.js. I can now use module imports in my js resources.

            add_filter('script_loader_tag', function ($tag, $handle) {
                if (in_array($handle, ['vite-client', $this->handle], true)) {
                    $tag = str_replace('<script ', '<script type="module" ', $tag);
                }

                return $tag;
            }, 10, 2);

            add_filter('script_loader_tag', function ($tag) {
                $tag = str_replace('<script ', '<script type="module" ', $tag);
                return $tag;
            }, 10, 2);

Any way to add configuration or something to be able to enqueue js assets as type module?

[joezappie]

@jeffreyvr I also came here to see if there was a built in way to handle js modules.

Typically all you need to do is ensure package.json has a "type": "module" in it. I'd almost expect the default for Vite though to be ESM over CJS.

Another way to give module support, (while less desirable) would be to check for .mjs file extension to enqueue module script:

else if (str_ends_with($asset->path(), '.mjs')) {
                    wp_enqueue_script_module("{$this->handle}-$filename", $url, array_merge($asset->dependencies(), ['vite-client']), null, false);
}

[joezappie]

A workaround without having to modify any tailpress code is to add another script_loader_tag filter. This needs to check if the vite compiler is in dev mode though so it gets added to the ->withCompiler function:

return TailPress\Framework\Theme::instance()
	->assets( fn( $manager ) => $manager
		->withCompiler( new TailPress\Framework\Assets\ViteCompiler, function ($compiler) {
			$compiler
				->registerAsset( 'resources/css/app.css' )
				->registerAsset( 'resources/js/app.js' )
				->editorStyleFile( 'resources/css/editor-style.css' );

			if ( $compiler->isDevServerRunning() ) {
				add_filter( 'script_loader_tag', function ($tag, $handle) {
					if ( strpos( $tag, 'module' ) === false && str_starts_with( $handle, 'tailpress' ) ) {
						$tag = str_replace( '<script ', '<script type="module" ', $tag );
					}
					return $tag;
				}, 11, 2 );
			}
		} )
		->enqueueAssets()
	)

Since it would potentially be a breaking change to make all scripts modules in dev mode, maybe the ViteCompiler class should have an opt in function to do this:

->withCompiler( new TailPress\Framework\Assets\ViteCompiler, fn( $compiler ) => $compiler
	->enableModuleScripts(),
	->registerAsset( 'resources/css/app.css' )
	->registerAsset( 'resources/js/app.js' )