next.js - Nextjs 中的@Babylonjs (ES6) 因意外令牌“导出”而失败

问题描述

我正在使用 Nextjs 构建我的网站，并且导入 Ballyonjs 引发了以下错误。

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

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

标签： next.jsbabylonjs

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

@babylon (es6) 没有编译成 javascript，而是很好定义的 (es6) typescript 友好的源代码库。（在想要摇树时有帮助）
开箱即用的 Nextjs 未配置为编译 node_modules 中的任何内容。它期望预编译的 javascript 准备好使用。

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

要解决此问题，您需要添加 anext.config.js并使用next-transpile-modulesand对其进行配置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);

在此之后它编译没有错误。

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

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

next.js - Nextjs 中的@Babylonjs (ES6) 因意外令牌“导出”而失败

问题描述

解决方案

推荐阅读