search

t3chnoboy / amazon-product-api

:credit_card: Amazon Product Advertising API client
365 stars 104 forks source link

Is amazon-product-api compatible with the browser? #66

Closed Makdash49 closed 7 years ago

Makdash49 commented 7 years ago

I would like to incorporate the amazon-product-api into a React app I have created. Is that possible? I'm getting a lot of errors when I run webpack.

See below. Thanks!

ERROR in ./~/tough-cookie/package.json
Module parse failed: /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/tough-cookie/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)
    at Parser.pp$4.raise (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseBlock (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$1.parseStatement (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:709:33)
    at Parser.pp$1.parseTopLevel (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at DependenciesBlock.onLoadPitchDone (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at DependenciesBlock.loadPitch (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
    at DependenciesBlock.doBuild (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
    at DependenciesBlock.build (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/NormalModule.js:84:14)
    at Compilation.buildModule (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/Compilation.js:126:9)
    at /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/Compilation.js:309:10
    at /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/NormalModuleFactory.js:58:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/tapable/lib/Tapable.js:75:69)
    at onDoneResolving (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/NormalModuleFactory.js:38:11)
    at onDoneResolving (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/NormalModuleFactory.js:121:6)
    at /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/NormalModuleFactory.js:116:7
    at /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/node_modules/async/lib/async.js:52:16
 @ ./~/tough-cookie/lib/cookie.js 38:14-40

ERROR in ./~/mime-db/db.json
Module parse failed: /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/mime-db/db.json Unexpected token (2:40)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:40)
    at Parser.pp$4.raise (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseBlock (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$1.parseStatement (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:709:33)
    at Parser.pp$1.parseTopLevel (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/markmcquillen/Desktop/UdemyReact/extendingReactTodo/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)
 @ ./~/mime-db/index.js 11:17-37
iddan commented 7 years ago

As much as I know you have to use a secret key to query Amazon which you can't use client side (as it will be completely public). As of your specific error you just need to add json-loader to your webpack conf.

cbdeveloper commented 5 years ago

@Makdash49 how did you solve this? I was thinking about doing the same, but I think it's not possible because of cross-origin (CORS) policy.

arhoy commented 4 years ago

(as it will be completely public).

I don't understand what you mean by completely public? You can you environment variables to hide the keys, how is that any different than using it server side? Thank you

arhoy commented 4 years ago

How can I solve this then? If I am rendering server side, than I can create an API which calls Amazons API on the backend. Then use my API on the front end of my React App?Is that the correct way? Thank you!