几乎没有搜索结果:“nextjs pug”. Google建议的结果是“nuxtjs pug”,这是一个完全不同的框架。
两个相关搜索结果之一是this issue。建议的最小设置需要太多的插件(我不明白为什么我需要每个插件),太复杂的配置,不适用于当前版本。
包.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问题。我尝试了下面的解决方案:
{
"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)
这个错误将离开甚至不使用哈巴狗:
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;
你可能想知道我在应用程序崩溃之前做了什么。好吧,我没有记录我的每一个动作,但我没有做一些大的变化,如目录重命名或配置编辑直接在第一次失败的发射。无论如何,我们需要知道配置是错误的,以及如何修复它。
1条答案
按热度按时间e5nszbig1#
尝试将其导入
pages/index.tsx
对于任何jsx代码的Babel编译,需要react import。在任何使用jsx代码片段的地方导入react。这解决了您的问题。