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

[robbylucia]

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?

[barrypeterson]

Having this same issue with the electron-react-boilerplate and amplify. After taking a quick look, @aws-amplify/ui/dist/style.css is actually postcss, not css. This is then required by aws-amplify-react/dist/Amplify-UI/Amplify-UI-Components-React.js

[jordanranz]

Hi @robbylucia,

We may need to bundle our css in the react package with something like rollup for it to properly work with that electron boilerplate package. I will look into what is required for this.

As a workaround you should be able to spin up a create-react-app and then add electron to it. Here is an example article tutorial:
https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c

@barrypeterson The files in src/ are indeed PostCSS but the listed file @aws-amplify/ui/dist/style.css is still a plain css as it has been compiled using webpack.

[cgarvis]

I found a workaround here: https://github.com/zeit/next-plugins/issues/267#issuecomment-436454048

[robbylucia]

Hey @cgarvis , thanks for that, although I'm having trouble figuring out where to put this fix for a production build of electron. It only fixes the problem in dev when I place it at the top of babel.config.js, prod is still an issue for me. Any ideas?

[robbylucia]

As a workaround you should be able to spin up a create-react-app and then add electron to it. Here is an example article tutorial:
https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c

Hey @jordanranz ,
thanks for the suggestion, but I've already rebuilt my project a few times while encountering issues, so I'm averse to starting over again. Is there another workaround? I have everything in my project ready to go, it's just I can't utilize Amplify if I can't import it, and I'd hate to have to switch to something else so far along in my project.

[jordanranz]

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.

[JoWolp]

Hi @jordanranz,
Thank for working on this issue.
I am currently using the same setup as @robbylucia described with the react-electron-boilerplate, but I'm stuck at the error issued here.

Can you or someone else maybe elaborate more on the css loader workaround you mentioned?

[patotoma]

I stumbled upon this issue myself, workaround for me was to use UMD build instead.

[aldegoeij]

@patotoma sorry, could you elaborate on what the UMD build is and where to get it?
I have the same issue using gatsby, including Amplify breaks the build...

[aldegoeij]

@sammartinez @jordanranz what would be the current workaround for this issue? I'm having similar problems using plain import Amplify from ""aws-amplify" using Gatsby: https://github.com/dabit3/gatsby-auth-starter-aws-amplify/issues/21

[patotoma]

You can get UMD build using CDN e.g. https://unpkg.com/[email protected]/dist/aws-amplify.min.js

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

<script src="https://unpkg.com/[email protected]/dist/aws-amplify.min.js" crossorigin="anonymous"></script>

[kkumar4]

any update on this issue ?

[xpopov]

The issue with electron-react-boilerplate is still there. It seems that aws-amplify-react uses basic TS:
"build": "npm run clean && tsc -p .", and when it imports CSS file, it transpiles to require(). Webpack configuration for electron-react-boilerplate does not support this, and css in the /dist seems to be in the same format as in the /src.

I've found workaround for this (not sure if it works in production).
I've moved aws-amplify-react to devDependencies, it removed the original error, but now aws-amplify is missing CSS styles.

Then I've just added @import '~@aws-amplify/ui/dist/style.css'; to app.global.css, and CSS was added into the project.

Probably the fix could be using proper CSS transpiler.

[sammartinez]

This was resolved back in March. Please let us know if you are still having issues.