By Taggart Jensen


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

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 ?!

0 comments

Related Questions

Sponsored Content

0 Answered Questions

Using Raphaël JavaScript library

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

0 Answered Questions

How can I access/inject external objects into my custom code at runtime

  • 2019-03-07 16:05:46
  • Laurence Fass
  • 24 View
  • 0 Score
  • 0 Answer
  • Tags:   javascript

1 Answered Questions

[SOLVED] How do I include a React app?

  • 2018-06-29 20:32:01
  • Daniel Lefebvre
  • 315 View
  • 4 Score
  • 1 Answer
  • Tags:   blocks

1 Answered Questions

[SOLVED] Add a CSS file and a JS file to your Drupal application directory

2 Answered Questions

[SOLVED] Why does RELAXed Web Services Not appear in the module list?

  • 2018-05-03 14:54:12
  • James R
  • 123 View
  • 0 Score
  • 2 Answer
  • Tags:   8 composer

1 Answered Questions

[SOLVED] Is there an automatic way to convert old versioning conventions?

  • 2017-04-09 19:31:17
  • therobyouknow
  • 231 View
  • 0 Score
  • 1 Answer
  • Tags:   8 updating composer

2 Answered Questions

[SOLVED] Problems adding javascript to a specific page

  • 2014-07-31 01:20:03
  • user3735633
  • 528 View
  • 1 Score
  • 2 Answer
  • Tags:   javascript hooks

2 Answered Questions

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

1 Answered Questions

[SOLVED] Adding custom block problems

  • 2015-06-21 18:09:49
  • Anton Vlasenko
  • 2095 View
  • 2 Score
  • 1 Answer
  • Tags:   blocks 8

Sponsored Content