By Taggart Jensen


2019-06-12 13:21:43 8 Comments

I want to know how to add a create-react-app to a block, created with `npx create-react-app in Drupal 8. I'm currently getting a React error. I followed a tuturial I found, but I'm not sure if this is the best solution.

What I all-ready do know:

  1. How to create custom modules & blocks in Drupal 8
  2. How to add custom javascript libraries to Drupal 8
  3. Strong understanding of React and Drupal integrations
  4. I've had success doing similar things in the past, but I'm having trouble this time. The problem might be related to newer version of React, but I'm not sure.

Steps:

  1. Created a default react app with create-react-app (did not touch anything .. just defaults works see the default sinning logo / done this many many times before)
  2. Created a custom block module in Drupal.
  3. Tried to include React's build scripts into the mymodule.libary.yml file, but found that React adds hashes to the filenames after each build. So the standard way to include JS into Drupal 8 wouldn't work as ideally as I'd like. Forcing me to update the library each time a performed a new build.
  4. I searched for solution that would allow me to keep the mymodule.libary.yml unchanged. I found a tutorial that provided a solution to this dilemma on: https://www.appnovation.com/blog/using-react-library-drupal. I followed the tutorial and installed "react-app-rewired" and created a "config-overrides.js" file with:

    module.exports = function override(config, env) { 
      config.optimization.runtimeChunk = false; 
      config.optimization.splitChunks = { 
        cacheGroups: { default: false }
      }; 
      return config; 
    }
    
  5. Updated package.json file to use app rewind

    "scripts": {
      "start": "react-app-rewired start",
      "test": "react-scripts test",
      "eject": "react-scripts eject",
      "build": "react-app-rewired build && yarn run build:dist",
      "build:dist": "cd build && cp static/js/*.js main.js && cp static/css/*.css main.css"
     },
    
  6. Updated mymodule.libary.yml file with:

    mymodule.block.component:
      version: VERSION
      js:
        assets/js/build/main.js: {scope: footer}
      css:
        component:
          assets/js/build/main.css: {}
        dependencies:
          - core/drupal
    
  7. I ran: "npm run-script build" which builds the static build dir with the correct "main.js" & "main.css" and moved the build folder to "MYMODULE/assets/js/".

  8. Called the library in my block:

    public function build() { $build = []; $build['#cache']['max-age'] = 0;

    $build['something']['#markup'] = '<div id="root"></div>';
    $build['#attached']['library'] = [
      'mymodule/mymodule.block.component',
    ];
    return $build;
    

    }

  9. I got this error (https://reactjs.org/docs/error-decoder.html/?invariant=200), which means "Target container is not a DOM element."

Does anyone know why I'm getting this error? Does anyone know if this is the best solution to include a create-react-app in a custom Drupal 8 block?

0 comments

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] Override view-list and get items properties

  • 2019-05-22 15:33:05
  • Codaline
  • 73 View
  • 0 Score
  • 1 Answer
  • Tags:   8 theming

0 Answered Questions

Using Raphaël JavaScript library

  • 2019-04-18 19:02:28
  • turpentyne
  • 29 View
  • 0 Score
  • 0 Answer
  • Tags:   8 javascript

2 Answered Questions

[SOLVED] REST logout without logout_token

  • 2018-04-03 08:58:48
  • Marius Ilie
  • 818 View
  • 2 Score
  • 2 Answer
  • Tags:   8

1 Answered Questions

[SOLVED] Common Custom PHP Library: Drupal 8 and Stand-alone Shell Scripts

  • 2018-04-21 17:50:46
  • Greg Sims
  • 243 View
  • 3 Score
  • 1 Answer
  • Tags:   8 theming

1 Answered Questions

[SOLVED] How to get friendly URLs to work in a headless implementation?

  • 2018-01-02 03:25:27
  • xenon
  • 65 View
  • 0 Score
  • 1 Answer
  • Tags:   8

0 Answered Questions

What is the best way to access css and js from drupal 8 theme

  • 2016-04-23 16:20:01
  • Pixelgrey
  • 131 View
  • 2 Score
  • 0 Answer
  • Tags:   8 theming

1 Answered Questions

[SOLVED] How to get the updated content of a block via an AJAX call?

  • 2014-04-11 13:45:10
  • Kevin Bradshaw
  • 2938 View
  • 4 Score
  • 1 Answer
  • Tags:   blocks 8

1 Answered Questions

[SOLVED] Can't find variable: Drupal

  • 2016-12-21 13:32:43
  • Kpone
  • 445 View
  • 0 Score
  • 1 Answer
  • Tags:   8 javascript

2 Answered Questions

[SOLVED] Why are the CSS files in my .info not applied (scripts work fine)?

2 Answered Questions

[SOLVED] How to theme a view block

  • 2014-04-08 14:16:48
  • Taieb Baccouch
  • 122 View
  • 1 Score
  • 2 Answer
  • Tags:   views blocks

Sponsored Content