Create React App v2

[roborourke]

There's quite a lot in here, happy to refactor and move some things around but it all works and is in use on the Workflows plugin.

• PHP loader updates
  • ignores async chunks, precache manifest and service worker
  • enqueues runtime & main bundles in correct order
  • supports multiple entry points & code splitting
  • added an inline script with the known variable for build directory URL
  • react and react-dom are dependencies by default
• webpack updates
  • Remove requirement for public/ directory
  • Modified service worker webpack plugin config to be usable in WP context (still a bit to do re. template on init, will tackle in a another issue)
  • Default config settings for WP:
  • output.publicPath is ./ - ensures relative URLs used
  • optimization.splitChunks.chunks is set to async rather than all
  • output.jsonpFunction is set by sanitising package.json name field
  • externals contains scripts provided by WP 5.x: wp, React, ReactDOM, lodash and moment
• init script updates
  • adds publicPath.js and an import for it which sets __webpack_public_path__
  • replaces process.env.PUBLIC_URL in serviceWorker.js with known URL

[roborourke]

@rmccue @kadamwhite this is ready for review & testing etc now, you can clone and switch to this branch then in any WP set up you have run:

create-react-app react-plugin --scripts-version file:/path/to/react-wp-scripts

Then you can drop in this minimal plugin.php:

<?php
/**
 * Plugin Name: CRA WP test
 */

require_once 'react-wp-scripts.php';

add_action( 'wp_enqueue_scripts', function () {
    ReactWPScripts\enqueue_assets( __DIR__, [
        'handle' => 'react-wp',
    ] );
}, 200 );

add_action( 'wp_footer', function () {
    echo '<div id="root"></div>';
} );

Then npm run start or npm run build to confirm.

[pdewouters]

I followed the process above but ran into this error: (node:70575) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'splitChunks' of undefined at module.exports.config (/Users/paul/hmdev/pluginsdev/content/plugins/react-plugin/node_modules/react-wp-scripts/overrides/applyWpConfig.js:16:22) at overrideWebpackConfig (/Users/paul/hmdev/pluginsdev/content/plugins/react-plugin/node_modules/react-wp-scripts/scripts/override-start.js:72:9) at module.exports.devServer (/Users/paul/hmdev/pluginsdev/content/plugins/react-plugin/node_modules/react-wp-scripts/scripts/override-start.js:95:39) at choosePort.then.port (/Users/paul/hmdev/pluginsdev/content/plugins/react-plugin/node_modules/react-wp-scripts/scripts/start.js:31:3) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) (node:70575) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:70575) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

when running npm run start

[roborourke]

@pdewouters classic, they updated a bunch of stuff and the default version constraint I had wasn't enough to avoid issues there!

[igmoweb]

Just as a note, @roborourke We should make clear that this change will only work for WP 5.0+ because react and react-dom scripts need to be in wp-includes.

[josephfusco]

@roborourke Thank you for your work on this along with everyone else.

When testing this the only issue I ran into was "reactpluginBuildURL is not defined" which prevented both npm run start and npm run build from being able to finish.

After adding /* global reactpluginBuildURL */ to the top of serviceWorker.js everything looks good to me 👍

[roborourke]

Hey thanks for testing!

Thanks for the bug report. Maybe I can add that to the webpack externals.

Unfortunately there’s a bunch more to do as they changed some files around on a patch version recently. Will find some time to get it bang up to date asap.

[ptasker]

Thanks for this @roborourke! I've got it up and running locally no problem 🎉. So glad to be able to use things like SVG imports in React.

Cheers!

[ptasker]

Opened a PR that upgrades to Create React App 3 as that's the latest version. Just a few minor updates required.

https://github.com/humanmade/react-wp-scripts/pull/45/files

[roborourke]

Whoas. The JS world moves far too fast! I’ll check it out, thanks for the PR :)

[josephfusco]

@roborourke @ptasker

Just a heads up this might need tweaking again as the asset-manifest.json schema has changed in the latest CRA.

https://github.com/facebook/create-react-app/pull/7721

[roborourke]

@josephfusco thanks for the heads up. They have an interesting definition of semver over there...

[roborourke]

Fixed up the eslint no-undef warning by replacing the %%PUBLIC_PATH_VAR%% placeholders with window.<project>BuildURL now. I'm going to merge this and tag it as 1.0.0 so we can move on to maybe looking at working with CRA v4.