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

This error occurs because the import statement is not at the top level of the module. To fix this, you can either move the import statement to the top of the file or use a module bundler like Webpack to handle the imports.

If you're using Laravel Mix, you can add the following code to your webpack.mix.js file to enable ES6 imports:

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

This will enable dynamic imports in your JavaScript files.

Alternatively, you can use the require() function to import modules:

const axios = require('axios');

This should work without any issues.