NextJS build fails with webpack error due to Pyodide import

🐛 Bug

Using pyodide with NextJS results in a webpack error

~ npm run dev

> test@0.1.0 dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
TypeError: The 'compilation' argument must be an instance of Compilation
    at NormalModule.getCompilationHooks (C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\webpack\lib\NormalModule.js:171:10)
    at file:///C:/Users/shivs/Desktop/ActiveProjects/x-terminal-test/test/node_modules/@pyodide/webpack-plugin/plugin.mjs:314:99
    at Hook.eval [as call] (eval at create (C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\next\dist\compiled\webpack\bundle5.js:13:28636), <anonymous>:122:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\next\dist\compiled\webpack\bundle5.js:13:25906)      
    at Compiler.newCompilation (C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\next\dist\compiled\webpack\bundle5.js:28:147886)
    at C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\next\dist\compiled\webpack\bundle5.js:28:148673
    at Hook.eval [as callAsync] (eval at create (C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\next\dist\compiled\webpack\bundle5.js:13:28858), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\next\dist\compiled\webpack\bundle5.js:13:26012)
    at Compiler.compile (C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\next\dist\compiled\webpack\bundle5.js:28:148599)
    at C:\Users\shivs\Desktop\ActiveProjects\x-terminal-test\test\node_modules\next\dist\compiled\webpack\bundle5.js:28:491794

To Reproduce

Pyodide webpack plugin has been loaded in NextJS

...
  webpack: (config) => {
    config.plugins.push(new PyodidePlugin())
    return config
  }
...

and Pyodide is used as such

 useEffect(() => {
    async function callback(){
      let pyodide = await loadPyodide({
        indexURL: `${window.location.origin}/pyodide` 
      });
      alert(1)
      setRunner(pyodide);
    }
    callback()
  },[])

I have my pyodide files hosted in the public folder. If I don't use the weback-plugin, the webpage loads but fails with an error stating that the particular file is not hosted( ie. localhost:3000/pyodide/... not found )

Dependencies:

"dependencies": {
    "@pyodide/webpack-plugin": "^1.3.2",
    "next": "14.2.3",
    "node-fetch": "^2.6.1",
    "pyodide": "^0.25.1",
    "react": "^18",
    "react-dom": "^18"
  },

Expected behavior

Program sucessfully compiles.

Environment

• Pyodide Version : ^0.25.1
• Browser version: Brave 1.66.110 Chromium: 125.0.6422.60 (Official Build) (64-bit)
• Any other relevant information:

Additional context