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
Related
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?
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'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 working in a project where some of dependencies are a self made UI library components.
Those components has its proper .css file. The source structure is something like this:
|- src
|-|
|- components
|-|
| Component
|-|
|- index.js
|- Component.js
|- Component.css
The same structure is published in a build folder, with each .js file transpiled for a production compatible JavaScript format.
The project I consume this module vw using React-Starter-Kit and when I try to start the service using yarn start or npm start, I get the following error:
SyntaxError: Unexpected token .
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> ([... path to my component inside node_modules]:13:15)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
/pathtomyproject/runServer.js:67
throw new Error(`Server terminated unexpectedly with code: ${code} signal: ${signal}`);
I guess the problem is about babel trying to read .css files, but I would like to know if someone have a good approach to avoid this kind of problem, using the actual boilerplate I'm using right now (React Starter Kit).
UPDATE
I forgot to mention this. If I import that module using relative path sintax:
import Component, { Styles } from '../../../node_modules/#scope/my-project/Component';
It works as expected, obviously is nice to have syntatic sugar import
Thanks.
According to your answer, I think, that import has to be:
import Styles from './Component.css',
it's necessary to add .css extension to show that it's not .js and it has to be processed by css-loaders (in case if webpack is used) or other tools.