next.js - Next Js 中的 @Babylonjs (ES6) 因意外 token 'export' 而失败

Question

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

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

我正在使用带有 tsconfig.json 的标准 nextjs 设置
我指的是这个巴比伦文档并逐字使用示例。

https://doc.babylonjs.com/extensions/Babylon.js+ExternalLibraries/BabylonJS_and_ReactJS

https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking

Answer 1

经过一段不那么微不足道的搜索时间，我终于了解到以下内容。

@babylon (es6) 没有编译成 javascript，而是很好地定义 (es6) typescript 友好的源代码库。 (当想要摇树时有帮助)

开箱即用的 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

下一个.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);

在此之后它编译没有错误。
引用资料
我遇到了解决这个问题的方便链接。

https://github.com/vercel/next.js/issues/706

https://www.npmjs.com/package/next-transpile-modules

https://www.npmjs.com/package/next-compose-plugins

https://www.typescriptlang.org/tsconfig

https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking

https://doc.babylonjs.com/extensions/Babylon.js+ExternalLibraries/BabylonJS_and_ReactJS

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

Test ES6 modules with Jest

https://forum.babylonjs.com/t/jest-is-crashing/12557/7

https://github.com/MichalLytek/type-graphql/issues/689