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

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

alibaba / x-render

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