Uncaught TypeError: Object(...) is not a function

[AlessandroAnnini]

Hi,
as soon as I try to make a query I have this error:

Uncaught TypeError: Object(...) is not a function
    at Client.createRequestOperation (urql.es.js:506)
    at Client.executeQuery (urql.es.js:522)
    at urql.es.js:951
    at urql.es.js:966
    at commitHookEffectList (react-dom.development.js:17860)
    at commitPassiveHookEffects (react-dom.development.js:17887)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitPassiveEffects (react-dom.development.js:19513)
    at wrapped (scheduler-tracing.development.js:177)
    at flushFirstCallback (scheduler.development.js:99)
    at flushWork (scheduler.development.js:216)
    at MessagePort.push../node_modules/scheduler/cjs/scheduler.development.js.channel.port1.onmessage (scheduler.development.js:619)

It's strange because the same exact project inside codesandbox.io was working perfectly but now I have the same error in local and on netlify.
I cannot share this project, I'm sorry

I am using this (from package.json):

"dependencies": {
    "@material-ui/core": "3.9.2",
    "@material-ui/icons": "3.0.2",
    "axios": "0.18.0",
    "date-fns": "1.30.1",
    "graphql": "14.1.1",
    "lodash": "4.17.11",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-router-dom": "4.3.1",
    "react-scripts": "2.0.3",
    "recharts": "1.5.0",
    "urql": "1.0.4"
  },

[kitten]

Hiya, that's certainly odd! I apologise, we haven't announced v1 publicly for this very reason. We're still searching for good error messages that we can add here and there for more clarity.

Do you have a small snippet at least of your usage of useQuery? A completely anonymised snippet would be completely fine! Feel free to comment out the actual query, variables, and component around it 👌

[AlessandroAnnini]

Sure!, I hope this is enough

I start like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Main from './pages/Main';
import * as serviceWorker from './serviceWorker';
import { Provider, createClient } from 'urql';

const gcProjectId = process.env.GC_PROJECT_ID;
const url = `https://api.graph.cool/simple/v1/${gcProjectId}`;

const client = createClient({
  url,
  fetchOptions: () => {
    const token = window.localStorage.getItem("token");
    return token
      ? {
          headers: {
            Authorization: `Bearer ${token}`
          }
        }
      : {};
  }
});

const App = () => (
  <Provider value={client}>
    <Router>
      <Main />
    </Router>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

then I use it like this:

import React from 'react';
import { Route } from 'react-router-dom';
import { useQuery } from 'urql';
import { Provider, createClient } from 'urql';

import asyncComponent from './../AsyncComponent';
import queries from './../queries';
import { DataProvider } from './../context';

const Dashboard = asyncComponent(() => import('./../pages/Dashboard'));
const Users = asyncComponent(() => import('./../pages/Users'));
const ActiveDoc = asyncComponent(() => import('./../pages/ActiveDoc'));

export default props => {
  const query = queries.TotalQuery;
  const [res] = useQuery({ query });

  if (res.fetching || !res.data) {
    return 'Loading...';
  } else if (res.error) {
    return `Oh no! ${res.error}`;
  }

  return <div>Stuff</div>;
};

[kitten]

I'm afraid it's hard to pin this down; your usage here looks correct and I'm unsure of how an error in urql would throw Object(...) as that'd be a very specific object being referred to in an error that's probably looking like Object() if I'd have to guess that this is v8.

Also this doesn't seem to be mapping back to the actual file 🤔 Can you maybe check the line in urql.es.js:506 in your runtime/browser please? That'd help tremendously!

    at Client.createRequestOperation (urql.es.js:506)
    at Client.executeQuery (urql.es.js:522)
    at urql.es.js:951
    at urql.es.js:966

[AlessandroAnnini]

This is it:

When this happens my query is:

(double quotes are included, and yes, I had to "censor" it...)

"
  query GetUsers {
    allUsers {
      ...
    }
    allCompanies {
      ...
    }
    allSalesDocuments {
      ...
    }
    allStuff...
    allMoreStuff...
  }
"

the super-strange thing is that it is working inside codesandbox!

[kitten]

@sun2rise that kind of sounds like a dependency issue with GraphQL maybe? Given that it errors when calling "parse". We're using the same version on this repo for verification and testing, so maybe make sure that all dependencies are installed correctly and that your lockfile's integrity is good?

It could also be a minification or bundling issue but those would be harder to pin down

[AlessandroAnnini]

Hi @kitten, thanks for your support!
I understand that it can be difficult to find the cause for this one so I made a saple project that gives me the same problem
you can find it here -->

This is the simplest project possible, as you will see.

It works fine on codesandbox, but when I download the source and try locally it give the error.
Don't worry for the data and the token, it's all about a test database too.

[AlessandroAnnini]

@kitten do you think that the codesandbox could help? does it work right on your host?

[kitten]

Sorry for being inactive for a while! I've been caught up in a couple of other projects.

I can successfully replicate your bug using the Sandbox as described (Export to zip, yarn, start, etc).
It's an issue with create-react-app, i.e. react-scripts.

If you upgrade react-scripts that fixes the issue. I suspect it's something with .mjs imports.