Adding pre built create-react-app to D8 block

by Taggart Jensen   Last Updated June 12, 2019 15:07 PM

this is my first question here!, so strap on in as this will be good!

I want to know how to add a pre "built" react app to a block, created with `npx create-react-app

reasons are i want to use a LOT of other libraries with in react

what I all-ready do know:

1) how to create custom blocks

2) how to add custom Drupal Js

3) 90% that is google-abe on the subject of react + Drupal.

4) have done the exact thing I am asking many times this in the past,

5) with new version of react cant seem to figure it out.

Steps:

1) created a 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) due to reacts new-ish code splitting (https://github.com/facebook/create-react-app/issues/5306)

had to add "react-app-rewired"

suggested in https://www.appnovation.com/blog/using-react-library-drupal

created "config-overrides.js"

with :

module.exports = function override(config, env) {
config.optimization.runtimeChunk = false;
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false
    }
  };

 return config;
}

changed 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"

},

NOTE : "cd build && cp static/js/.js main.js && cp static/css/.css main.css"

this is to ensure when working on the react app, can keep the module.libraries.yml the same

somemodule.block.component:
 version: VERSION
 js:
   assets/js/build/main.js: {scope: footer}
 css:
 component:
    assets/js/build/main.css: {}
 dependencies:
   - core/drupal
#don't pull me up on indenting its right this aint my first rodio

(Indenting may not reflect the correct modules code)

now the workflow:

I ran "npm run-script build" which builds the static build dir with the correct "main.js" & "main.css"

move the build folder to "MYMODULE/assets/js/"

called the lib in my block:

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

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

(like i have done manny (many) times before )

and get some crazy non helpful error (https://reactjs.org/docs/error-decoder.html/?invariant=200)

So the question is, has anyone been able to add (as of June 2019) a pre built (static served react app) to Drupal 8.7.3 if so please share thoughts.

possible duplicates: How do I include a React app? (don't think this will work)

ps admins may not think this is a "Drupal" question due to various different types of ways react and Drupal can work together

however: https://reactfordrupal.com/

https://www.drupal.org/project/drupal/issues/2926656 + many many many more.

Where i am think Answer is, ejecting and config separate ?!



Related Questions


Updated June 16, 2017 13:07 PM

Updated June 20, 2017 09:07 AM

Updated February 25, 2016 06:03 AM

Updated July 05, 2016 08:04 AM

Updated September 06, 2016 09:03 AM