如何为 Next.js 设置 Pug？

Question

几乎没有关于“nextjs pug”的搜索结果。 Google 建议“nuxtjs pug”的结果，这是完全不同的框架。

两个相关搜索结果之一是 this issue。建议的最小设置需要太多插件（我不明白为什么我需要每个插件），配置太复杂并且不适用于当前版本。

package.json

    "@babel/core": "^7.0.0-beta.51",
    "@babel/plugin-transform-react-jsx": "^7.0.0-beta.51",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.51",
    "@babel/runtime": "^7.0.0-beta.51",
    "babel-core": "7.0.0-bridge.0",
    "babel-plugin-transform-react-pug": "git://github.com/shirohana/babel-plugin-transform-react-pug.git#dist"
} } ```

**.babelrc.js**

```javascript module.exports = function (api) {   api.env()   return {
    presets: [
      ['@babel/env', { useBuiltIns: 'entry' }]
    ],
    plugins: [
      ['babel-plugin-transform-react-pug'],
      ['@babel/plugin-transform-react-jsx'],
      ['@babel/plugin-transform-runtime']
    ]   } } ```

https://github.com/pugjs/babel-plugin-transform-react-pug/pull/48#issuecomment-406466928

其他相关搜索结果是个问题。我尝试了以下解决方案：

{
  "presets": ["next/babel"],
  "plugins": [
    "transform-react-pug",
    [
      "transform-jsx-classname-components"
    ],
    "transform-react-jsx"
  ]
}

这很有趣，但有时在作品中，有时 - 不。我试图创建两个项目。首先，它在两个项目中都有效，但随后出现错误：

ReferenceError: React is not defined
at HomePage (C:\Users\****\Build\InteractiveImplementation\server\pages\index.js:63:3)
    at processChild (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
    at resolve (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at Object.renderPage (C:\Users\****\node_modules\next\dist\next-server\server\render.js:53:854)
    at Function.getInitialProps (C:\Users\****\Build\InteractiveImplementation\server\pages\_document.js:556:19)
    at loadGetInitialProps (C:\Users\****\node_modules\next\dist\next-server\lib\utils.js:5:101)
    at renderToHTML (C:\Users\****\node_modules\next\dist\next-server\server\render.js:53:1145)

即使不使用 Pug 也会出现此错误：

import React, { ReactNode } from "react";


class TestComponent extends React.Component<TestComponent.Properties,TestComponent.State> {

  public state: TestComponent.State = {
    count: 0
  }

  public render(): ReactNode {
    // return pug`
    //   main
    //     div ${this.props.message}
    //     div props.message
    // `;
    return (
      <div onClick={() => this.increment(1)}>
        {this.props.message} {this.state.count}
      </div>
    )
  }

  private increment(amt: number): void {
    this.setState((state: TestComponent.State): TestComponent.State => ({
      count: state.count + amt,
    }));
  };
}

namespace TestComponent {

  export type Properties = {
    message: string;
  }

  export type State = {
    count: number;
  };
}

export default TestComponent;

您可能想知道我在应用程序崩溃之前直接做了什么。好吧，我没有记录我的每一个动作，但我没有在第一次启动失败之前直接进行一些大的更改，比如目录重命名或配置编辑。无论如何，我们需要知道哪里配置有问题，以及如何修复它。

Answer 1

尝试将其导入您的 pages/index.tsx

import React from "react";

对于任何 jsx 代码的 Babel 转译，需要 react import。在任何使用 jsx 代码片段的地方导入 React。这解决了您的问题。

如何为 Next.js 设置 Pug？

How to setup the Pug for Next.js?

reactjs

pug

next.js