{"id":11271,"library":"matchmediaquery","title":"matchmediaquery","description":"matchmediaquery is an open-source JavaScript library providing isomorphic media query functionality, allowing developers to check CSS media queries both in browser environments and server-side contexts. Originally forked from the `matchmedia` project due to its maintainer's publishing delays, this library aimed to provide an active alternative. However, its last stable version (0.4.2) was published in late 2015, and the project has seen no significant updates or maintenance since. As a result, it is considered abandoned and may not be suitable for modern web development, lacking support for contemporary JavaScript module systems (ESM), TypeScript definitions, or up-to-date media query specifications. Its primary differentiator was its isomorphic capability, which is now often handled by more modern, actively maintained libraries or frameworks.","status":"abandoned","version":"0.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/ncochard/matchmediaquery","tags":["javascript","media","query","matchmedia","isomorphic","mq","responsive"],"install":[{"cmd":"npm install matchmediaquery","lang":"bash","label":"npm"},{"cmd":"yarn add matchmediaquery","lang":"bash","label":"yarn"},{"cmd":"pnpm add matchmediaquery","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily uses CommonJS module exports. Direct ESM 'import' syntax is not supported without a transpiler or bundler setup that explicitly handles CommonJS modules.","wrong":"import matchMediaQuery from 'matchmediaquery';","symbol":"matchMediaQueryFunction","correct":"const matchMediaQuery = require('matchmediaquery');"},{"note":"The library exports a single function as its default (module.exports), not a named property. Destructuring will result in `undefined`.","wrong":"const { matchMediaQuery } = require('matchmediaquery');","symbol":"matchMediaQueryFunction (named)","correct":"const matchMediaQuery = require('matchmediaquery');"},{"note":"No official TypeScript type definitions are shipped with the package, nor are they available on DefinitelyTyped. Type declarations would need to be created manually if used in a TypeScript project.","wrong":"import type { MatchMediaQuery } from 'matchmediaquery';","symbol":"Type Definition","correct":"/// <reference types=\"matchmediaquery\" />"}],"quickstart":{"code":"const matchMediaQuery = require('matchmediaquery');\n\n// Example 1: Basic media query check (client-side/browser context)\n// In a browser, this will use window.matchMedia. On the server,\n// it simulates based on provided or default properties.\nconst isSmallScreen = matchMediaQuery('(max-width: 600px)');\nconsole.log(`Is small screen (browser context): ${isSmallScreen}`);\n\n// Example 2: Server-side simulation with specific viewport properties\n// This allows you to test media queries on the server without a DOM.\nconst simulateMobile = matchMediaQuery('(min-width: 320px) and (max-width: 768px)', {\n  type: 'screen',\n  width: 375, // Simulate iPhone width\n  height: 667,\n  devicePixelRatio: 2\n});\nconsole.log(`Is mobile (server simulated): ${simulateMobile}`);\n\n// Example 3: Another server-side check for a larger desktop screen\nconst simulateDesktop = matchMediaQuery('(min-width: 1024px)', {\n  type: 'screen',\n  width: 1280,\n  height: 800,\n  devicePixelRatio: 1\n});\nconsole.log(`Is desktop (server simulated): ${simulateDesktop}`);","lang":"javascript","description":"Demonstrates how to import and use `matchmediaquery` to evaluate media queries, including server-side simulation of viewport properties."},"warnings":[{"fix":"Migrate to a modern, actively maintained library for isomorphic media queries or use client-side `window.matchMedia` directly for browser contexts. Consider libraries like `react-responsive` (for React) or custom solutions.","message":"The library is considered abandoned. Its last update was in 2015, meaning it does not support modern JavaScript features, module systems (ESM), or contemporary CSS media query specifications (e.g., `prefers-color-scheme`, `dynamic-range`). Using it in a modern project will likely lead to compatibility issues and missing functionality.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Ensure your environment supports CommonJS `require()` or configure your bundler (e.g., Webpack, Rollup) to correctly transpile CJS modules. In Node.js, use `const matchMediaQuery = require('matchmediaquery');`","message":"The library is exclusively CommonJS. Attempting to use `import` statements directly in an ESM-native Node.js project or without a bundler configured for CJS interop will result in a module resolution error.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Create a custom declaration file (e.g., `matchmediaquery.d.ts`) to provide type information. Example: `declare module 'matchmediaquery' { function matchMediaQuery(query: string, options?: object): boolean; export = matchMediaQuery; }`","message":"There are no official TypeScript type definitions available for `matchmediaquery`. Developers using TypeScript will encounter 'Could not find a declaration file for module' errors or have to manually declare types.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always provide a comprehensive set of viewport and device-specific options (e.g., `width`, `height`, `type`, `devicePixelRatio`) when using `matchMediaQuery` in a server-side context to ensure accurate simulation of the target environment.","message":"The library's server-side simulation relies on specific options (e.g., `width`, `height`, `devicePixelRatio`) being passed to accurately evaluate media queries. Without these, it may make incorrect assumptions or return unexpected results.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For CommonJS-only libraries, ensure your project's `package.json` does NOT have `\"type\": \"module\"` if you are using `require()`. If your project is ESM-native, you might need to use dynamic `import('matchmediaquery')` or resort to a bundler to handle CJS modules.","cause":"Attempting to use `require()` in an ES module (type: 'module' in package.json) environment, or vice-versa, when the library is exclusively CommonJS.","error":"ERR_REQUIRE_ESM: require() of ES module /path/to/node_modules/matchmediaquery/index.js from /path/to/your/app.js not supported."},{"fix":"Import the library as a default CommonJS export: `const matchMediaQuery = require('matchmediaquery');` if in a CJS context. If using a bundler with ESM, ensure it correctly handles CJS default exports.","cause":"This typically occurs when trying to destructure a CommonJS default export as a named export in an ES module environment, or if a bundler incorrectly transpiles the module.","error":"TypeError: (0 , matchmediaquery_1.matchMediaQuery) is not a function"},{"fix":"Create a manual type declaration file (e.g., `global.d.ts` or `matchmediaquery.d.ts`) in your project. Add `declare module 'matchmediaquery' { function matchMediaQuery(query: string, options?: object): boolean; export = matchMediaQuery; }` to define its interface.","cause":"The TypeScript compiler cannot locate type definitions for the `matchmediaquery` package.","error":"TS2307: Cannot find module 'matchmediaquery' or its corresponding type declarations."}],"ecosystem":"npm"}