ReferenceError: webpackJsonP is not defined in main.min.js & vendor.min.js

[Whalehunter]

I get this error after following the instructions & enabling the vuewp theme. Is this something anyone has experienced, or am I doing something wrong?

[lyzs90]

@Whalehunter hey ill check and get back to you

[lyzs90]

@Whalehunter i am unable to repro locally. are you able to provide more details? node version, building for dev or prod, etc.

[Whalehunter]

Turns out there are build errors. I hadn't noticed. I'll maybe try to solve it, maybe not, but this issue can be marked 'closed', since the posted problem is not the source, but just a symptom. Just fyi, here's the npm debug output. It seems like a gulp problem, but my experience with nodejs is limited.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'prod' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preprod', 'prod', 'postprod' ]
5 info lifecycle [email protected]~preprod: [email protected]
6 silly lifecycle [email protected]~preprod: no script for preprod, continuing
7 info lifecycle [email protected]~prod: [email protected]
8 verbose lifecycle [email protected]~prod: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~prod: PATH: /usr/lib64/node_modules/npm/bin/node-gyp-bin:/home/bob/projects/js/vuewp/node_modules/.bin:/home/bob/.local/bin:/home/bob/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/x86_64-pc-linux-gnu/gcc-bin/6.4.0:/usr/x86_64-pc-linux-gnu/avr/gcc-bin/6.4.0:/usr/lib/llvm/5/bin:/opt/bin
10 verbose lifecycle [email protected]~prod: CWD: /home/bob/projects/js/vuewp
11 silly lifecycle [email protected]~prod: Args: [ '-c', 'gulp' ]
12 silly lifecycle [email protected]~prod: Returned: code: 1  signal: null
13 info lifecycle [email protected]~prod: Failed to exec prod script
14 verbose stack Error: [email protected] prod: `gulp`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/lib64/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/lib64/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:920:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)
15 verbose pkgid [email protected]
16 verbose cwd /home/bob/projects/js/vuewp
17 error Linux 4.9.76-gentoo-r1
18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "prod"
19 error node v6.11.5
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error [email protected] prod: `gulp`
22 error Exit status 1
23 error Failed at the [email protected] prod script 'gulp'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the vuewp package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     gulp
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs vuewp
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls vuewp
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Thanks for the time and attention

[lyzs90]

Sounds similar to what others are facing on other projects. Eg olefredrik/FoundationPress#1011

U can try a few things:

• rebuild node sass: npm rebuild node-sass
• If that doesn't work, reinstall node modules: rm -rf node_modules and npm i
• Last resort, upgrade node and npm to latest version (I tried on node v8.9.4 and npm v5.0.3 the other day)

Let me know if the stack traces change along the way. Good luck!

[mfdeveloper]

Hello @lyzs90! I've got the same problem. Updated the node to 8.10.0 and npm to 5.8.0 versions and the problem is the same. Remove the node_modules folder and their whole content, and reinstalling with npm i don't works too.

I tried run npm run dev and access the localhost:8080, and the CORS (Access-Control-Allow-Origin) is showed on console, because try perform a request to a port : :8000 of wordpress API. This theme contains some proxy configuration?

Can you help us to use this SPA theme?

[lyzs90]

@mfdeveloper browserrsync works for me. you can see that my request origin is localhost:8080 to host http://<CONTAINER_IP>:8000

on the other hand, i managed to repro @Whalehunter 's issue when i try to access http://<CONTAINER_IP>:8000 directly. it was giving me webpackJsonp errors instead of showing the site

[mfdeveloper]

@lyzs90 What is <CONTAINER_IP> ? I don't use docker machine (just docker/docker-compose). I changed this to localhost into .env file, it's correct? How do you solve the CORS ?

And about webpackJsonp error? Do you have a solution?

[lyzs90]

hey @mfdeveloper i just pushed a fix. the webpackJsonp error was due to chunks being loaded out of order. had to load common chunk before the rest because it contains the webpackJsonp function definition -- nothing to do with CORS.

realized prerendering was broken too and fixed it at the same time 😅

[lyzs90]

as for CORS, i believe my wordpress server has it configured:

let me find out where it was set

[Whalehunter]

it was gulp that was the culprit. it should be installed be installed globally with npm install -g gulp
i appreciate the time taken. the debug comment was pretty clear though when i reread it :p.

[mfdeveloper]

Thank you so much @lyzs90 for your help and attention. By now, the webpackJsonp is gone, but the showed theme don't renderer completely. I saw the 404 (Not found) on browser console for http://localhost:8000/wp-json/wp/v2/pages and http://localhost:8000/wp-json/wp/v2/posts. Do you know why?

See the screenshot of the theme after enable from wp-admin:

About the CORS using the theme outside wordpress with npm run dev, these erros persist. I found the previous commit on gulpfile.babel.js, had the commented lines in

vuewp/gulpfile.babel.js

Line 79 in fcc42ff

gulp.task("browser-sync", () => {

Can you tell me, why did you remove them? How you configure the proxy by now?

[lyzs90]

@mfdeveloper you're almost there!

For those 404 errors, can you check if you have content for pages and posts? WordPress should have installed with a few samples unless u deleted them. Also, have u enabled post type for permalinks?

For background image, the theme expects you to upload an image with a slug named bg. Got to enable slugs for media files.

I mentioned these stuff briefly in the readme. Maybe it wasn't clear enough haha.

As for the proxy code, I removed it because it was commented out and it never worked.

So you're saying CORS errors persist when u npm run dev and visit localhost:8080? As mentioned above, that's likely because there needs to be some config on the WordPress server side to whitelist origins.. but I haven't had the time to see where I did it... Perhaps the docker image has something configured by default

[lyzs90]

Closing this issue since it seems to be resolved