I’m using some external code in my application to compile latex. I’ve downloaded the code from this repo: https://github.com/SwiftLaTeX/SwiftLaTeX however when I use this code in my own application I get this error: ‘SyntaxError: Cannot use ‘import.meta’ outside a module (at swiftlatexdvipdfm.a31b1cfc.js:3587:24)’. This is my next.config.js right now, I’ve tried to change it a couple of times, using varying webpack configurations, however this has not fixed the issue so right now my next.config.js is looking like this:

// @ts-check

/**
 * @type {import('next').NextConfig}
 */

const nextConfig = {
  images: {
    domains: ['avatar.iran.liara.run'],
  },
}

export default nextConfig

This is my package.json:

{
  "name": "tracta",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "eslistConfig": {
    "extends": [
      "next",
      "next/core-web-vitals"
    ]
  },
  "dependencies": {
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@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",
    "@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-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",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "url": "^0.11.3",
    "webpack": "^5.91.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@faker-js/faker": "^8.4.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "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"
  }
}

There are some points in the js code in the project where import.meta.url is used however this is not my code so I’m not sure how to fix this, I’ve downloaded the code and inserted into my project as there was no npm package. Below is the code the error realtes to:

// Unconditionally accept an update to this module, we'll check if it's
// still a Refresh Boundary later.
// @ts-ignore importMeta is replaced in the loader
import.meta.webpackHot.accept();

How can I fix this error, is there a way to change my next.config.js/mjs so that this is resolved, thanks.

I’ve tried multiple times to fix this error with multiple webpack configs online, there is another application https://github.com/adamkaplan0/latextableviewer which uses react and seems to avoid this error however I cannot replicate the config.