nextjs 项目中报错： SyntaxError: Unexpected token 'export'

[pidehen23]

项目地址 报错如下 （react-dev-inspector Public版本 1.6.0）：

next.confing.js

[pidehen23]

https://githubmemory.com/repo/mahmoud-eskandari/NumToPersian/issues/16

[zthxxx]

@chenjiajing23 <Inspector /> 这个 react 组件 (import { Inspector } from 'react-dev-inspector' ) 不提供 cjs 产物，只提供了 esm 产物 (供 webpack / vite 等使用)，不支持 node 端使用，如 ssr

[pidehen23]

@chenjiajing23 <Inspector /> 这个 react 组件 (import { Inspector } from 'react-dev-inspector' ) 不提供 cjs 产物，只提供了 esm 产物 (供 webpack / vite 等使用)，不支持 node 端使用，如 ssr

@zthxxx 感谢解答。自定义nextjs 服务，已解决这个了这问题了。需要两个操作 1. webapck 打包这个插件换成cjs 2. 自定义nextjs 服务。详情可以参考 nextjs-example

[zthxxx]

webpack 本身 resolver 直接支持 esm，不推荐使用 cjs

[pidehen23]

webpack 本身 resolver 直接支持 esm，不推荐使用 cjs

nextjs 默认没有打包nodemodule 的东西，需要单独打包成cjs

[zthxxx]

使用 esm 是简单自然，特地配置把所有 esm 转为 cjs 可能是在把简单的事做复杂

[pidehen23]

使用 esm 是简单自然，特地配置把所有 esm 转为 cjs 可能是在把简单的事做复杂

是的。所以需要外部单独对此单独babel转成cjs。

下

[zthxxx]

@chenjiajing23 方便说一下你的 node 、nextjs、webpack 版本是多少么

[pidehen23]

@chenjiajing23 方便说一下你的 node 、nextjs、webpack 版本是多少么

node 14.6 nextjs 版本11.1.2 刚发的项目 中有具体版本 webpack 是next集成的 版本是webpack5 https://github.com/chenjiajing23/next-example/commit/23a94480182d511657f79ce6ce12457654965d2c

[zthxxx]

看来 nextjs 上因为配套 ssr 的关系，用纯 esm 还是有些麻烦，我加一下 cjs 构建产物吧

[zthxxx]

@chenjiajing23 cjs 产物及 Next.js 支持已补充，见 react-dev-inspector@v1.7.0

docs: https://github.com/zthxxx/react-dev-inspector#usage-with-nextjs

example: https://github.com/zthxxx/react-dev-inspector/tree/master/examples/nextjs