devloco / create-react-wptheme Goto Github PK

The update to create-react-app v2.1.8 seems to have broken TypeScript support.

Seems like it can't find the types it needs to render. The file react-app-env.d.ts is supposed to be the link necessary to make that work... but it's not working.

Theme failed to compile...

You haven't yet completed the PHP portion of your new theme's setup.
You must: npm run start
And follow those instructions to complete the PHP portion of the setup.
Try building again after that is done.

at npm run start , page starts as normal, nothing is showing up.

Hi,

This is a question not an issue.

I am using react router and have a route called /example1
If I refresh the page while on /example1 locally it works, because the wp-dev server is running, and it serves up the react app.

But when the build is deployed, there's nothing to catch the request when you refresh the page on routes other than "/", so you get a blank page. How can I add additional route support to the php file beyond the root "/"? Or would it be in the index.html file?

Thank you.

I am having trouble with the static/js directory. Seems to be working locally, but when I make changes and run build the new js files are not going into the theme directory that gets uploaded to my server. I am coming back to this project after a couple months so its possible I am forgetting something. Anyhow, should I just copy the static directory from my build folder into my theme folder?

When running create-react-wptheme for the first time, the browser tab that auto opens and performs the PHP part of the setup can be auto closed. When you restart the NodeJs watcher, another tab is auto opened, and thus you end up with 2 tabs showing the same thing.

Hi @devloco - a couple of observations. There would be times when I'm in wpstart mode, I save a file, browser refreshes and its just a blank screen. I've also seen the page keeps refreshing multiple times - non stop. I'm guessing it might be chrome.

It's not a big deal, all I need to do is npm run wpstart again - and it seems to fix itself.

Also an update: I'm almost done with my project and I must tell you that I'm really liking this setup. It seems that this is better than having separate servers for the front and back - because this way, we can keep some of the WP functionality and the React app - in the same url.

For example, I have my a couple of WP pages that are using theme (template files) and I have the main React app. Its pretty sweet! Thanks for all your work on this.

Not sure how I missed this for so long... but I need to add a Create-React-WPTheme specific README instead of leaving the one from Create-React-App.

Hi there. When I run the build command the theme files are created in a subdirectory of my theme (ex: my-theme/my-theme/style.css). I created a new theme to be sure the issue wasn't something related to my theme and saw the same behavior. Any ideas?

Since I started this project, I've had problems getting the Progressive Web Apps (PWA) stuff that is built into create-react-app to work. I've just been remarking out that code. But I should dig into the problem and see if there isn't a way to get it working properly in create-react-wptheme since the popularity of PWAs is on the rise.

I usually give them a few days to make sure there are no show stopping bugs in new releases of create-react-app. So the plan is to do this next week sometime...

My App is working is fine.styles are reflecting and components are not reflecting content and new components with routing not working

Hi @devloco - I'm back with more questions if you don't mind.

I noticed that everytime I do a run wpbuild - the precache-manifest.XXXX.js files gets added - but it doesn't get rid of the old ones. Is this expected?

Also, where's the best place to put static images?

One last thing - what would be the best way to have constants such as $TEMPLATE_PATH (You have it in index.php) - but I want to access it in React components?

Thank you in advance.

This ticket is used to track my work on the new 3.3.1 branch.

Hi @devloco - a few more questions if you don't mind.

When I do npm run wpbuild, can I have the "build" folder outside of the theme directory (as another theme - with a different name)?

So it will have a my-theme-prod instead of my-theme in styles.css?

The reason is, I would like to check 2 versions in my Git repo - so our deployment scripts can simply grab the my-theme-prod and install it.

Thanks in advance.

CSS Modules not working for module.scss and module.css files.

The className being generated, but not attached to the HTML.

This is the CSS file being generated

The className should be applied to <p> tag, but there's not className applied.

It's not working in development, the production build working just fine.

Running npm run build builds the theme but ignores the user.prod.json homepage directory.

After the script finishes, the output confirms it:

The project was built assuming it is hosted at /wordpress/wp-content/themes/theme/.
You can control this with the homepage field in your package.json.

This is running 3.4.0. I'm pretty sure it worked in a previous version.

Looks like Facebook has released a new version of create-react-app:
v3.1.1

I'll give it a few more days to make sure they don't have any bad bugs in the new version. Then I'll get the changes into create-react-wptheme

If a user's dev server and prod server use differing paths for the root URL (a common setup) this can get confusing. Here's what happens:

• The user ran npm run start and made some changes to their theme.
• When they're done dev'ing, they run npm run build to make a production ready version of the theme.
• If they refresh their browser (currently pointed at their dev instance) the browser will show a "missing stylesheet" error.

It'd be nice to warn them that this is expected behavior.

• Themes built using npm run start will be broken on a production server.
• Themes built using npm run build will be broken on a dev server.

Hey guys,

First of all thank you for this tool, it's pretty useful.

