Importing react components

Created on 18 April 2021, over 3 years ago
Updated 23 September 2023, about 1 year ago

Problem/Motivation

In attempting to create React apps with imported component (i.e. Material UI), react fails to render results. React works as expected when import component code is not included.

Steps to reproduce

The following hello world example works.

/**
 * @file
 */
ReactDOM.render(React.createElement('h1', null, 'Hello, world!'), document.getElementById('react-ais-1'));

But the following (and any similar example including imports at the beginning, including import react) fails with the log error below.

/**
 * @file
 */
import Button from '@material-ui/core/Button';
ReactDOM.render(React.createElement('h1', null, 'Hello, world!'), document.getElementById('react-ais-1'));

<h3 id="summary-proposed-resolution">Proposed resolution</h3>

I have tried various solutions including writing in JSX and transforming to JS using babel

Remaining tasks

User interface changes

API changes

Data model changes

Watchdog log when react does not render

Notice: Undefined index: path in Drupal\pdb_react\Plugin\Block\ReactBlock->attachSettings() (line 39 of C:\Users\user\Sites\devdesktop\drupal-dev\modules\contrib\pdb\modules\pdb_react\src\Plugin\Block\ReactBlock.php)
#0 C:\Users\user\Sites\devdesktop\drupal-dev\core\includes\bootstrap.inc(600): _drupal_error_handler_real(8, 'Undefined index...', 'C:\\Users\\user\\...', 39, Array)
#1 C:\Users\user\Sites\devdesktop\drupal-dev\modules\contrib\pdb\modules\pdb_react\src\Plugin\Block\ReactBlock.php(39): _drupal_error_handler(8, 'Undefined index...', 'C:\\Users\\user\\...', 39, Array)
#2 C:\Users\user\Sites\devdesktop\drupal-dev\modules\contrib\pdb\src\Plugin\Block\PdbBlock.php(58): Drupal\pdb_react\Plugin\Block\ReactBlock->attachSettings(Array)
#3 C:\Users\user\Sites\devdesktop\drupal-dev\modules\contrib\pdb\modules\pdb_react\src\Plugin\Block\ReactBlock.php(25): Drupal\pdb\Plugin\Block\PdbBlock->build()
#4 C:\Users\user\Sites\devdesktop\drupal-dev\core\modules\block\src\BlockViewBuilder.php(171): Drupal\pdb_react\Plugin\Block\ReactBlock->build()
#5 [internal function]: Drupal\block\BlockViewBuilder::preRender(Array)
#6 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Security\DoTrustedCallbackTrait.php(100): call_user_func_array(Array, Array)
#7 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(781): Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_ren...', 'silenced_deprec...', 'Drupal\\Core\\Ren...')
#8 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(372): Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array)
#9 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(444): Drupal\Core\Render\Renderer->doRender(Array)
#10 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(200): Drupal\Core\Render\Renderer->doRender(Array, false)
#11 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Template\TwigExtension.php(501): Drupal\Core\Render\Renderer->render(Array)
#12 C:\Users\user\Sites\devdesktop\drupal-dev\sites\default\files\php\twig\607b9d25bccf7_page.html.twig_y2H81PIyVIlBa0o8Sn0opk5tQ\057R5Tk2q3dtQjCGi6pOx2IlVsB-Rj1SxmxU8xLDdAg.php(93): Drupal\Core\Template\TwigExtension->escapeFilter(Object(Drupal\Core\Template\TwigEnvironment), Array, 'html', NULL, true)
#13 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\twig\twig\src\Template.php(455): __TwigTemplate_98660d620ca691d53bab44fd87333c5d4787fdc18c164e7e4cc8217b1870b38c->doDisplay(Array, Array)
#14 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\twig\twig\src\Template.php(422): Twig\Template->displayWithErrorHandling(Array, Array)
#15 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\twig\twig\src\Template.php(434): Twig\Template->display(Array)
#16 C:\Users\user\Sites\devdesktop\drupal-dev\core\themes\engines\twig\twig.engine(64): Twig\Template->render(Array)
#17 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Theme\ThemeManager.php(384): twig_render_template('core/themes/sev...', Array)
#18 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(431): Drupal\Core\Theme\ThemeManager->render('page', Array)
#19 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(200): Drupal\Core\Render\Renderer->doRender(Array, false)
#20 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Template\TwigExtension.php(501): Drupal\Core\Render\Renderer->render(Array)
#21 C:\Users\user\Sites\devdesktop\drupal-dev\sites\default\files\php\twig\607b9d25bccf7_html.html.twig_BSY4eTiFlHkqPlfXMWoo56n8M\diXXYYnIpcYDbl-CrvK6ZdVoIinVgVOj11N0RvVXRjg.php(102): Drupal\Core\Template\TwigExtension->escapeFilter(Object(Drupal\Core\Template\TwigEnvironment), Array, 'html', NULL, true)
#22 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\twig\twig\src\Template.php(455): __TwigTemplate_ec79990226b4f99d42c9f97ab768e91cda00baafe0deef34a9c5dbd07e48e8fd->doDisplay(Array, Array)
#23 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\twig\twig\src\Template.php(422): Twig\Template->displayWithErrorHandling(Array, Array)
#24 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\twig\twig\src\Template.php(434): Twig\Template->display(Array)
#25 C:\Users\user\Sites\devdesktop\drupal-dev\core\themes\engines\twig\twig.engine(64): Twig\Template->render(Array)
#26 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Theme\ThemeManager.php(384): twig_render_template('core/themes/sev...', Array)
#27 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(431): Drupal\Core\Theme\ThemeManager->render('html', Array)
#28 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(200): Drupal\Core\Render\Renderer->doRender(Array, false)
#29 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\MainContent\HtmlRenderer.php(147): Drupal\Core\Render\Renderer->render(Array)
#30 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\Renderer.php(573): Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}()
#31 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\Render\MainContent\HtmlRenderer.php(148): Drupal\Core\Render\Renderer->executeInRenderContext(Object(Drupal\Core\Render\RenderContext), Object(Closure))
#32 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\EventSubscriber\MainContentViewSubscriber.php(90): Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object(Symfony\Component\HttpFoundation\Request), Object(Drupal\Core\Routing\CurrentRouteMatch))
#33 [internal function]: Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object(Symfony\Component\HttpKernel\Event\GetResponseForControllerResultEvent), 'kernel.view', Object(Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher))
#34 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher.php(111): call_user_func(Array, Object(Symfony\Component\HttpKernel\Event\GetResponseForControllerResultEvent), 'kernel.view', Object(Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher))
#35 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\symfony\http-kernel\HttpKernel.php(156): Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object(Symfony\Component\HttpKernel\Event\GetResponseForControllerResultEvent))
#36 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\symfony\http-kernel\HttpKernel.php(68): Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object(Symfony\Component\HttpFoundation\Request), 1)
#37 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\StackMiddleware\Session.php(57): Symfony\Component\HttpKernel\HttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#38 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\StackMiddleware\KernelPreHandle.php(47): Drupal\Core\StackMiddleware\Session->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#39 C:\Users\user\Sites\devdesktop\drupal-dev\core\modules\page_cache\src\StackMiddleware\PageCache.php(106): Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#40 C:\Users\user\Sites\devdesktop\drupal-dev\core\modules\page_cache\src\StackMiddleware\PageCache.php(85): Drupal\page_cache\StackMiddleware\PageCache->pass(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#41 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\StackMiddleware\ReverseProxyMiddleware.php(47): Drupal\page_cache\StackMiddleware\PageCache->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#42 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\StackMiddleware\NegotiationMiddleware.php(52): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#43 C:\Users\user\Sites\devdesktop\drupal-dev\vendor\stack\builder\src\Stack\StackedHttpKernel.php(23): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#44 C:\Users\user\Sites\devdesktop\drupal-dev\core\lib\Drupal\Core\DrupalKernel.php(708): Stack\StackedHttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#45 C:\Users\user\Sites\devdesktop\drupal-dev\index.php(19): Drupal\Core\DrupalKernel->handle(Object(Symfony\Component\HttpFoundation\Request))
🐛 Bug report
Status

Postponed: needs info

Version

2.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024