{"id":14484,"library":"can-use-dom","title":"can-use-dom: Browser DOM Detection Utility","description":"This package provides a very minimalist utility to determine if the current JavaScript environment has access to the Document Object Model (DOM), primarily used for writing isomorphic (universal) JavaScript applications that need to behave differently client-side versus server-side. It exports a simple boolean value, `true` if `window`, `window.document`, and `window.document.createElement` are all defined, and `false` otherwise. The package is extremely lightweight with no dependencies. First released as version `0.1.0` and last updated over nine years ago, its development is considered abandoned. Due to its age, it primarily uses CommonJS module syntax, meaning direct native ESM imports may not function without a bundler or transpilation layer. Modern alternatives often include more sophisticated environment detection or rely on frameworks to abstract these differences. Its main differentiator is its absolute simplicity and singular focus, though its lack of maintenance makes it a less reliable choice for new projects.","status":"abandoned","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/akiran/can-use-dom","tags":["javascript","isomorphic"],"install":[{"cmd":"npm install can-use-dom","lang":"bash","label":"npm"},{"cmd":"yarn add can-use-dom","lang":"bash","label":"yarn"},{"cmd":"pnpm add can-use-dom","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package exports a raw boolean value directly via CommonJS's `module.exports`. Direct native ESM imports may fail or result in `undefined` without bundler transformation, as there are no named or default exports.","wrong":"import canUseDOM from 'can-use-dom';\n// or\nimport { canUseDOM } from 'can-use-dom';","symbol":"canUseDOM","correct":"const canUseDOM = require('can-use-dom');"}],"quickstart":{"code":"const canUseDOM = require('can-use-dom');\n\nif (canUseDOM) {\n  console.log('Current environment supports DOM operations.');\n  // Example: Manipulate the DOM if available\n  const rootElement = document.getElementById('root');\n  if (rootElement) {\n    rootElement.innerHTML = '<h1>Hello from the browser!</h1>';\n    console.log('DOM updated successfully.');\n  }\n} else {\n  console.log('Current environment does NOT support DOM operations (e.g., Node.js server).');\n  // Example: Server-side rendering logic or other non-DOM operations\n  console.log('Performing server-side specific tasks...');\n}\n\n// To run this in Node.js, simply execute the file.\n// To run this in a browser, embed it in an HTML script tag or use a bundler.","lang":"javascript","description":"Demonstrates how to import and use the `can-use-dom` boolean to conditionally execute browser-specific code."},"warnings":[{"fix":"Always use `const canUseDOM = require('can-use-dom');` for direct usage. For projects targeting modern ESM, ensure your bundler (e.g., Webpack, Rollup, Vite) is configured to handle CommonJS modules.","message":"The package exclusively uses CommonJS (`module.exports`). Attempting to use native ES Module `import` syntax will likely result in a runtime error or `undefined` due to a lack of named or default exports, unless your build process specifically transpiles or bundles it.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"For new projects, consider more actively maintained alternatives or implement your own robust environment detection tailored to your specific needs. For existing projects, be aware of potential compatibility issues with newer environments.","message":"This package has not been updated in over nine years (since its initial 0.1.0 release). Its lack of maintenance means it may not address modern browser environments, server-side rendering (SSR) complexities (e.g., JSDOM contexts), or security best practices.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If running in a mocked DOM environment, you might need additional checks to distinguish it from a real browser. For more granular control, extend the check with specific API detections or rely on framework-level environment variables.","message":"The DOM detection logic is very basic (`window`, `document`, `createElement` existence). It might not differentiate between a full browser environment and a mocked DOM environment (like JSDOM used in testing or some SSR setups) which could lead to unexpected behavior if specific browser-only APIs are invoked.","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":"Change the import statement to `const canUseDOM = require('can-use-dom');`.","cause":"Attempting to use ES Module named import syntax (`import { canUseDOM } from 'can-use-dom';`) for a package that only exports via CommonJS `module.exports = ...`.","error":"SyntaxError: Named export 'canUseDOM' not found (module 'can-use-dom' does not have an export named 'canUseDOM')"},{"fix":"Ensure all browser-specific code paths are strictly guarded by `if (canUseDOM) { ... }` or equivalent environment checks, especially when developing isomorphic applications.","cause":"Executing code that accesses `document` or `window` APIs in a non-browser environment (e.g., Node.js) where `canUseDOM` returned `false`, but the conditional check was missed or misconfigured.","error":"TypeError: Cannot read properties of undefined (reading 'document')"}],"ecosystem":"npm"}