如何为 Next.js 设置 Pug？

Question

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

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

package.json

{
  "devdependencies": {
    "@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

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

其他相关搜索结果是Is it possible to use Framer Motion in React with pug question。我尝试了以下解决方案：

{
  "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。这解决了你的问题。