Q: Node modules in child-theme I am currently trying to connect with a Supabase api and want to do this in a wordpress envoirtment.
I added the node modules by installing them with visual studio code.
nextup I added the code so I can get to the package.
And the connection.
I am now getting the following errors.
-GEThttps://websites.bentbecker.nl/wp-content/plugins/var/www/vhosts/bentbecker.nl/websites.bentbecker.nl/wp-content/themes/Impreza-child/node_modules/@supabase/supabase-js/dist/main/index.js?ver=2.2.3
[HTTP/3 404 Not Found 18ms]

-import declarations may only appear at top level of a module

This is my functions.php file

$package = file_get_contents(__DIR__ . '/package.json');

$package = json_decode($package, true);

foreach ($package['dependencies'] as $dep => $version) {
    $subpackage = file_get_contents(__DIR__ . "/node_modules/$dep/package.json");
    $subpackage = json_decode($subpackage, true);

    $use = 'main';

    if (isset($subpackage['browser'])) {
        $use = 'browser';
    }

    if (isset($subpackage[$use])) {
        $deps = array();

        if (strpos($dep, 'jquery') !== false) {
            $deps[] = 'jquery';
        }

        wp_enqueue_script("node_module-$dep", plugin_dir_url(__FILE__) . "node_modules/$dep/" . $subpackage[$use], $deps, $subpackage['version']);
    }

    if (isset($subpackage['style'])) {

        wp_enqueue_style("node_module-$dep", plugin_dir_url(__FILE__) . "node_modules/$dep/" . $subpackage['style']);
    }
}

?>

<script>
    
import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('MY LINK', 'MY PUBLIC KEY')


</script>



A: You are calling your node module files from the url defined by plugin_dir_url(__FILE__) which is looking for the file functions.php inside a plugin.
Ideally you should use get_template_directory_uri()
wp_enqueue_script("node_module-$dep", get_template_directory_uri() . "/node_modules/$dep/" . $subpackage[$use], $deps, $subpackage['version']);

and
wp_enqueue_style("node_module-$dep", get_template_directory_uri() . "/node_modules/$dep/" . $subpackage['style']);

to add script attributes:
add_filter( 'script_loader_tag', 'add_module_to_script', 10, 3 );

    function add_module_to_script( $tag, $handle, $source ) {
        if ( "node_module-$dep" === $handle ) {
            $tag = '<script type="text/javascript" src="' . $source . '" type="module"></script>';
        }

        return $tag;
    }