I have a issue though. I wan't to improve the website's performance by avoid all the unused CSS in each page, by attaching a single stylesheet for each of my component.

I think this was possible by simply import the CSS file in the component in Create React App. But with CR-WPTheme, it just bundles all the imported CSS on a big Chunk.css file. Is there any way to avoid that (by ejecting the project, and modifiy something in the webpack config file) ?

Thank you for your answer !

Facebook has combined their Dev and Prod Webpack Config files into one... with lots of conditionals. I'm not really a fan of it as it makes the file much harder to read. But even worse would be to lose sync with them and end up missing new functionality.

i can't run
npx create-react-wptheme
when i run then error....
create-react-wptheme version: 3.3.1-wp.3
@devloco/react-scripts-wptheme version: ^3.3.1-wp.2

Creating a new React WP theme in C:\xampp\htdocs\ReactJS\wp-content\themes\reactjs.
Using Create React App 3.3.1 to scaffold the theme's source code...

Error: EEXIST: file already exists, mkdir 'C:\Users\Vo'
TypeError: Cannot read property 'loaded' of undefined
at exit (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:97:27)
at errorHandler (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:216:3)
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js:78:20
at cb (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\npm.js:225:22)
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\npm.js:263:24
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\config\core.js:81:7
at Array.forEach ()
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\config\core.js:80:13
at f (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\node_modules\once\once.js:25:25)
at afterExtras (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\config\core.js:171:20)
C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:97
var doExit = npm.config.loaded ? npm.config.get('_exit') : true
^

TypeError: Cannot read property 'loaded' of undefined
at exit (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:97:27)
at process.errorHandler (C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\npm\lib\utils\error-handler.js:216:3)
at process.emit (events.js:321:20)
at process._fatalException (internal/process/execution.js:165:25)
Install for [ '[email protected]' ] failed with code 7
(node:6200) UnhandledPromiseRejectionWarning: ReferenceError: reject is not defined
at C:\Users\Vo Dong Ho\AppData\Roaming\npm\node_modules\create-react-wptheme\createReactWpTheme.js:278:9
at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:6200) 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(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode).
(rejection id: 1)
(node:6200) [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.

help me !!!!!

I have an issue with building my theme.
Everything works, it builds the theme successfully and I'm able to select the theme within the WP back-end. But when I'm going to view my theme, I see a blank page with multiple errors in the console that say "failed to load resource". At this point I don't know what I'm doing wrong, I followed your tutorial "Let's build a WordPress theme with React: Part 1 (Setup)" but I couldn't find the anwser there.

The steps I take:

• (within react-src) npm run wpbuild -- I get the succes message: The build folder is ready to be deployed.
• (wp back-end) change and activate the the build version of the theme. (The dev version says "ERROR: Stylesheet is missing." and is removed when activating the build version)
• View site, I press on Visit site "New theme activated. Visit site"

The errors I get in the console:

• Failed to load resource: the server responded with a status of 404 (Not Found): main.2cce8147.chunk.css:1
• Failed to load resource: the server responded with a status of 404 (Not Found): 22.b41502e9.chunk.js:1
• Failed to load resource: the server responded with a status of 404 (Not Found): main.f058206c.chunk.js:1
• Failed to load resource: the server responded with a status of 404 (Not Found): main.2cce8147.chunk.css:1

Since the JS and CSS are injected into the index.php, we don't easily know on runtime what the URL of the assets will be.

If I make a custom template, how can I utilize the build pipeline and have the asset urls injected here as well?

When using create-react-wptheme, nested routes for example "/blog/test-post-slug", upon page reload removes the route prefix of "/blog" and simply goes to "/test-post-slug", responding with my 404 error page. I duplicated my code over to a normal create-react-app, with the same exact routing and this issue is not present. I believe it may be due to a misconfigured webpack setting?

When I run node run wpbuild the homepage property set in user.prod.json isn't used - it uses the homepage property in my package.json. I also tried removing the homepage prop in package.json and moving it to user.dev.json but then it used the root as the homepage.

Trying to install via npx create-react-wptheme my_theme but... get getting this:

Cannot find module './yarn.lock.cached'

The user guide seems to be missing some parts, as no link from the Table of Contents is working

Example: https://github.com/devloco/create-react-wptheme/blob/master/create-react-app-USERGUIDE.md#code-splitting

Personally, I've never seen any benefit to unit testing... but I realize I'm in the minority there. So basically I've been nuking all the unit testing support code built into create-react-app from create-react-wptheme as part of my process.

I should probably take a closer look at this and see how hard it is to port and maintain that capability into create-react-wptheme.

Running normal "create-react-app foo --typescript" successfully creates a React App with TypeScript enabled and compiling.

But running "create-react-wptheme foo --typescript" gets all the way to launching the browser, but then gets a TypeScript specific error message about not being able to find "logo.svg".

Maybe it has something to do with setting the "homepage" in package.json... or maybe nothing to do with that.

Nevermind.

Hi, thanks for this project. It's been really handy.

I started a project when the build bug was still a thing. I'm wondering if you could tell me how to update. npm update doesn't work.

Thanks.

This looks like the latest work:
facebook/create-react-app#5958

And here's the doc site:
http://gaearon.github.io/react-hot-loader/

Facebook has released cra340, time to do the update dance...

This will start working again once I get my Webpack Config Files combined into one, like Facebook has done. See that issue:

Update Webpack Config to Match Create-React-App

File-watcher is consuming too much disk also freezing everything, I tried by configuring, interval and binary Interval to 2000, but still, it starts hanging after some time.

user.dev.json

{
	 "fileWatcherPlugin": {
		  "touchFile": "./public/index.php",
		  "ignored": "./public/index.php",
		  "watchFileGlobs": [
			   "./public/**/*.js",
			   "./public/**/*.css",
			   "./public/**/*.php"
		  ],
		  "interval": 2000,
		  "binaryInterval": 2000
	 },
	 "wpThemeServer": {
		  "enable": true,
		  "host": "127.0.0.1",
		  "port": 8090,
		  "sslCert": null,
		  "sslKey": null
	 },
	 "injectWpThemeClient": {
		  "override": null,
		  "file": "./build/index.php"
	 }
}

Hi, i created a theme with npx create-react-wptheme testetheme but i can't even build. I'm using the latest version

The response when i run yarn build is TypeError: Cannot read property 'homepage' of null at module.exports (C:\Users\lucas\Documents\testetheme\node_modules\@devloco\react-scripts-wptheme\config\webpack.config.wptheme.js:77:25)

testetheme.zip

The way that the Browser Refresh Server and the Client Error Overlay interact with each other is... hacky. Webpack has a full "taps" API that I should use instead.

Might be overkill to do it, but I was trying to set this up with React & Redux and got an error:

yarn add redux
yarn add v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error @devloco/[email protected]: The engine "node" is incompatible with this module. Expected version ">=8". Got "6.11.2"
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Should it be pulling in a more recent version of Node?

I'm running into a new error on a fresh installation. When I run

npx create-react-wptheme themename

It doesn't seem to complete the install. I get:

+ @devloco/[email protected]
added 1423 packages from 732 contributors and audited 892165 packages in 141.248s
found 0 vulnerabilities

internal/modules/cjs/loader.js:613
    throw err;
    ^

Error: Cannot find module 'C:\wamp\www\wordpress\wp-content\themes\newtheme\react-src\node_modules\package.json'

I try to run wpstart anyway - by going into react-src and doing a npm run wpstart, and I get

$ npm run wpstart
npm ERR! missing script: wpstart

The package.json contains very little stuff:

{
  "name": "react-src",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@devloco/react-scripts-wptheme": "3.0.1-wptheme-3.0.0"
  }
}

