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

Question

I'm building my website with Nextjs and importing Bablyonjs was throwing up the following error.

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

I'm using the standard nextjs setup with tsconfig.json I'm refering to this Babylon documentation and using the examples verbatim.

• https://doc.babylonjs.com/extensions/Babylon.js+ExternalLibraries/BabylonJS_and_ReactJS
• https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking

Answer 1

After a not so insignificant amount of time searching i finally learned the following.

1. @babylon (es6) is not compiled into javascript and is instead nicely defined (es6) typescript friendly library of source code. (helps when wanting to treeshake)

2. Nextjs out of the box isn't configured to compile anything in node_modules. It expects precompiled javascript ready to consume.

Point 2. is why i received the error, nextjs was expecting compiled js and it was getting uncompiled source.

To fix this you need to add a next.config.js and configure it with next-transpile-modules and 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);

It compiled without error after this.

References Handy links i came across solving this issue.

• 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

Links that helped some on the way to understanding the problem.

• Test ES6 modules with Jest
• https://forum.babylonjs.com/t/jest-is-crashing/12557/7
• https://github.com/MichalLytek/type-graphql/issues/689

Answer 2

For Next.js 11, I had to slightly revise the answer from Emile:

Install the following package: yarn add next-transpile-modules

In your next.config.js file add the following:

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

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