Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update docs for commonjs import patterns

See original GitHub issue

Case

I updated package deps from v0.16.0 to v0.17.0, v0.17.1 and v0.17.2 which all are fine. But got errors from the version v0.17.3 up to the latest v0.17.5 on React.createElement:

  const reactElement = React.createElement(GraphiQL, {
    query: currentQuerySource || kDefaultQuery,
    fetcher: fetcher,
    variables: '',
    response: '',
    onEditQuery: onEditQuery,
    onEditVariables: onEditVariables,
  })

Kindly please advise. Thanks.

Details

build.js:84381 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
warningWithoutStack @ build.js:84381
build.js:82442 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at createFiberFromTypeAndProps (build.js:82442)
    at createFiberFromElement (build.js:82465)
    at reconcileSingleElement (build.js:71339)
    at reconcileChildFibers (build.js:71399)
    at reconcileChildren (build.js:73909)
    at updateHostRoot (build.js:74380)
    at beginWork$1 (build.js:76003)
    at HTMLUnknownElement.callCallback (build.js:56149)
    at Object.invokeGuardedCallbackDev (build.js:56198)
    at invokeGuardedCallback (build.js:56253)
build.js:80104 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (build.js:56209)
    at invokeGuardedCallback (build.js:56253)
    at beginWork$$1 (build.js:81593)
    at performUnitOfWork (build.js:80511)
    at workLoopSync (build.js:80484)
    at performSyncWorkOnRoot (build.js:80083)
    at scheduleUpdateOnFiber (build.js:79511)
    at updateContainer (build.js:82916)
    at build.js:83341
    at unbatchedUpdates (build.js:80246)

Screenshot

screnschot

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:12 (6 by maintainers)

Top GitHub Comments

1reaction

acaocommented, Dec 14, 2019

i think you’ll need to use babelify etc as well

1reaction

acaocommented, Dec 12, 2019

ah ok! we just migrated our library build from the original browserify setup, but yeah it should still be supported for consumption just fine!

the babel config and plugin versions in the webpack example should give you a good start if you still need to finesse them!

Top Results From Across the Web

CommonJS modules | Node.js v19.3.0 Documentation

CommonJS modules are the original way to package JavaScript code for Node.js. Node.js also supports the ECMAScript modules standard used by browsers and ......

Writing Typescript for Many Import Patterns and Intellisense

It looks like I can solve this in my babel configuration by using babel-plugin-replace-ts-export-assignment. Appended my .babelrc like:

Documentation - Modules - TypeScript

exports = syntax, and you can find information about the other module patterns in the reference section under Modules. How JavaScript Modules are...

no-restricted-imports - ESLint - Pluggable JavaScript Linter

Imports are an ES6/ES2015 standard for making the functionality of other modules available in your current module. In CommonJS this is implemented through ......

CommonJS Notes - RequireJS

If you have modules that are in the traditional CommonJS module format, then you can easily ... See the API docs for more...