amplify-js: importing 'aws-amplify-react', ERROR: Uncaught SyntaxError: Unexpected token :

Describe the bug Trying to import aws-amplify-react into an electron-react-boilerplate component yields the following error in the electron browser: vm.js:74 Uncaught SyntaxError: Unexpected token : at new Script (vm.js:74) at createScript (vm.js:246) at Object.runInThisContext (vm.js:298) at Module._compile (internal/modules/cjs/loader.js:678) at Object.Module._extensions..js (internal/modules/cjs/loader.js:722) at Module.load (internal/modules/cjs/loader.js:620) at tryModuleLoad (internal/modules/cjs/loader.js:559) at Function.Module._load (internal/modules/cjs/loader.js:551) at Module.require (internal/modules/cjs/loader.js:658) at require (internal/modules/cjs/helpers.js:20)

To Reproduce Steps to reproduce the behavior:

  1. Install electron-react-boilerplate
  2. Import ‘aws-amplify-react’ in a component.
  3. yarn dev
  4. Electron app starts but page breaks. Blank page and browser error.

Expected behavior Have module be imported and have my component/react app working and displaying.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Electron (Chrome)

Additional context A maintainer of electron-react-boilerplate said it may be related to requiring CSS or something. Not sure. https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2040#issuecomment-443488171

Does anyone have an idea?

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 7
  • Comments: 15 (3 by maintainers)

Most upvoted comments

hey @robbylucia,

Wouldn’t want you to have to start over.

The main problem is that the build process is not recognizing/loading .css files. Here is an alternative work around: If you are using that electron boilerplate, you should be able to add a css loader to the webpack configuration: https://github.com/webpack-contrib/css-loader.

We need to add a similar process to our react package for this to be a permanent fix. This requires us to have a bundler. I have started to test out a few bundlers for this. This is a high priority item that should be fixed within the next month. I will update this as soon as this change has been made.

You can get UMD build using CDN e.g. https://unpkg.com/aws-amplify@1.1.7/dist/aws-amplify.min.js

You will then use it in a script tag like this:

<script src="https://unpkg.com/aws-amplify@1.1.7/dist/aws-amplify.min.js" crossorigin="anonymous"></script>