Nextjs 中的 @Babylonjs (ES6) 因意外标记失败 'export'

Question

我正在使用 Nextjs 构建我的网站并导入 Bablyonjs 时出现以下错误。

syntaxError: Unexpected token 'export'
module.exports = require("@babylonjs/core")

我使用标准的 nextjs 设置 tsconfig.json 我指的是这个 Babylon 文档并逐字使用示例。

Answer 1

经过相当多的时间搜索后，我终于了解到以下内容。

@babylon (es6) 没有编译成 javascript 而是很好地定义了 (es6) 打字稿友好的源代码库。（需要 treeshake 时有帮助）
开箱即用的 Nextjs 未配置为编译 node_modules 中的任何内容。它期望预编译 javascript 可以使用。

第 2 点是我收到错误的原因，nextjs 期待已编译的 js 而它正在获取未编译的源代码。

要解决此问题，您需要添加 next.config.js 并使用 next-transpile-modules 和 next-compose-plugins 配置它。

yarn add next-transpile-modules
yarn add next-compose-plugins

next.config.js

//const withTM = require('next-transpile-modules')(['@babylonjs']);
const withTM = require('next-transpile-modules')(['@babylonjs/core']); // As per comment.
const withPlugins = require('next-compose-plugins');

const nextConfig = {
    target: 'serverless',
    webpack: function (config) {
        /// below is not required for the problem described. Just for reference.(es6)
        config.module.rules.push({test: /\.yml$/, use: 'raw-loader'})
        return config
    }
}

module.exports = withPlugins([withTM], nextConfig);

这之后编译没有报错

参考文献 我遇到了解决这个问题的方便链接。

帮助一些人理解问题的链接。

Answer 2

对于 Next.js 11，我不得不稍微修改 Emile 的答案：

安装以下软件包： yarn add next-transpile-modules

在您的 next.config.js 文件中添加以下内容：

const withTM = require('next-transpile-modules')(["package2", "package2"]);

module.exports = withTM({
  reactStrictMode: true
})

Nextjs 中的 @Babylonjs (ES6) 因意外标记失败 'export'

@Babylonjs (ES6) in Nextjs failes with unexpected token 'export'

next.js

babylonjs