# NextJS + BabylonJS (ESM) crash **URL:** \ **Category:** Questions\ **Created:** [October 6, 2022, 12:04pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543 "2022-10-06T12:04:30Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Andi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/andi/32/12152_2.png) [@Andi](https://forum.babylonjs.com/u/Andi)\ **Post date:** [October 6, 2022, 12:04pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/1 "2022-10-06T12:04:30Z")
Hi everyone, I’m trying to use NextJS + BabylonJS on their latest versions. There are a few topics on this already: [How to use Babylon with Next JS](https://forum.babylonjs.com/t/how-to-use-babylon-with-next-js/26665) and [Babylon + Next.js Setup Optimized for SEO, Load Speed & Developer Experience](https://forum.babylonjs.com/t/babylon-next-js-setup-optimized-for-seo-load-speed-developer-experience/27412) but all of these use older versions of NextJS (pre v12). The main difference is that in the previous versions of NextJS, the `@babylonjs` modules needed to be traspiled to be included in the build, but starting with NextJS v12 that is not necessary anymore ([Blog - Next.js 12 | Next.js](https://nextjs.org/blog/next-12#es-modules-support-and-url-imports)). I’ve put together a small sandbox ([babylonjs-nextjs - CodeSandbox](https://codesandbox.io/s/babylonjs-nextjs-6kmqyb)) showcasing the error trying to use the latest `@babylonjs` packages, and my best guess is that it might have something to do with the latest ESM work and the distributable shape of BJS? ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/b/6b4e9cbb84fa4bcdf907def6b758217721900465.png) The error looks like the above, and the best guess is that the `?` operator doesn’t exist in the current JS runtime? My local setup is quite different, but it ends up in the same error. I’m using TypeScript as well, and when targetting ES5 the main project runs well, but when trying to run the project in Cypress (same ES5 target) - I get the error above. Replicating my setup is too difficult to do in a sandbox environment, but it essentially throws the same error. I’ve tried in the past (pre v12 NextJS) with transpiling the `@babylonjs` packages, as well as using the `babylonjs` packages, and they were successful attempts. The only difference was that the `babylonjs` packages were pretty much impossible to debug in the browser. Any idea what we might be able to try to make this sandbox work? Many thanks! ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 6, 2022, 12:14pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/2 "2022-10-06T12:14:17Z")
cc @RaananW ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 6, 2022, 12:58pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/3 "2022-10-06T12:58:10Z")
i assume internally it is using webpack 4? do you have babel included in your compilation pipeline? NextJS, if i remember correctly, has the ability to use webpack 5 instead of 4. will it be possible for you to try that? ---
**Author:** ![Andi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/andi/32/12152_2.png) [@Andi](https://forum.babylonjs.com/u/Andi)\ **Post date:** [October 6, 2022, 7:12pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/4 "2022-10-06T19:12:32Z")
It seems NextJS uses Webpack 5 for compilation by default starting with v11 ([webpack5 | Next.js](https://nextjs.org/docs/messages/webpack5)). Starting with v12 NJS also uses the SWC compiler by default, [Advanced Features: Next.js Compiler | Next.js](https://nextjs.org/docs/advanced-features/compiler). As for Babel, it’s not included in my build pipeline at all, the sandbox is quite simply just bootstrapping NextJS and adding (and importing) BJS. Nothing other than that afaik. ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [October 6, 2022, 7:49pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/5 "2022-10-06T19:49:42Z")
Hey @Andi, The error you’re getting it’s undoubtedly pointing that the parser can’t understand the optional chaining feature of the JavaScript. I’ve found something like that on the Internet: > **[I use a plugin which uses proposal-optional-chaining, and project can't be...](https://github.com/vercel/next.js/discussions/30784)** > > What version of Next.js are you using? 11.0.1 What version of Node.js are you using? 12.19.0 What browser are you using? Chrome What operating system are you using? macOS How are you deploying your... As the error you’re getting is coming from the `node_modules` I think you might try check that solution. ---
**Author:** ![Andi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/andi/32/12152_2.png) [@Andi](https://forum.babylonjs.com/u/Andi)\ **Post date:** [October 7, 2022, 2:49pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/6 "2022-10-07T14:49:29Z")
I think the move away from ES5 is causing this issue… does that mean I have to start transpiling the BJS distributable now to fix these kind of issues? ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 7, 2022, 4:06pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/7 "2022-10-07T16:06:16Z")
you need to understand which one of the tools you are using does not accept the newer syntax. it is usually webpack 4, as webpack 5 supports this syntax without an issue. You can add a pre-step to your js files and transpile them using babel. ---
**Author:** ![Andi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/andi/32/12152_2.png) [@Andi](https://forum.babylonjs.com/u/Andi)\ **Post date:** [October 12, 2022, 9:11am UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/8 "2022-10-12T09:11:16Z")
Oh, apparently upgrading to the latest BJS (5.27.1) seems to have fixed the issue. The link to the sandbox runs OK, as well as my local testing setup with Cypress. Not sure exactly what the issue might have been, and my skills in the JS build system are not great to be able to properly troubleshoot it. Thanks for the input. ---
**Author:** ![Andi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/andi/32/12152_2.png) [@Andi](https://forum.babylonjs.com/u/Andi)\ **Post date:** [October 14, 2022, 8:07am UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/9 "2022-10-14T08:07:23Z")
Hi @RaananW, I’ve got an older setup as well using Webpack and Aurelia, it worked fine until `5.19` but updating to `5.28` seems to create this error. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/7/e76d8aafc579a59955d731a193efece898f2163c.png) Doing a bit of investigation, I see this PR was the one that made my previous scenario work ([Set target to ES2018 by RaananW · Pull Request #13086 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/pull/13086/files)) but as part of this PR I see that the `@babylonjs/inspector` package did not get the same `es2018` target ([Babylon.js/tsconfig.build.json at master · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/master/packages/public/%40babylonjs/inspector/tsconfig.build.json)). Is there a chance to apply this change to the `inspector` as well or maybe there’s a different reason for why it was being left out? Thanks in advance. PS: I would like to avoid as much as possible including `babel` transpiling over `node_modules`, my lack of experience here would make me lose a lot of time. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 14, 2022, 8:30am UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/10 "2022-10-14T08:30:51Z")
sure, I can make them es2018 as well i’ll submit the PR later today ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [October 14, 2022, 8:52am UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/11 "2022-10-14T08:52:45Z")
Hey @RaananW, can you say something more why do we go back to `2018` from `2021` with the target? ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 14, 2022, 8:57am UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/12 "2022-10-14T08:57:12Z")
good question! We had a few partners and community members that asked to lower the target for the time being until they fix their build systems and support a more modern syntax. I often push for modern code and will continue doing that as much as I can, but we also need to accept the fact that production users that suddenly can’t upgrade without making changes will decrease the satisfaction from the framework and maybe the usage as well. I am still pushing towards es2021 (and even es2022) in future versions. I am in great hopes that the js ecosystem will eventually stabilize and will be able to provide updates to the build tools more often. And that the browsers will also move faster to adopt new standards. It’s a cat-and-mouse race. And, of course, es2018 is 10000x better than es5 target 🙂 so we are on the right track. ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [October 14, 2022, 12:53pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/13 "2022-10-14T12:53:46Z")
Thanks for sharing 🙂 Have you set any deadline for the partners for the updating their projects, eg. end of the year? It would be nice to have some kind of a roadmap, even if it can change over time. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 14, 2022, 1:48pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/14 "2022-10-14T13:48:38Z")
Babylon 6.0 will be released in ca. 6 months, and together with it we are planning to have a new esm-friendly package that will target es2021/ES2022. ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [October 14, 2022, 1:54pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/15 "2022-10-14T13:54:14Z")
That’s great news! Do you have list of key features coming with the v6? ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 14, 2022, 2:35pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/16 "2022-10-14T14:35:27Z")
Everything can be found on github: [Issues · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/issues?q=is%3Aopen+is%3Aissue+milestone%3A6.0) (filtered to v.6.0) ---
**Author:** ![Andi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/andi/32/12152_2.png) [@Andi](https://forum.babylonjs.com/u/Andi)\ **Post date:** [October 14, 2022, 2:38pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/17 "2022-10-14T14:38:18Z")
I’m having another interesting moment here - basically trying to integrate the BJS and Jest into the project for unit tests. With the ESM model, basically everyone that uses BJS need to transpile the lib (to some extent), and in doing so I ended up with this sort of runtime. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/e/0e975931ae3c7b1a30a2fd6b868a54908dcc8e4b.png) The Jest config does contain the transpiling config to be able to properly handle the JS files in the node modules. > transformIgnorePatterns: [“/node\_modules/(?!(@babylonjs)/)”], As you can imagine, having to wait minutes to run unit tests is an absolute productivity killer. I’m also looking into using `swc/jest` instead of `ts-jest` but the current defaults point to this setup. Since as you mentioned, BJS moves fastly to the newer ES versions, what about coping with our build pipelines? Would there make any sense to keep distributing it as ES5 still until the ecosystem stabilizes first? ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 14, 2022, 2:55pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/18 "2022-10-14T14:55:51Z")
(the following is my personal opinion 😉 ) There are many ways to solve this. Asking the framework you are using to target es5 instead of a modern target is not one of them. > [@Andi](#): > > ES5 still until the ecosystem stabilizes ES5 is technically ES2009. We are 14 (!!!) years away. If the tools you are using still require you to use a 14-year-old technology there is something wrong with the tool. ES2018 is, well, 4 years old. I would consider that stable. TBH - we are running unit tests, and I have never waited more than a few seconds for everything to work. Check that your filters are correct, check that jest is updated. If you want to share your project I will be happy to find the time to try and help as well. There are so many benefits of using a more moden target. From speed to size to syntax, the benefits are clear. ---
**Author:** ![Andi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/andi/32/12152_2.png) [@Andi](https://forum.babylonjs.com/u/Andi)\ **Post date:** [October 14, 2022, 2:59pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/19 "2022-10-14T14:59:28Z")
Couldn’t agree more with the modernization efforts. Too bad documentation is so scattered and the defaults that most tools use still rely on 14-year-old tech. On subsequent runs, also including `@swc/jest` as a transform, it’s totally acceptable. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/9/c9287b59dffb15be2bb87d5672018ba0cfd5becd.png) As always, thanks for your input. It’s good to understand your opinion on the matter as well. Cheers. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 14, 2022, 3:01pm UTC](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543/20 "2022-10-14T15:01:41Z")
I experimented with swc a bit, and it seems to be a wonderful tool. My only “fear” is how fast tsc advances and whether or not swc can catch up. But I really want to move to swc instead of tsc during local development. Time is the only reason I haven’t tried it out yet 🙂 [Next page](https://forum.babylonjs.com/t/nextjs-babylonjs-esm-crash/34543.md?page=2)