Next.js使用JSX标签时出现语法错误，请求技术帮助

你在Next.js搭配semantic-ui-react开发时，只要使用JSX标签就出现语法错误，这个问题大概率是JSX的解析配置或者文件命名的问题，下面是几个可行的解决方向：

1. 检查文件扩展名 #

Next.js默认只会对.jsx或.tsx后缀的文件启用JSX语法解析。如果你的组件文件是.js后缀，Babel不会自动处理其中的JSX代码。建议把你的组件文件重命名为CampaignIndex.jsx。

2. 确认Babel配置（如果自定义过） #

如果你的项目里有自定义的.babelrc或babel.config.js文件，一定要确保配置了Next.js的官方预设，它已经内置了React JSX的解析规则。正确的配置应该是：

{
  "presets": ["next/babel"]
}

不要额外添加@babel/preset-react，否则可能和Next.js的预设产生冲突，导致JSX解析失败。

3. 修正组件内的方法调用错误 #

你的代码里还有一个潜在的小问题：render方法里调用的this.rendercampaigns()是小写的c，但你定义的方法是renderCampaigns（大写C），这个错误虽然不是当前语法报错的原因，但会导致后续组件无法正常渲染，记得修正为：

render() {
  return (
    this.renderCampaigns()
  )
}

4. 重新安装依赖 #

有时候依赖包损坏也会导致编译异常，你可以尝试删除依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

修正后的完整组件代码 #

import React, { Component } from 'react';
import dynamic from 'next/dynamic';
import { Card } from 'semantic-ui-react';
import ReactDOM from 'react-dom'; // 顺便修正了ReactDom的大写规范
import factory from '../ethereum/factory';

class CampaignIndex extends Component {
  static async getInitialProps(){
    const campaigns = await factory.methods.getDeployedCampaigns().call();
    return { campaigns };
  }

  renderCampaigns() {
    const items = this.props.campaigns.map(address => {
      return {
        header: address,
        description: 'View campaign',
        fluid: true
      };
    });
    return(
      <Card.Group items={items}/>
    );
  }

  render() {
    return (
      this.renderCampaigns()
    )
  }
}

export default CampaignIndex;

内容的提问来源于stack exchange，提问作者Kanishka Patel