使用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 接入方案为好。