Is CommonJS supported?

[xorxsan]

Hi,

I'd like to know if CommonJS is supported by SWR.

I'm asking because doing this const useSWR = require("swr") leads to useSWR is not a function. I already saw a thread related to this, but I couldn't find a way around this.

For instance, modifying your basic example application from https://swr.vercel.app/es-ES/examples/basic by converting it to CommonJS leads to this issue:

const React = require("react");
const useSWR = require("swr");

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function App() {
  const { data, error, isLoading } = useSWR(
    "https://api.github.com/repos/vercel/swr",
    fetcher
  );

  if (error) return "An error has occurred.";
  if (isLoading) return "Loading...";
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👁 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

TypeError
useSWR is not a function

Thanks.

[agammann]

Yes. With CommonJS, require('swr') returns the module's exports object. The hook is its default export:

const React = require('react');
const useSWR = require('swr').default;

const fetcher = (url) => fetch(url).then((res) => res.json());

Your component can then call useSWR(...) as before. If the whole file is CommonJS, use module.exports = App instead of export default App; JSX still needs your usual build step.

I checked SWR 2.5.1: typeof require('swr') is "object", typeof require('swr').default is "function", and a component using that function rendered successfully. The package provides a require entry point.