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))