使用next.js并按照文档使用部分引入，则会报错Syntax error: Unexpected token > 1 | import type { AppProps } from 'next/app'

[Neojoke]

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/mobile-react@2.31.3
• Phone Model And Version: 17621703478

Steps to reproduce

设置 �.babelrc.js:module.exports = function (api) {
api.cache(true);

const presets =  ["next/babel", "@babel/preset-typescript"];
const plugins = [
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // 注意如果是 SSR 环境，这里需将 `esm` 替换为 `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false,
    }]
];
return {
  presets,
  plugins
};

}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"strict": false,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": "./src",
"paths": {
"@/": ["./"]
},
"rootDirs": ["common/src/", "arco-design-pro-cra/src/", "arco-design-pro-next/src/"]
},
"include": ["/*.ts", "/*.tsx"],
"exclude": ["node_modules"]
}

[dukeluo]

根据 nextjs 的官方文档：https://nextjs.org/docs/pages/building-your-application/configuring/babel
还需要加入 "presets": ["next/babel"]，可以解决这个问题：

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

但是，在 nextjs page router 运行时下会报出新的错误：

Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).

还是请官方出一份 nextjs 接入方案为好。