Проблемы с получением Next.js для работы с aws-усилением

Question

Не похоже, что Next.js может прочитать требуемый файл css в node_modules.

Ошибка:

./node_modules/@aws-amplify/ui/dist/style.css 13:0
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 */

Ссылки, которые предоставляют потенциальные решения:

https://github.com/aws-amplify/amplify-js/issues/1535

https://github.com/aws-amplify/amplify-js/issues/2230

https://github.com/zeit/next-plugins/issues/267

Предлагаемое решение заключается в том, чтобы поместить это в начало файла next.config.js:

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

Мне не удалось заставить это предлагаемое исправление работать, и мне интересно, есть ли у кого-нибудь лучшее понимание фактической проблемы / настройки файла next.config.js с предложенным решением.

Заранее спасибо.

Answer 1

Создайте файл next.config.js в корневом каталоге вашего проекта, указав следующее:

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

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

// next.config.js is not transformed by Babel. So you can only use javascript features supported by your version of Node.js.

module.exports = withCSS({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    // Perform customizations to webpack config
    // Important: return the modified config
    return config;
  },
  webpackDevMiddleware: config => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config;
  }
});

Этот ответ, по-видимому, соответствует решению из https://github.com/aws-amplify/amplify-js/issues/1535 отпользователь ngocketit.