Object(...) is not a function

[evayde]

Hello there,

The Error

I am getting the following error message:

Uncaught TypeError: Object(...) is not a function
    at useSWR (use-swr.js:123)
    at useRequest (useRequest.ts:26)
    at Home (index.tsx:13)
    at renderWithHooks (react-dom.development.js:16260)
    at mountIndeterminateComponent (react-dom.development.js:18794)
    at beginWork$1 (react-dom.development.js:20162)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at scheduleUpdateOnFiber (react-dom.development.js:23698)
    at updateContainer (react-dom.development.js:27103)
    at react-dom.development.js:27528
    at unbatchedUpdates (react-dom.development.js:24433)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)
    at Object.hydrate (react-dom.development.js:27591)
    at renderReactElement (index.js:31)
    at doRender$ (index.js:38)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:216)
    at doRender (index.js:34)
    at render$ (index.js:18)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:216)
    at render (index.js:18)
    at next-dev.js:4
    at fouc.js:4

My Setup

I get this error with the following packages:

NodeJS 12, yarn 1.21.1, typescript 3.7.2

  "dependencies": {
    "@next/bundle-analyzer": "^9.2.1",
    "axios": "^0.19.2",
    "express": "^4.17.1",
    "i18next-browser-languagedetector": "^4.0.1",
    "i18next-express-middleware": "^1.9.1",
    "isomorphic-unfetch": "^3.0.0",
    "mobx": "^5.15.4",
    "mobx-react": "^6.1.7",
    "next": "9.2.1",
    "next-compose-plugins": "^2.2.0",
    "next-i18next": "^4.2.0",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "source-map-support": "^0.5.16",
    "swr": "0.1.16",
    ...

Reproduction

I am getting this error implementing the axios-typescript and basic-typescript examples. I copied the files from lib into my page and copied the lines from the example page as well.

for example

import useRequest from "../api/useRequest"; // <- copied

const Home: FC<any> = () => {
  const data = useRequest<any>({
    url: 'http://localhost:3000/api/posts'
  }) // <-- throws error

The useRequest hook does also throw a type error, as described here: https://github.com/zeit/swr/issues/238

Expected behavior

Hook wouldnt throw an error and would respond with my api's data. Btw. calling http://localhost:3000/api/posts will respond with my data as expected and browser-fetch does work.

[evayde]

Issue can be closed.

This error was caused by the following configuration.

I had the following config in next.config.js:

    webpack: (config, { isServer }) => {
      if (!isServer) {
        config.externals = {
          "i18next-express-middleware": "{}",
          "./config": "{}",
        };
      }
      return config;
    },

and this line:

          "./config": "{}",

was overwriting imports from swr.