I'm trying to add the sanity-plugin-markdown plugin to my Sanity Studio 3 project embedded in my Next.js 13 app using the App directory.
Plugin:
https://www.sanity.io/plugins/sanity-plugin-markdown
As soon as I add the markDownSchema to the plugin section of the sanity.config.ts file as instructed in the documentation, it provides the following error during build.
ReferenceError: navigator is not defined
[ ] info - Generating static pages (0/6)ReferenceError: navigator is not defined
at /Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46841:19
at /Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46835:28
at Object.12714 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46837:2)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.23498 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:90609:18)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.65406 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:143976:30)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.85204 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:151753:80)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
ReferenceError: navigator is not defined
at /Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46841:19
at /Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46835:28
at Object.12714 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46837:2)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.23498 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:90609:18)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.65406 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:143976:30)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.85204 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:151753:80)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
Error occurred prerendering page "/studio/[[...index]]". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: navigator is not defined
at /Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46841:19
at /Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46835:28
at Object.12714 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:46837:2)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.23498 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:90609:18)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.65406 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:143976:30)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
at Object.85204 (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/chunks/97.js:151753:80)
at __webpack_require__ (/Users/mathias/Documents/GitHub/mathiass_io/.next/server/webpack-runtime.js:25:43)
info - Generating static pages (6/6)
> Build error occurred
Error: Export encountered errors on following paths:
/(admin)/studio/[[...index]]/page: /studio/[[...index]]
at /Users/mathias/Documents/GitHub/mathiass_io/node_modules/next/dist/export/index.js:415:19
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Span.traceAsyncFn (/Users/mathias/Documents/GitHub/mathiass_io/node_modules/next/dist/trace/trace.js:79:20)
at async /Users/mathias/Documents/GitHub/mathiass_io/node_modules/next/dist/build/index.js:1400:21
at async Span.traceAsyncFn (/Users/mathias/Documents/GitHub/mathiass_io/node_modules/next/dist/trace/trace.js:79:20)
at async /Users/mathias/Documents/GitHub/mathiass_io/node_modules/next/dist/build/index.js:1259:17
at async Span.traceAsyncFn (/Users/mathias/Documents/GitHub/mathiass_io/node_modules/next/dist/trace/trace.js:79:20)
at async Object.build [as default] (/Users/mathias/Documents/GitHub/mathiass_io/node_modules/next/dist/build/index.js:66:29)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
If I delete it the web app runs as normal. I tried with other plugins and they works just fine.
It seems to be something about the paths, but then again it works when the plugin is not installed.
Error: Export encountered errors on following paths: /(admin)/studio/[[...index]]/page: /studio/[[...index]]
Can you see what I might have missed?
Related
I try use https://github.com/mebjas/html5-qrcode
with webpack
npm i html5-qrcode --save
+ html5-qrcode#2.0.11
added 2 packages from 2 contributors in 8.99s
root#21ce69a5652
/application# yarn run encore dev --watch
in js file
import("html5-qrcode");
compilation success but give console error
ncaught (in promise) TypeError: Cannot read property 'Html5Qrcode' of undefined
at Object.<anonymous> (html5-qrcode.min.js:6)
at Object../node_modules/html5-qrcode/dist/html5-qrcode.min.js (html5-qrcode.min.js:8)
at __webpack_require__ (bootstrap:84)
at __webpack_require__.t (bootstrap:182)
require('html5-qrcode');
like import but error is
Uncaught TypeError: Cannot read property 'Html5Qrcode' of undefined
at Object.<anonymous> (html5-qrcode.min.js:6)
at Object../node_modules/html5-qrcode/dist/html5-qrcode.min.js (html5-qrcode.min.js:8)
at __webpack_require__ (bootstrap:79)
at Module../assets/components/ScannerQrCode.js (ScannerQrCode.js:6)
at __webpack_require__ (bootstrap:79)
at Module../assets/components/Games.js (app.js:374)
at __webpack_require__ (bootstrap:79)
at Module../assets/components/Home.js (app.js:748)
at __webpack_require__ (bootstrap:79)
at Module../assets/app.js (app.js:1)
(Author here) This has been fixed in latest release 2.1.0
Github release: mebjas/html5-qrcode/releases/tag/v2.1.0
npm - html5-qrcode
Please let me know if this solves the issue, else let me know or file a issue on the GitHub project directly - mebjas/html5-qrcode
Hi I am trying to import framer-motion into a page in Next Js.
import { motion } from "framer-motion"
This breaks the page. I get the following error in terminal:
/Users/.../Sites/.../node_modules/framer-motion/dist/es/index.js:1
export { MotionConfig, MotionConfigContext } from './context/MotionConfigContext.js';
^^^^^^
SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:931:16)
at Module._compile (internal/modules/cjs/loader.js:979:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (internal/modules/cjs/helpers.js:74:18)
at eval (webpack-internal:///framer-motion:1:18)
at Object.framer-motion (/Users/.../Sites/.../.next/server/pages/work.js:446:1)
at __webpack_require__ (/Users/.../Sites/.../.next/server/pages/work.js:23:31)
I can't see any documentation on this problem anywhere.
Thanks,
I hit this same error. I noticed that Framer Motion (3.10.5) and Next (10.0.9) were both updated in the last 16 hours.
I ran npm update and it fixed this error for me but note that this command updates everything in your package.
If you are worried about breaking changes try updating just the two packages framer and next - npm update framer-motion next or yarn upgrade framer-motion next
I had the same issue, You just need to update your packages.
npm update
I have a problem with importing the Fullcalendar JS library. I installed it with NPM together with momentjs and jquery.
However, I encounter this error in my browser.
fullcalendar.js:211 Uncaught TypeError: Cannot read property 'fn' of undefined
at Object.<anonymous> (fullcalendar.js:211)
at __webpack_require__ (fullcalendar.js:11)
at Object.<anonymous> (fullcalendar.js:743)
at __webpack_require__ (fullcalendar.js:11)
at Object.<anonymous> (fullcalendar.js:347)
at __webpack_require__ (fullcalendar.js:11)
at Object.<anonymous> (fullcalendar.js:1944)
at __webpack_require__ (fullcalendar.js:11)
at fullcalendar.js:20
at fullcalendar.js:20
Here are the imports for the component.
import { PolymerElement, html } from '#polymer/polymer/polymer-element.js';
import '#polymer/iron-ajax/iron-ajax.js';
import './shared-styles.js';
import 'jquery';
import moment from 'moment';
import 'fullcalendar';
How do I solve this issue?
PS: most fullcalendar wrappers or components are not migrated into polymer 3.x
I'm doing this tutorial, which combines the Ionic CLI with Meteor. Everything was fine until it asked me to install meteor-client-bundler. After adding this to package.json:
"meteor-client:bundle": "meteor-client bundle -s api"
And running the commands:
npm install --save-dev tmp
npm run meteor-client:bundle
A new file called meteor-client.js was added to my node_modules folder (as expected). However, when I try importing it via:
import 'meteor-client';
My app crashes and I get this error:
Uncaught TypeError: Cannot read property 'versions' of undefined
at autoupdate_client.js (meteor-client.js:40130)
at fileEvaluate (meteor-client.js:1535)
at Module.require (meteor-client.js:1438)
at _require (meteor-client.js:1457)
at meteor-client.js:40302
at Object.<anonymous> (meteor-client.js:40308)
at Object.module.exports (vendor.js:146981)
at __webpack_require__ (bootstrap 38e1b6bf8728472217f2:54)
at Object.478 (main.ts:1)
at __webpack_require__ (bootstrap 38e1b6bf8728472217f2:54)
The problem appears to be in this line of code:
const autoupdateVersions = __meteor_runtime_config__.autoupdate.versions[clientArch] || {
version: "unknown",
versionRefreshable: "unknown",
versionNonRefreshable: "unknown",
assets: []
};
Where apperently versions is undefined. But the code is extremely long and convoluted, I'm not entirely sure how to go about this.
I'm attempting to build an executable of a small NextJS example app based on the example here using zeit/pkg. Problem is the only feasible entry point (server.js) seems to give me a bunch of errors not currently listed in their issues related to webpack compilation.
If you'd like to reproduce just follow the instructions here and then add pkg. Also - here's the error output below.
ERROR Failed to compile with 2 errors
10:48:35 AM These dependencies were not found:
#babel/runtime/helpers/extends in D:/snapshot/pkg-ssr/node_modules/next/dist/lib/app.js
webpack-hot-middleware/client?autoConnect=false&overlay=false&reload=true
in
D:/snapshot/pkg-ssr/node_modules/next/dist/client/webpack-hot-middleware-client.js
To install them, you can run: npm install --save
#babel/runtime/helpers/extends
webpack-hot-middleware/client?autoConnect=false&overlay=false&reload=true
(node:15964) DeprecationWarning: Module.chunks: Use
Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk
instead
Ready on http://localhost:3000 Client pings, but there's no entry for page: /about { Error: Cannot find module
'D:_experiments\pkg-ssr.next\build-manifest.json'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:592:15)
at Function.Module._resolveFilename (pkg/prelude/bootstrap.js:1278:46)
at Function.Module._load (internal/modules/cjs/loader.js:518:25)
at Module.require (internal/modules/cjs/loader.js:648:17)
at Module.require (pkg/prelude/bootstrap.js:1157:31)
at require (internal/modules/cjs/helpers.js:20:18)
at _callee3$ (D:\snapshot\pkg-ssr\node_modules\next\dist\server\render.js:202:29)
at tryCatch (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:62:40)
at Generator.invoke [as _invoke] (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:296:22)
at Generator.forEach.prototype.(anonymous function) [as next] (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:114:21)
at step (D:\snapshot\pkg-ssr\node_modules\#babel\runtime\helpers\asyncToGenerator.js:12:30)
at _next (D:\snapshot\pkg-ssr\node_modules\#babel\runtime\helpers\asyncToGenerator.js:27:9)
at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' } Client pings, but there's no entry for
page: /about { Error: Cannot find module
'D:_experiments\pkg-ssr.next\build-manifest.json'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:592:15)
at Function.Module._resolveFilename (pkg/prelude/bootstrap.js:1278:46)
at Function.Module._load (internal/modules/cjs/loader.js:518:25)
at Module.require (internal/modules/cjs/loader.js:648:17)
at Module.require (pkg/prelude/bootstrap.js:1157:31)
at require (internal/modules/cjs/helpers.js:20:18)
at _callee3$ (D:\snapshot\pkg-ssr\node_modules\next\dist\server\render.js:202:29)
at tryCatch (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:62:40)
at Generator.invoke [as _invoke] (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:296:22)
at Generator.forEach.prototype.(anonymous function) [as next] (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:114:21)
at step (D:\snapshot\pkg-ssr\node_modules\#babel\runtime\helpers\asyncToGenerator.js:12:30)
at _next (D:\snapshot\pkg-ssr\node_modules\#babel\runtime\helpers\asyncToGenerator.js:27:9)
at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }
In my case, the issue was that I wasn't packaging a built app. I needed to do a few things:
specify the assets and scripts in the package.json like below (note that dist was actually server in my case because I had a custom server and middleware)
"pkg": {
"assets": [
".next/**/*"
],
"scripts": [
".next/dist/**/*.js"
]
},
build the app first using next build
then ensure that whichever way I built the package, I used the package.json. For me the best command was their default example: pkg .
See the following article from Mike Hsu in case you want a repo and instructions to compare to: https://medium.com/#evenchange4/deploy-a-commercial-next-js-application-with-pkg-and-docker-5c73d4af2ee