Expecting an CommonJS module, but configured to be ESModule?

[orrymr]

I am attempting to use alphaTab with NextJS.
I believe that in order to do so, I need to configure WebPack so that the background workers are available for use.

As such, I have the following next.config.ts:

import type { NextConfig } from "next";
import { AlphaTabWebPackPlugin } from "@coderline/alphatab/webpack";

const nextConfig: NextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.plugins.push(new AlphaTabWebPackPlugin());
    }
    return config;
  },
};

export default nextConfig;

When I attempt to run my dev server, npm run dev, I see the following error:

var fs = require('fs');
         ^
ReferenceError: require is not defined

Now, digging into the alphaTab.webpack.js file in my node_modules, I see the following:

As expected.

I believe the problem may be that my Javascript environment is expecting this to be an ESModule, but it is actually CommonJS.
Looking into node_modules/@coderline/alphatab/package.json, I see this:

That is, "type": "module",. So, this is maybe what is causing my Javascript environment to think this is a ESModule, not CommonJS?

Is this perhaps an error?

[Danielku15]

alphaTab itself is mainly using ESM (thats the type: module). But in the package.json there are declarations for CJS and ESM consumers of the package. Same for the Webpack and Vite plugins: https://github.com/CoderLine/alphaTab/blob/develop/package.json#L26-L29

Normally this should resolve the correct things.

Can you spin up an example repo for troubleshooting?

[Danielku15]

Can you give v1.4.4 a try? It should mitigate the problem.

More details about the problem here and here.

[orrymr]

Alas, no luck with v1.4.4.
I've created a repo here.

[Danielku15]

In this example repo you do not setup the alphaTab plugin and there is no error in terms of require. I updated the config as you posted above and the reported problem does not appear either.

For the general usage in Next.js I recommend looking at https://github.com/CoderLine/alphaTabSamplesWeb/tree/main/src/webpack-nextjs where we have a working sample.

Unfortunately, they invented again another bundler turbopack for Next.js and IMO its not mature enough to work with alphaTab. They do not have proper WebWorker and AudioWorklet support and there is also no plugin system. Be sure to not use it.

[orrymr]

Thanks for the example at https://github.com/CoderLine/alphaTabSamplesWeb/tree/main/src/webpack-nextjs-15
That works!