Uncaught SyntaxError: Can’t use import assertion outdoors a module

I making a dynamic customized slideshow block and in my PHP I’m executing a callback which generates the HTML on the frontend of the location like so:

operate slideshow_callback( $block_attributes, $content material ) {
    ob_start();
    ?>
    <div class="container">
        <p>Take a look at</p>
    </div>
    <?php
    return ob_get_clean();
}

In my index.js file I’m registering the block and enqueueing on the PHP:

operate slideshow_block() {
 
    // mechanically load dependencies and model
    $asset_file = embrace( plugin_dir_path( __FILE__ ) . 'construct/index.asset.php');
 
    wp_register_script(
        'slideshow-block',
        plugins_url( 'construct/index.js', __FILE__ ),
        $asset_file['dependencies'],
        $asset_file['version']
    );

That is all cool and good thus far. I would really like embrace a separate JavaScript file modify.js which is able to permit me to change the contents of the div container on the location’s frontend. So I did wp_register_script() once more however this time utilized it to modify.js:

wp_register_script(
        'slideshow-modify',
        plugins_url( 'src/modify.js', __FILE__ ),
        $asset_file['dependencies'],
        $asset_file['version']
    );

    register_block_type( 'myguten-block/slideshow-block', array(
        'api_version' => 2,
        'editor_script' => 'slideshow-block',
        'script' => 'slideshow-modify',
        'render_callback' => 'slideshow_callback'
    ) );

In modify.js, I did a fast console.log('Good day world') to verify the file is definitely being executed by the frontend. It really works and throws that message within the console.

Nonetheless, now I wished to import wp strategies in order that I’m able to use them to seize knowledge of all of the posts that had been made on my website domestically so I did:

import { useSelect } from '@wordpress/knowledge';

//console.log("Hello World")
const divElement = doc.querySelector("#container");
const posts = useSelect( (choose) => {
    return choose( 'core' ).getEntityRecords( 'postType', 'submit' );
}, [] );
console.log(posts);

After I do this and return to my website. It could throw an error within the console: Uncaught SyntaxError: Can't use import assertion outdoors a module. I’ve tried to manually setting modify.js as a module with <script kind = "module"> however then it says it couldn’t find modify.js. I’ve tried going into my package deal.json including "type": "module" and it nonetheless doesn’t work. What am I doing mistaken and the way would I treatment this situation?