无法让 Next.js 与 aws-amplify 一起使用答案

【问题标题】：Trouble getting Next.js to work with aws-amplify无法让 Next.js 与 aws-amplify 一起使用
【发布时间】：2019-02-18 06:25:00
【问题描述】：

Next.js 似乎无法读取 node_modules 中所需的 css 文件。

错误：

./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 文件。

提前致谢。

【问题讨论】：

标签： reactjs webpack serverless next.js aws-amplify

【解决方案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;
  }
});

这个答案似乎与用户 ngocketit 的 https://github.com/aws-amplify/amplify-js/issues/1535 的解决方案相当。

【讨论】：