Bud.js without Sage - Plain WP installation - imports not working (as externals)

bud
1

I am trying to get bud.js to work with React. However it does not seem to load the externals for it.

Edit: To my current knowledge it actually turns out, that at least react extensions like react-query also don’t seem to work. This might hint towards something in bud itsself possibly not running right?

/**
  * @param {bud} bud
 */

export default async (bud) => {

    bud
        .when(
            bud.isProduction,
            () => bud.hash().minimize(),
        )

        .entry({
            index: ['@src/scripts/index.js', '@src/styles/main.scss'],
        })

        .assets('images')

        .watch('@src/**/*')

        .proxy('http://localhost/')
        .serve('http://localhost:3010/nf-starter/')
        .setPublicPath('/');
};

package.json

{
  "name": "starter",
  "version": "1.0.0",
  "description": "starter theme",
  "main": "index.js",
  "license": "MIT",
  "engines": {
    "node": ">=18.4.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "test": "mocha"
  },
  "devDependencies": {
    "@roots/bud": "^6.0.0",
    "@roots/bud-postcss": "^6.0.0",
    "@roots/bud-preset-wordpress": "^6.0.0",
    "@roots/bud-sass": "^6.0.0",
    "mocha": "^10.0.0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

filename.mjs

import React, { useEffect, useState} from 'react';
import * as ReactDOM from 'react-dom';

const domTargetElement = document.querySelector('#react-notes');
class App extends React.Component {
    render() {

        return (
            <>
                <Notes></Notes>
            </>
        )
    }
}

function Notes() {
    return (
        <>
            <h1>react Notes</h1>
        </>
    )
}

function ReactAppNotes() {
    if (domTargetElement) {
        ReactDOM.render(
            <React.StrictMode>
                <App/>
            </React.StrictMode>,
            domTargetElement);
    }
}

export { ReactAppNotes };

When I import react and console.log(React) i get undefined.

I have tried

  • adding react manually into package.json (yarn add react)
  • adding bud.js externals
  • manually adding script into wordpress header (works but not really the solution i’d like)

expectation
React should not be undefined.

1 Like