I'm a little baffled at this one, so here goes:
I'm trying to do a React application with a search bar that will call on Google's Natural Language API (https://cloud.google.com/natural-language/) ,and as part of that I of course installed the '@google-cloud/language' package. However, the moment I try to require it within any of the files (my specific case is const Language = require('@google-cloud/language');) and then try to run webpack-dev-server, it it can't find... I think any of my modules? It's literally just a giant wall of "Module not found" errors, such as
Error in ./~/grpc/~/node-pre-gyp/lib/info.js
Module not found: 'aws-sdk' in /home/amberb/projects/project-ui/node_modules/grpc/node_modules/node-pre-gyp/lib
@ ./~/grpc/~/node-pre-gyp/lib/info.js 14:14-32
Error in ./~/grpc/~/node-pre-gyp/lib/publish.js
Module not found: 'aws-sdk' in /home/amberb/projects/project-ui/node_modules/grpc/node_modules/node-pre-gyp/lib
@ ./~/grpc/~/node-pre-gyp/lib/publish.js 17:14-32
Error in ./~/grpc/~/node-pre-gyp/lib/unpublish.js
Module not found: 'aws-sdk' in /home/amberb/projects/project-ui/node_modules/grpc/node_modules/node-pre-gyp/lib
@ ./~/grpc/~/node-pre-gyp/lib/unpublish.js 15:14-32
Error in /usr/lib/~/npm/bin/npm-cli.js
Module parse failed: /usr/lib/node_modules/npm/bin/npm-cli.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
@ /usr/lib/~/npm/lib/npm.js 453:4-32
Error in /usr/lib/~/npm/~/opener/opener.js
Module parse failed: /usr/lib/node_modules/npm/node_modules/opener/opener.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
@ /usr/lib/~/npm/lib/auth/sso.js 4:13-30
Error in /usr/lib/~/npm/~/JSONStream/index.js
Module parse failed: /usr/lib/node_modules/npm/node_modules/JSONStream/index.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
@ /usr/lib/~/npm/lib/search/all-package-metadata.js 12:17-38
Error in /usr/lib/~/npm/~/npm-registry-client/lib/initialize.js
Module not found: 'json' in /usr/lib/node_modules/npm/node_modules/npm-registry-client/lib
@ /usr/lib/~/npm/~/npm-registry-client/lib/initialize.js 5:10-36
Error in /usr/lib/~/npm/~/validate-npm-package-name/index.js
Module not found: 'json' in /usr/lib/node_modules/npm/node_modules/validate-npm-package-name
@ /usr/lib/~/npm/~/validate-npm-package-name/index.js 4:15-34
Error in /usr/lib/~/npm/~/pacote/lib/util/opt-check.js
Module not found: 'json' in /usr/lib/node_modules/npm/node_modules/pacote/lib/util
(this continues for some time)
This does not happen whenever I don't include @google-cloud/language. I can't seem to find any explanation as to what might be doing this. Does anyone know something I could at least try?
Edited to add: After this question came up as a recommended related question, I tried adding
externals: {
'@google-cloud/language': 'commonjs @google-cloud/language'
}
in to my webpack config file, but that only results in my page not loading and giving me webpack:///external_%22@google-cloud/language%22?:1 Uncaught ReferenceError: require is not defined. I'm somewhat new to Webpack still, so I'm positive I'm missing something, but I'm not sure what.
If anyone else came here with an issue like this, the problem was ultimately that I was trying to include this package that should not have really been included on the front-end within the front end. We split it off into our back-end API gateway and are calling it from within the front end. As a rule, functionality which makes any API call for which you have to provide authentication and which may incur use costs should be split off into a separate back-end service/function.