I’m creating an app which uses wasm and other JavaScript files which I personally have not created. These files generate a file which is stored at this url: http://localhost:3000/_next/static/media/swiftlatexxetex.e11f3d2f.js. This file gives an error when I try and use a function:

 await xetexEngine.loadEngine()

In my code. I’ve been trying to fix this for days, I’ve tried to edit my next.config.mjs:

import path from 'path'
import { fileURLToPath } from 'url'
const filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(filename)

const nextConfig = {
  images: {
    domains: ['avatar.iran.liara.run'],
  },
  webpack: (config, { isServer }) => {
    // Ensure Webpack treats .wasm files correctly
    config.module.rules.push({
      test: /.wasm$/,
      type: 'javascript/auto',
    })

    // Ensure Webpack treats .js files in the static media directory as ES modules
    config.module.rules.push({
      test: /.js$/,
      include: path.resolve(__dirname, '._next/static/media'),
      type: 'javascript/esm', // Explicitly set type to ESM
      use: [
        {
          loader: 'babel-loader', // Use Babel loader to transpile the JS files
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    esmodules: true, // Transpile to ES modules
                  },
                },
              ],
            ],
          },
        },
      ],
    })

    return config
  },
}

export default nextConfig

However this has not fixed the error. This is my package.json:

{
  "name": "tracta",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "eslistConfig": {
    "extends": [
      "next",
      "next/core-web-vitals"
    ]
  },
  "dependencies": {
    "@hookform/resolvers": "^3.4.2",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@reduxjs/toolkit": "^2.2.5",
    "@supabase/ssr": "^0.3.0",
    "@supabase/supabase-js": "^2.43.4",
    "buffer": "^6.0.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "copy-webpack-plugin": "^12.0.2",
    "docx": "^8.5.0",
    "file-saver": "^2.0.5",
    "framer-motion": "^11.2.10",
    "fs": "0.0.1-security",
    "geist": "^1.3.0",
    "latex.js": "^0.12.6",
    "libreoffice-convert": "^1.5.1",
    "lucide-react": "^0.378.0",
    "mammoth": "^1.7.2",
    "next": "14.2.3",
    "next-themes": "^0.3.0",
    "next-transpile-modules": "^10.0.1",
    "office-script": "^1.7.0",
    "path": "^0.12.7",
    "pdfjs-dist": "^4.3.136",
    "puppeteer": "^22.10.0",
    "react": "^18.3.1",
    "react-dom": "^18",
    "react-fast-marquee": "^1.6.4",
    "react-hook-form": "^7.51.5",
    "react-redux": "^9.1.2",
    "react-resizable-panels": "^2.0.19",
    "sonner": "^1.4.41",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "url": "^0.11.3",
    "webpack": "^5.91.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@babel/core": "^7.24.7",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/preset-env": "^7.24.7",
    "@faker-js/faker": "^8.4.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "babel-loader": "^9.1.3",
    "babel-plugin-transform-import-meta": "^2.2.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "eslint-config-prettier": "^9.1.0",
    "postcss": "^8",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.14",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

How can I allow for import.meta in my nextjs project, I believe this is the only way to fix the issue I’ve got, I can’t find how the actual code was generated as I believe it is done with wasm, I’d attach the whole file but its 5000+ lines long, this is the snippet that causes the error:

    // @ts-ignore importMeta is replaced in the loader
    import.meta.webpackHot.accept();

I’ve tried multiple different approaches to try and fix this issue, using multiple different babel plugins but this still has not worked, I’m not sure whether I need a babel.config.js file to fix this issue either.

Thanks.