Question

因此，我使用Create React App创建了一个Webapp，但是我想测试SSR，因此我尝试将其移植到next.js，但使用的是组件库，该库需要导入less文件来自node_modules，但是这样做会在运行next build或next并转到其中一个页面时在导入的文件中产生语法错误。

我已经尝试过：从js导入vs从更少核心文件导入，两者都得到相同的结果，我也尝试了this，但没有结果，我使用的是下一个9.0.1，但是也遇到了这个问题第8页的下一期。我也搜索了Next.js's个Github问题和PR，以及next-plugins回购，都没有找到任何有效的解决方法。

这是我的next.config.js：

const withLess = require("@zeit/next-less");
const withImages = require("next-images");

module.exports = withImages(
  withLess({
    cssModules: true,
    import: true,
    lessLoaderOptions: {
      javascriptEnabled: true,
    },
    cssLoaderOptions: {
      localIdentName: "[local]",
    },
    env: {
      CAMP_PHONE: process.env.CAMP_PHONE,
      HOST: process.env.HOST,
      PORT: process.env.PORT
    }
   })
);

最相关的package.json deps，如果需要进行错误测试，可以给出整个列表：

    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "express": "^4.17.1",
    "less": "^3.9.0",
    "mini-css-extract-plugin": "0.7.0",
    "nav-frontend-lenker-style": "^0.2.20",
    "next": "^9.0.1",
    "next-images": "^1.1.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "url-loader": "^2.0.1",
    "webpack": "^4.35.2"
    "style-loader": "^0.23.1"

我希望导入较少的文件可以导入相关文件并相应地进行捆绑。

这是我在运行next build时收到的错误消息：

> Build error occurred
/Users/Username/PathToRepo/node_modules/nav-frontend-lenker-style/src/lenker-style.less:1
@import './lenker-mixins';
^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/Username/PathToRepo/node_modules/nav-frontend-lenker/lib/lenke.js:16:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
error Command failed with exit code 1.

在此先感谢愿意帮助的人：）

Answer 1

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

将这些代码行添加到require语句下方，从而消除了问题

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

使用next.js从node_modules导入时如何解决较少的语法错误

1 个答案: