Sage 10 with react 18

bud
1

Hi folks :slight_smile:

I’m new to Sage development and am trying to set up Sage 10 combined with React by using react-abode. (react-abode - npm) Sadly I don’t get it work using react 18, because due to bud-react there is still React 17 loaded. (bud/package.json at e177b3c8d0edafd562927fbd04e5f28ce51ac77b · roots/bud · GitHub)
Is there any chance this will be updated in the near future? Or am I missing something?

Thanks & best regards
Philipp

2

If I understand this correctly, react-abode-npm is used during runtime (at least the underlying react part) - while bud is used during build-time, so their react dependency versions shouldn’t conflict?

3

Thanks for your answer!

I’m a bit confused, my package.json has the following dependencies:

  "devDependencies": {
    "@roots/bud": "6.6.6",
    "@roots/bud-sass": "6.6.6",
    "@roots/bud-tailwindcss": "6.6.6",
    "@roots/sage": "6.6.6"
  },
  "dependencies": {
    "@splidejs/react-splide": "^0.7.12",
    "bootstrap": "^5.2.3",
    "classnames": "^2.3.2",
    "react": "^18.2.0",
    "react-abode": "^2.0.0",
    "react-animate-height": "^3.1.0",
    "react-dom": "^18.2.0"
  }

The problem seems to be that react, react-dom and react-abode ship in version 18.2.0, but bud uses React in version 17. (Found out by using npm explain react-dom) When I run yarn build or yarn dev the compile works fine - but I get the following runtime error:

client.js:12 Uncaught (in promise) TypeError: m.createRoot is not a function
    at exports.createRoot (client.js:12:1)
    at react-abode.esm.js:635:1

When I use the debugger I also can see that it loads react-dom in version 17.0.2. Do you have any idea?

Thanks & best regards

4

Indeed, bud-react has react@17 as dependency.
However, npm should install a different react package version and require/import should also resolve to it.

It appears that webpack that is used by bud for building the app script uses a different react version. One can force a specific package version, see this guide Webpack: Installing different versions of the same package | by med bouzid | Medium, does that help?

5

Thanks for your answer and your help. Sadly it doesn’t work for me, because I’m not adding the old react-dom version (17.0.2) directly over my package.json, I’m only loading the new version.

npm explain react-dom gives me the following output:

 react-dom@18.2.0
node_modules/react-dom
  react-dom@"^18.2.0" from the root project
  peer react-dom@">=18" from react-abode@2.0.0
  node_modules/react-abode
    react-abode@"^2.0.0" from the root project
  peer react-dom@">=16.8.0" from react-animate-height@3.1.0
  node_modules/react-animate-height
    react-animate-height@"^3.1.0" from the root project

react-dom@17.0.2 dev
node_modules/@roots/bud-react/node_modules/react-dom
  react-dom@"17.0.2" from @roots/bud-react@6.6.6
  node_modules/@roots/bud-react
    @roots/bud-react@"6.6.6" from @roots/bud-preset-wordpress@6.6.6
    node_modules/@roots/bud-preset-wordpress
      @roots/bud-preset-wordpress@"6.6.6" from @roots/sage@6.6.6
      node_modules/@roots/sage
        dev @roots/sage@"6.6.6" from the root project
    peerOptional @roots/bud-react@"*" from @roots/sage@6.6.6
    node_modules/@roots/sage
      dev @roots/sage@"6.6.6" from the root project
  peer react-dom@"^15.0.0 || ^16.0.0 || ^17.0.0" from react-hot-loader@4.13.1
  node_modules/@roots/bud-react/node_modules/react-hot-loader
    react-hot-loader@"^4.13.1" from @roots/bud-react@6.6.6
    node_modules/@roots/bud-react
      @roots/bud-react@"6.6.6" from @roots/bud-preset-wordpress@6.6.6
      node_modules/@roots/bud-preset-wordpress
        @roots/bud-preset-wordpress@"6.6.6" from @roots/sage@6.6.6
        node_modules/@roots/sage
          dev @roots/sage@"6.6.6" from the root project
      peerOptional @roots/bud-react@"*" from @roots/sage@6.6.6
      node_modules/@roots/sage
        dev @roots/sage@"6.6.6" from the root project

I cannot change the react-dom@17.0.2 reference because it is implicitly loaded from another package. (bud-react) Do you have any other idea?

6

This is fixed in v6.6.9:

import React from 'react';
import { createRoot } from 'react-dom';

const App = () => <div>Hello world</div>;

createRoot(document.getElementById('root')).render(<App />);

{
  "devDependencies": {
    "@roots/bud": "6.6.9",
    "@roots/bud-tailwindcss": "6.6.9",
    "@roots/bud-react": "6.6.9",
    "@roots/sage": "6.6.9"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

❯ yarn why react  

[1/4] 🤔  Why do we have the module "react"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "react@18.2.0"
info Has been hoisted to "react"
info Reasons this module exists
   - Specified in "dependencies"
   - Hoisted from "@roots#sage#@roots#bud-preset-wordpress#@roots#bud-react#react"
=> Found "@roots/bud-support#react@17.0.2"
info This module exists because "@roots#bud#@roots#bud-support" depends on it.

❯ yarn bud build
                                         
◉  sage ./public [1edbb3f48d40e7c988ea]
│
├─ entrypoints
│ ├─ app
│ │ ├─ js/runtime.28e92d.js    953 bytes
│ │ ├─ css/app.9e0b85.css         5.1 kB
│ │ └─ js/app.d1a804.js        398 bytes
│ └─ editor
│   ├─ js/runtime.28e92d.js    953 bytes
│   ├─ js/259.6cf96b.js        291 bytes
│   ├─ css/editor.31d6cf.css
│   └─ js/editor.359dbc.js     497 bytes
│
│
└─ compiled 13 modules in 172ms
2 Likes