Nextjs complains about using import.meta incorrectly

[fraywing]

Happens on Nextjs 13.x and 12.x

    return new URL("./tesseract-worker.js", import.meta.url).href;
                                                   ^^^^

SyntaxError: Cannot use 'import.meta' outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1049:15)
    at Module._compile (node:internal/modules/cjs/loader:1084:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at tesseract-wasm (/home/austin/dev/promptplay/.next/server/pages/app.js:306:18)
    at __webpack_require__ (/home/austin/dev/promptplay/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/MultipleFileUploadForm.tsx:9:72)
    at ./components/MultipleFileUploadForm.tsx (/home/austin/dev/promptplay/.next/server/pages/app.js:76:1)
    at __webpack_require__ (/home/austin/dev/promptplay/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/app.tsx:14:91)
    at ./pages/app.tsx (/home/austin/dev/promptplay/.next/server/pages/app.js:131:1)
    at __webpack_require__ (/home/austin/dev/promptplay/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/home/austin/dev/promptplay/.next/server/pages/app.js:316:39)
    at /home/austin/dev/promptplay/.next/server/pages/app.js:317:28
    at Object.<anonymous> (/home/austin/dev/promptplay/.next/server/pages/app.js:320:3)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.requirePage (/home/austin/dev/promptplay/node_modules/next/dist/server/require.js:88:12)
    at /home/austin/dev/promptplay/node_modules/next/dist/server/load-components.js:37:73
    at async Object.loadComponents (/home/austin/dev/promptplay/node_modules/next/dist/server/load-components.js:37:26)
    at async DevServer.findPageComponents (/home/austin/dev/promptplay/node_modules/next/dist/server/next-server.js:562:36)
    at async DevServer.renderPageComponent (/home/austin/dev/promptplay/node_modules/next/dist/server/base-server.js:942:24)
    at async DevServer.renderToResponse (/home/austin/dev/promptplay/node_modules/next/dist/server/base-server.js:971:32)
    at async DevServer.pipe (/home/austin/dev/promptplay/node_modules/next/dist/server/base-server.js:407:25)
    at async Object.fn (/home/austin/dev/promptplay/node_modules/next/dist/server/next-server.js:758:21)
    at async Router.execute (/home/austin/dev/promptplay/node_modules/next/dist/server/router.js:253:36)
    at async DevServer.run (/home/austin/dev/promptplay/node_modules/next/dist/server/base-server.js:384:29)
    at async DevServer.run (/home/austin/dev/promptplay/node_modules/next/dist/server/dev/next-dev-server.js:741:20)
    at async DevServer.handleRequest (/home/austin/dev/promptplay/node_modules/next/dist/server/base-server.js:322:20) {
  page: '/app'
}```

[robertknight]

I'm not familiar with Next.js, but it looks like it is trying to load this package as CommonJS, but it should be loaded as ESM instead (import instead of require). Perhaps https://nextjs.org/docs/messages/import-esm-externals might be applicable?