Solution 1 :

Your code is not compatible with RequireJS which uses AMD – Asynchronous Module Definition.

AMD format looks like this:

define(['@google-cloud/storage'], (storage) {
  // body of your module here

The question is whether '@google-cloud/storage' is AMD compatible.

The simplest solution here would be to use more modern tooling like webpack or just use native ES6 modules if you support Chrome browser only

Problem :

I am getting this error Module name "@google-cloud/vision" has not been loaded yet for context: _. Use require([]) ,when I run my project I have included require.js in my project and also the script tag in my html file <script data-main = "./app.js" src = "./libs/require.js"></script> , I went through many articles on require.js but couldn’t understand what is the actual use of it and how I can resolve this error .

I also went through this thread on StackOverFlow but couldn’t understand
Dynamic require in RequireJS, getting “Module name has not been loaded yet for context” error?

Here’s my code

//UPLOAD IMAGE to cloud bucket
function showResults(){
const bucketName = //name-of-bucket;
 const filename = './img2.jpg';

// Imports the Google Cloud client library
const {Storage} = require('@google-cloud/storage');

// Creates a client
const storage = new Storage();

async function uploadFile() {
  // Uploads a local file to the bucket
  await storage.bucket(bucketName).upload(filename, {
    // Support for HTTP requests made with `Accept-Encoding: gzip`
    gzip: true,
    // By setting the option `destination`, you can change the name of the
    // object you are uploading to a bucket.
    metadata: {
      // Enable long-lived HTTP caching headers
      // Use only if the contents of the file will never change
      // (If the contents will change, use cacheControl: 'no-cache')
      cacheControl: 'public, max-age=31536000',

  console.log(`${filename} uploaded to ${bucketName}.`);