url.URL is not a constructor

[adisaxena09]

package.json { "name": "name", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/icons": "^4.7.0", "@google-cloud/storage": "^6.9.5", "@react-keycloak/web": "^3.4.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "@types/jest": "^26.0.24", "@types/node": "^12.20.27", "@types/react": "^17.0.27", "@types/react-color": "^3.0.6", "@types/react-dom": "^17.0.9", "@types/react-image-gallery": "^1.0.5", "@types/react-redux": "^7.1.18", "@types/redux": "^3.6.0", "antd": "^4.16.13", "axios": "^0.22.0", "classnames": "^2.3.2", "color-scales": "^3.0.2", "customize-cra": "^1.0.0", "file-saver": "^2.0.5", "highcharts": "^9.3.0", "highcharts-react-official": "^3.1.0", "js-yaml": "^4.1.0", "keycloak-js": "^16.1.1", "less-loader": "^5.0.0", "lodash": "^4.17.21", "moment": "^2.29.2", "react": "^17.0.2", "react-app-rewire-less": "^2.1.3", "react-app-rewired": "^2.1.8", "react-color": "^2.19.3", "react-dom": "^17.0.2", "react-image-gallery": "^1.2.7", "react-image-lightbox": "^5.1.4", "react-joyride": "^2.3.2", "react-lazyload": "^3.2.0", "react-redux": "^7.2.5", "react-responsive-carousel": "^3.2.23", "react-router": "^5.2.1", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "react-use-websocket": "^3.0.0", "react-zoom-pan-pinch": "^2.1.3", "redux": "^4.1.1", "redux-persist": "^6.0.0", "redux-saga": "^1.1.3", "sheetjs-style": "^0.15.8", "typescript": "^4.4.3", "web-vitals": "^1.1.2" }, "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired --max_old_space_size=4096 build", "test": "react-app-rewired test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/file-saver": "^2.0.5", "@types/js-yaml": "^4.0.5", "@types/lodash": "^4.14.176", "@types/react-lazyload": "^3.2.0", "@types/react-router": "^5.1.17", "@types/react-router-dom": "^5.3.0", "@typescript-eslint/eslint-plugin": "^5.1.0", "@typescript-eslint/parser": "^5.1.0", "eslint": "^7.32.0", "eslint-plugin-import": "^2.25.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.26.1", "eslint-plugin-react-hooks": "^4.2.0", "less": "^4.1.2", "prettier": "2.4.1", "react-app-rewire-less-modules": "^1.3.0" } }

---

• OS: Windows 10
• Node.js version: 14.21.3
• npm version: 6.14.8
• @google-cloud/storage version: 6.12.0

Steps to reproduce

const storage = new Storage({ credentials: { 'type': 'service_account',

  'private_key':
    '-----BEGIN PRIVATE KEY-----\n-----END PRIVATE KEY-----\n',
  'client_email': 'client_email',
  'client_id': 'client_id',
},

}); const getImg = async () => { try { const [url] = await storage .bucket(bucketName) .file('file.png') .getSignedUrl({ version: 'v4', action: 'read', expires: Date.now() + 100 60 1000, contentType: 'image/*', });

} catch (error) {
  console.error('signed url creation error', error);
}

}; getImg();

TypeError: url.URL is not a constructor at URLSigner.getSignedUrlV4 (signer.js:131:1) at URLSigner.getSignedUrl (signer.js:76:1) at File.getSignedUrl (file.js:2225:1) at index.js:57:1 at new Promise () at File.wrapper (index.js:42:1) at getImg (ClientDashboard.tsx:128:1) at ClientDashboard (ClientDashboard.tsx:149:1) at renderWithHooks (react-dom.development.js:15020:1) at mountIndeterminateComponent (react-dom.development.js:17811:1) at beginWork (react-dom.development.js:19049:1) at beginWork$1 (react-dom.development.js:23940:1) at performUnitOfWork (react-dom.development.js:22776:1) at workLoopSync (react-dom.development.js:22707:1) at renderRootSync (react-dom.development.js:22670:1) at performSyncWorkOnRoot (react-dom.development.js:22293:1) at react-dom.development.js:11327:1 at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1) at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1) at flushSyncCallbackQueue (react-dom.development.js:11309:1) at discreteUpdates$1 (react-dom.development.js:22420:1) at discreteUpdates (react-dom.development.js:3756:1) at dispatchDiscreteEvent (react-dom.development.js:5889:1)

Getting this error.

[ddelgrosso1]

@adisaxena09 looking at your dependencies / scripts it appears you are attempting to use this library in a browser application is that accurate?

[adisaxena09]

yes

[ddelgrosso1]

@adisaxena09 unfortunately at this time this library is only meant for use in server side, NodeJS applications. Running in a browser is not something we currently support but we are looking into the possibility of adding support in the future.

Looking at your code above my suggestion would be to generate the signed url from a server side Node API and that URL can be passed client / browser side where any HTTP library should be able to call it.

[ddelgrosso1]

Going to close this issue. If there are any other questions / concerns, feel free to reopen.