Getting error when implement to nextJs

[louiskhenghao]

Describe the bug

I've implemented aws-amplify to nextjs and it work just fine until i import aws-amplify-react, there is an error when i tried to load up the site and the error i getting was:

/Users/helloworld/dashboard/node_modules/@aws-amplify/ui/dist/style.css:1
(function (exports, require, module, __filename, __dirname) { :root {
                                                              ^

SyntaxError: Unexpected token :
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/helloworld/dashboard/node_modules/aws-amplify-react/dist/Amplify-UI/Amplify-UI-Components-React.js:16:1)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)

I was trying to fix the issue and unfortunately i have no luck. But i find out that If i goes to the files below and uncomment certain part of the code, the site will be loaded without any error but the styling is not reflected

1. /node_modules/aws-amplify-react/dist/Amplify-UI/Amplify-UI-Components-React.js and uncomment require('@aws-amplify/ui/dist/style.css');
2. /node_modules/@aws-amplify/ui/dist/style.css and uncomment/remove all the code inside.

To Reproduce
Steps to reproduce the behavior:

1. Import aws-amplify-react to nextjs project
2. Start nextjs dev server (it should compiled without error)
3. Go to localhost:3000
4. The error shown in terminal

Expected behavior
The site should render with nicely styling and running without error

Screenshots

Desktop (please complete the following information):

• OS: macOS Mojave @ version 10.14
• Browser Google Chrome
• Version 69.0.3497.100

Additional context
the environment is under the version listed below:

• next: ^7.0.2
• @zeit/next-css: ^1.0.1,
• @zeit/next-sass: ^1.0.1
• aws-amplify: ^1.1.7
• aws-amplify-react: ^2.1.1
• aws-appsync: ^1.4.0
• aws-appsync-react": ^1.2.0

[jordanranz]

Hi @louiskhenghao,

This seems related to: #2230. I am currently looking into how to fix this. I will send an update to this issue as soon as possible.

[cgarvis]

I found a workaround here: vercel/next-plugins#267 (comment)

[ajhool]

Can confirm that when using the workaround, this issue does not occur

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.