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.

Wrong import for 'react-portal'

See original GitHub issue

The Portal is imported as a default import: https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/components/editor.js#L2

This probably works with the non-es version of the package, however if you use the es-bundle this will crash the build. The correct way to import ‘react-portal’ is (https://github.com/tajo/react-portal/blob/master/README.md):

import { Portal } from 'react-portal';

Changing this, will fix the build.

Issue Analytics

State:
Created 5 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

jfrolichcommented, Aug 9, 2018

It’s not, it includes backward compatibility for React 15.x.

1reaction

isubasticommented, Aug 8, 2018

yarn.lock has both version 3 & 4, that is why it’s not working properly https://github.com/ianstormtaylor/slate/blob/master/yarn.lock#L7040. slate-react use version 3 https://github.com/ianstormtaylor/slate/blob/1efe55602f8c1ad97201874f0172d19c27425fa0/packages/slate-react/package.json#L23 but root of monorepo use version 4 https://github.com/ianstormtaylor/slate/blob/7e0929bd229f32d7bd951a7c3492020981c4fca7/package.json#L59

Top Results From Across the Web

How to correct React Portal error: Target container is not a ...

The console.log reports correctly that the element is a DOM element but React is throwing an error. import "./styles.css" ...

Portals - React

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ReactDOM.createPortal(child ......

react-portal - npm

Start using react-portal in your project by running `npm i react-portal`. ... import { Portal } from 'react-portal'; <Portal> This text is ...

How to Create Error Dialog with React Portal and Axios ...

Learn a global solution for error message dialogs with react portal. ... import { useSelector, useDispatch } from 'react-redux'.

Trouble with @types/react - Blog

Let's start with a TypeScript module for a React Native component. There is an error with the code, can you spot it? //...