Amplify-js: [React] App crashes with message: You may need an appropriate loader to handle this file type.

[cocacrave]

When wrapping app withAuthenticator() or <Authenticator> the app immediately crashes with this error:

Uncaught Error: Module parse failed: Unexpected token (13:0)
You may need an appropriate loader to handle this file type.
|  * and limitations under the License.
|  */
> :root {
| 
|   /* Colors */
    at eval (style.css:1)
    at Object../node_modules/@aws-amplify/ui/dist/style.css (main.a9a9c0.js:1094)
    at __webpack_require__ (main.a9a9c0.js:64)
    at eval (Amplify-UI-Components-React.js?bf02:13)
    at Object../node_modules/aws-amplify-react/dist/Amplify-UI/Amplify-UI-Components-React.js (main.a9a9c0.js:1628)
    at __webpack_require__ (main.a9a9c0.js:64)
    at eval (Greetings.js?5805:37)
    at Object../node_modules/aws-amplify-react/dist/Auth/Greetings.js (main.a9a9c0.js:1808)
    at __webpack_require__ (main.a9a9c0.js:64)
    at eval (Authenticator.js?5c97:29)

Some packages I'm using:

"aws-amplify": "^1.1.17"
"aws-amplify-react": "^2.3.0"
"react": "^16.6.3"
"webpack": "^4.27.1"

Is it because I'm not using css loader?

[jkeys-ecg-nmsu]

Are you using a React bootstrapper like create-react-app?

[haverchuck]

@cocacrave are you using any sort of style loader for webpack?

[cocacrave]

I'm not using create-react-app. I am using webpack but no style loaders because I'm using styled-components package and it seems I don't need css loader? I ended up using my own Authenticator provider using React context and it working fine for now. Thank you for looking into it.

[haverchuck]

@cocacrave Thanks for getting back to us.

[ThrowsException]

Any plans to fix this? Im using next.js for my app and this https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Amplify-UI/Amplify-UI-Components-React.jsx#L5 is causing me to get that error. Would be nice to override to exclude the styles or have them be build as part of the distribution so I didn't have to custom configure webpack for it.

[shicholas]

upvote @ThrowsException. I am not using Next.js, just regular webpack and I have to add CSS processors just for this file - it's the only file that requires a CSS processor.

I created a new issue - https://github.com/aws-amplify/amplify-js/issues/3348 to track that.

[aldegoeij]

@ThrowsException I'm having the same issue, could you show me the right direction to make a webpack config to 'fix' this?

[haochang]

@aldegoeij
I add the loader for css files in my webpack and it works
``` javascript
{
test: /.css$/,
use: [
{ loader: 'style-loader', options: { singleton: true } },
{ loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } }
],
}

[ThrowsException]

@aldegoeij I forget where I got this from but I used an if statement in my next.config.js config which is essentially webpack for next.js. This can probably be translated to vanilla webpack somehow. https://github.com/ThrowsException/polled/blob/268e7cf2aa600d3fd7da3f8d29c7ccef6330893e/client/next.config.js#L25-L54

[mkrn]

The same problem.. I'm only using aws-amplify-react for Connect is there a way to import it separately?