Amplify-js: Failed to compile on initial build of project, Error: @aws-amplifyui\dist\style.css Unexpected token (1:0)

[koterthecoder]

I am able to start a new project based on aws-mobile-react-sample, using the command...
$awsmobile start mobile-react react

But after navigating to the project folder and running...
$awsmobile run
...on a clean version of the starter project, the following error is produced...

ERROR in ./~/@aws-amplify/ui/dist/style.css
Module parse failed: C:\Users\dbrown\source\repos\mobile-react\node_modules\@aws-amplify\ui\dist\style.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
|
| /* Colors */
\@ ./~/aws-amplify-react/dist/Amplify-UI/Amplify-UI-Components-React.js 18:0-41
@ ./~/aws-amplify-react/dist/Auth/Authenticator.js
@ ./~/aws-amplify-react/dist/Auth/index.js
@ ./~/aws-amplify-react/dist/index.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js babel-polyfill
webpack: Failed to compile.

Given that I had started a new project, I expected that it should build and serve the client on localhost.

Tested using Windows 10 and received the same error on both [email protected] and [email protected]

[elorzafe]

Hi @koterthecoder That is fixed now, you should remove yarn.lock file and node_modules directory and run yarn.

I've just tested that and it works without that problem

feel free to reopen the issue if the problem continues.

[mrcoles]

There appears to be a similar issue with next.jsand compiling ui/dist/style.css https://github.com/zeit/next-plugins/issues/267 — @elorzafe might the change you worked on here provide any useful info to that issue? Cheers!

err… edit: wow this suggestion seemed to fix it: https://spectrum.chat/thread/ba3668b1-f0b1-42a6-9c71-d7d9d3b67f04?m=MTU0MDMxMjAyODUyMA==

Put this somewhere near the top of your next.config.js:

if (typeof require !== "undefined") {
 require.extensions[".less"] = () => {};
 require.extensions[".css"] = (file) => {};
}

[ngocketit]

@mrcoles I tried putting that in next.config.js but doesn't seem to help. Any ideas?

[mrcoles]

@ngocketit sorry, I don’t, maybe you can try on StackOverflow. FWIW the solution to the issue I encountered was only specific to next.js applications and probably was a bit confusing for me to mention in an amplify-js issue. I would look at whatever library you’re using to bundle your client web app (e.g., OP for this issue was using webpack) and see if you can sort it out there.

[ngocketit]

@mrcoles I managed to get it work with this:

const withCSS = require('@zeit/next-css');

if (typeof require !== "undefined") {
  require.extensions[".less"] = () => {};
  require.extensions[".css"] = file => {};
}

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    });
    return config;
  }
});

Thanks for your support!

[ajhool]

This is still an issue

[eastuto]

What @ajhool said. Adding This is still an issue in Next.js

Adding this at the top of the next.config.js hasn't worked for me

if (typeof require !== "undefined") {
  require.extensions[".less"] = () => {};
  require.extensions[".css"] = file => {};
}

Any help would be much appreciated

[nicholasgriffintn]

Copying the last two comments fails on next build with the following:

> Build error occurred
{ ../node_modules/@aws-amplify/ui/dist/style.css:13
:root {
^

SyntaxError: Unexpected token :

I've tried a load of things from a range of places, the only one that I haven't tried is removing the file, which would probably work but won't really solve the issue lol.

[eastuto]

I think need to run postCss loader maybe in next.config.js as explained here but having trouble with the actual postcss config https://github.com/zeit/next-plugins/tree/master/packages/next-css

[eastuto]

ok so I've found that withCss does not work. Need to take this out and add a css rule to the webpack config. So now next.config.js looks like this (pls note I'm using ReasonML so disregard the bucklescript stuff)

if (typeof require !== "undefined") {
  require.extensions[".less"] = () => {};
  require.extensions[".css"] = file => {};
}

module.exports = withPlugins([[withSass], [withTM, {
    transpileModules: ['bs-platform', 'bs-css', 'reason-apollo-hooks']
  }]], {
  pageExtensions: ['jsx', 'js', 'bs.js'],
  resolve: {
    modules: ['sass_loader'],
    cssModules: true,
  },
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.css$/,
      loader: [
        require.resolve('css-loader'),
      ],
    });
    config.node = {
      fs: 'empty'
    };
    return config
  },
});

[AmmarKureja]

The problem still persists, I am using simple react with webpack. Please reply if anyone has the working solution.