Uncaught SyntaxError: import declarations may only appear at top level of a module

The error message "import declarations may only appear at top level of a module" means that the import statement should be at the top level of the file, not inside a function or a block.

To fix this error, move the import statement to the top of the file, before any other code:

<script>
    import axios from 'axios';

    // rest of the code
</script>

If you are using Laravel Mix to compile your JavaScript code, make sure that you have enabled the ES6 module syntax in your webpack.mix.js file:

mix.js('resources/js/app.js', 'public/js')
   .babelConfig({
       plugins: ['@babel/plugin-syntax-dynamic-import']
   });

This will enable the dynamic import syntax, which allows you to import modules using the import() function.