Nextjs下报SyntaxError: Cannot use import statement outside a module

[lijicheng123]

1.依赖仓库的版本(Dependencies versions)：

• react：18.2.0
• form-render：^2.1.24
• table-render:
• antd：^5.5.0
• next: ^13.4.2

2.问题描述(Bug description)：
这是Nextjs13.14.2的项目，本来一切正常的，引入了form-render之后就报了如下错误：

• ready started server on 0.0.0.0:8080, url: http://localhost:8080
  warning ../../../package.json: No license field
• info Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
• info Using external babel configuration from /Users/ljc/code/test/demo/.babelrc
• event compiled client and server successfully in 1714 ms (307 modules)
• wait compiling...
• event compiled successfully in 84 ms (247 modules)
• wait compiling...
• event compiled client and server successfully in 455 ms (307 modules)
• wait compiling /test (client and server)...
• wait compiling /_error (client and server)...
• event compiled client and server successfully in 2.3s (4832 modules)
• warn Fast Refresh had to perform a full reload due to a runtime error.
• error /Users/ljc/code/test/demo/node_modules/antd/es/button/style/index.js:1
  import { genFocusStyle } from '../../style';
  ^^^^^^

SyntaxError: Cannot use import statement outside a module
at compileFunction ()
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1032:15)
at Module._compile (node:internal/modules/cjs/loader:1067:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/Users/ljc/code/test/demo/node_modules/form-render/lib/form-core/index.js:8:1)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/Users/ljc/code/test/demo/node_modules/form-render/lib/index.js:45:40)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.form-render (/Users/ljc/code/test/demo/.next/server/pages/test.js:2393:18)
at webpack_require (/Users/ljc/code/test/demo/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./components/skills/index.tsx:7:69)
at Object../components/skills/index.tsx (/Users/ljc/code/test/demo/.next/server/pages/test.js:132:1)
at webpack_require (/Users/ljc/code/test/demo/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./components/TextareaForm.tsx:11:76)
at Object../components/TextareaForm.tsx (/Users/ljc/code/test/demo/.next/server/pages/test.js:66:1)
at webpack_require (/Users/ljc/code/test/demo/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./pages/test/index.tsx:19:82)
at Function.webpack_require.a (/Users/ljc/code/test/demo/.next/server/webpack-runtime.js:97:13)
at eval (webpack-internal:///./pages/test/index.tsx:1:21)
at Object../pages/test/index.tsx (/Users/ljc/code/test/demo/.next/server/pages/test.js:1999:1)
at webpack_require (/Users/ljc/code/test/demo/.next/server/webpack-runtime.js:33:42)
at webpack_exec (/Users/ljc/code/test/demo/.next/server/pages/test.js:3055:39)
at /Users/ljc/code/test/demo/.next/server/pages/test.js:3056:28
at Object. (/Users/ljc/code/test/demo/.next/server/pages/test.js:3059:3)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at requirePage (/Users/ljc/code/test/demo/node_modules/next/dist/server/require.js:156:12)
at /Users/ljc/code/test/demo/node_modules/next/dist/server/load-components.js:68:84
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async loadComponentsImpl (/Users/ljc/code/test/demo/node_modules/next/dist/server/load-components.js:68:26)
at async DevServer.findPageComponentsImpl (/Users/ljc/code/test/demo/node_modules/next/dist/server/next-server.js:759:36) {
digest: undefined
}

3.出现问题的 schema demo(Reproduction schema demo)：

const schema = {
    type: 'object',
    properties: {
      input: {
        title: '输入框',
        type: 'string'
      },
      select: {
        title: '下拉框',
        type: 'string',
        props: {
          options: [
            { label: '早', value: 'a' },
            { label: '中', value: 'b' },
            { label: '晚', value: 'c' }
          ]
        }
      }
    }
  }

4.最小复现 demo(Reproduction demo)：
import { Modal, Popover } from 'antd'
import FormRender, { useForm } from 'form-render'
import { BarsOutlined } from '@ant-design/icons'
import { useContext, useState } from 'react'
import { ChatContext } from '@/context/ChatContext'

export default function Skills() {
const form = useForm()
const { skillsMap } = useContext(ChatContext)!
const [showAllSkills, setShowAllSkills] = useState(false)

const [showModal, setShowModal] = useState(false)
const finishInput = () => {
setShowModal(false)
}
const onFinish = (formData) => {
console.log('formData:', formData)
}

return (
<Modal
title="Vertically centered modal dialog"
centered
open={showModal}
onOk={finishInput}
onCancel={() => setShowModal(false)}
footer={true}
>


)
}

function schema() {
return {
type: 'object',
properties: {
input: {
title: '输入框',
type: 'string'
},
select: {
title: '下拉框',
type: 'string',
props: {
options: [
{ label: '早', value: 'a' },
{ label: '中', value: 'b' },
{ label: '晚', value: 'c' }
]
}
}
}
}
}

{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8080",
"build": "next build",
"start": "next start -p 8028",
"lint": "eslint "./**/*.{js,jsx,ts,tsx}"",
"prepare": "husky install"
},
"dependencies": {
"@heroicons/react": "^2.0.18",
"@types/lodash": "^4.14.194",
"@types/markdown-it": "^12.2.3",
"antd": "^5.5.0",
"autoprefixer": "^10.4.14",
"axios": "^0.21.1",
"babel-plugin-import": "^1.13.6",
"bootstrap": "^4.6.0",
"classnames": "^2.3.1",
"cookie": "^0.4.1",
"cookies": "^0.8.0",
"cookies-next": "^2.1.1",
"eventsource-parser": "^1.0.0",
"form-render": "^2.1.24",
"github-markdown-css": "^5.2.0",
"is-mobile": "^4.0.0",
"lodash": "^4.17.21",
"markdown-it": "^13.0.1",
"next": "^13.4.2",
"next-http-proxy-middleware": "^1.2.5",
"postcss": "^8.4.23",
"react": "18.2.0",
"react-bootstrap": "^2.7.4",
"react-dom": "18.2.0"
},
"devDependencies": {
"@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1",
"@types/classnames": "^2.2.11",
"@types/cookie": "^0.4.0",
"@types/node": "^14.14.32",
"@types/react": "18.0.31",
"@types/react-dom": "18.0.11",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.21.0",
"eslint-config-zati": "^1.0.1",
"eslint-plugin-react": "^7.22.0",
"husky": "^5.1.3",
"typescript": "^5.0.4",
"validate-branch-name": "^1.0.6"
},
"license": "MIT"
}

form-render demo https://codesandbox.io/s/unruffled-flower-jl78h
table-render demo https://codesandbox.io/s/sweet-euler-bdoty
fr-generator demo https://codesandbox.io/s/s13sh

[lhbxs]

最好能提供一个github 测试demo ，方便我们快速调试

[lhbxs]

#1299