Images not showing

Hello @sarahmariecarter,

can you check if there is an alternative build path in you package.json? Something like:

"PUBLIC_URL=/wp-content/reactpress/apps/routertest/build react-scripts build",

Best
Marco

Hi @rockiger,

Thank you for responding. Here is my package.json:

{
  "name": "ev",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "mailgun-js": "^0.22.0",
    "popper.js": "^1.16.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet-async": "^1.0.9",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Hi,

So I figured out that images will display if they are converted to base64. I’m not sure why that is, but it works!

Hello @sarahmariecarter,

something went wrong with the update process of your package.json

As I said your build command should have look something like this:

...
  "scripts": {
    "start": "react-scripts start",
    "build": "PUBLIC_URL=/wp-content/reactpress/apps/routertest/build react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...

Adjusted to your app of course.

The conversion to base64 works to, because doesn’t rely on the right path.

@rockiger,

Which step was supposed to update package.json?
I followed the steps exactly. I’m using Local on Windows 10 with a custom environment (which according to this https://localwp.com/community/t/how-do-i-enable-shell-zip-engine-on-local/6435/9 allows access to shell_exec). I used create-react-app in the command line. The app appeared in the ReactPress admin, but package.json was never updated.

When I manually update the build script, I get this error when I try to run npm run build:

> [email protected] build C:\Users\SarahCarter\Local Sites\transblue\app\public\wp-content\reactpress\apps\test
> PUBLIC_URL=/wp-content/reactpress/apps/test/build react-scripts build

'PUBLIC_URL' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: <code>PUBLIC_URL=/wp-content/reactpress/apps/test/build react-scripts build</code>
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\SarahCarter\AppData\Roaming\npm-cache\_logs\2021-08-09T18_58_20_386Z-debug.log

Hi,

I figured it out. Instead of changing the build script, I created a .env file in the root directory of my project and set PUBLIC_URL there. After rebuilding the project, all of the paths in the build folder were updated accordingly and everything works fine ?? Thanks again for your help

Hi @sarahmariecarter,

when setting the slug it should update the package.json. I don’t know why it didn’t work. Is localWP on Windows a POSIX environment?

Otherwise you will probably need WSL2 for ReactPress to work. Nevermind, if it works for you as is.

@rockiger,

Apparently it’s not a POSIX environment. I will revisit WSL2 later if necessary, but it’s working great as of right now. Thanks!