Any ideas?

Create-React-App was recently updated to v3.4.1.
I need to get those changes into Create-React-WPTheme.

Is there any additional info about deployment located somewhere?

I've run the wpbuild and dropped the build folder into my server. I'm getting a white screen and 404 errors - any thoughts or pointers on how to troubleshoot?

In development server (localhost) everything works fine.
But after npm run build get folder that I deploy to wordrpess server.
It appears in theme section I can choose it, but it appears only blank page with some errors:

This ticket is used to track my work on the 3.3.0 branch.

@devloco - first - Thank you for this amazing tool. I'm up and running. I'm excited to dive in.

Although, I have a few questions.

1. When I create a git repository for my theme - do I do it from the root theme folder (I notice there's a .git folder in react-src)? Do I gitignore node_modules etc?
2. How do I install it in other environments? Do I go through the normal WP installation of the theme?
3. How does it know which one user.{env}.json file to read, when I move to another server?
4. Just verifying that all server interactions is through WPREST API correct?

Thanks again.

This is more of a question than an issue, not sure how else to contact you.

This is working perfectly on my local Wordpress. When I transfer the theme to my actual wordpress account and activate the theme, the index file gets a 404 on "theme"/static/js/bundle.js. When I SSH into my box, I can see that the bundle.js file is there even though it's getting a 404.

Do the WPBuild and WPstart commands have to be run on the particular box it's running on? Or could you export the entire theme and expect it to work out of the box?

Thanks.

Sometimes the error overlay looks wonky if you manually refresh the browser.
For example in App.tsx (note TypeScript) if you change line 3 to this (note the foo):

import foo "./App.css";

The initial overlay looks as expected. But then hit F5 to manually refresh and it looks very different.
Doing the same steps in a normal create-react-app project does not show the same behavior.

Everything is still running properly, i.e. saving a file will still cause the browser to refresh. Even if the newly saved page has another error, it causes the error overlay to re-render properly. So this is really just a cosmetic bug.

It looks like Facebook made changes to their error overlay, and now it's not working for create-react-wptheme.