Woocommerce-admin: WooCommerce Admin Examples : Add-Report . Filter name change in Woo 4.0

Created on 4 Mar 2020 · 13Comments · Source: woocommerce/woocommerce-admin

For those who are using the WooCommerce Admin Examples "Add-Report" and are working with the beta version of WooCommerce 4.0.

The filter in /woocommerce-admin-add-report-example.php on line 50
woocommerce_admin_report_menu_items
is now called
woocommerce_analytics_report_menu_items

But the extension still fails. It adds a page, but it's empty and throws a JS / React error. Is there any guidance available how the plugin code needs to be adapated to work with the new Woo 4.0?

PS: Other examples like "dashboard-section" however work fine in Woo 4.0.

bug documentation

Source

EdithAllison

All 13 comments

but it's empty and throws a JS / React error.

Hi, Can you add the error message?

psealock on 4 Mar 2020

Sorry, should have added. Errors show as:

File: /wp-content/plugins/woocommerce/packages/woocommerce-admin/dist/components/index.js?ver=1582805846
index.js:34:729730
TypeError: e is undefined

File: /wp-content/plugins/woocommerce/packages/woocommerce-admin/dist/app/index.js?ver=1582805846
index.js:27:336812
TypeError: "e is undefined"

Screenshot with ReactDevTools is here: https://www.dropbox.com/s/0k5zm7f8th0h9ch/error.png?dl=0

EdithAllison on 4 Mar 2020

Hi @EdithAllison, thanks for the bug report!

Here is a fix for the broken extension example, https://github.com/woocommerce/woocommerce-admin/pull/3830.

I'm glad to see these being used and hopefully its helpful to you. If you have any questions, feel free to open a new issue or ask on this one.

psealock on 5 Mar 2020

Hi Paul, many thanks! I've given the fix a go, but still get the same JS error. React is a learning curve for me, so not sure if I'm doing something wrong?

My work environment is WP installed on server (siteground); with my work done on Mac with Terminal. What I've done:

Siteground: Installed WordPress 5.32.
Siteground: Installed WooCommerce plugin through WP Admin
Siteground: Installed Woo Beta Tester plugin through WP Admin 4.0.0.-rc1
Downloaded WP files onto my Mac
Mac: cd into plugins folder
Mac: Cloned plugin, applied bugfix 3830, ran node & composer, ran example

git clone https://github.com/woocommerce/woocommerce-admin
cd woocommerce-admin 
git fetch origin pull/3830/head:allison
git checkout allison
npm install 
composer install
npm run example -- --ext=add-report

... at this point Terminal hangs but "add-report" folder is created successfully
Siteground: uploaded "add-report" folder to plugins directory & activated it
In WP Admin > Analytics > Example, empty page with error "TypeError: "e is undefined""

Am I handling this wrong? Apart from the "add-report" folder do I need to upload anything else to the hosted WP install go this to work?

PS: The point where Terminal hangs for me is here:

*@iMac woocommerce-admin % npm run example -- --ext=add-report

> @woocommerce/[email protected] example /*/wp-content/plugins/woocommerce-admin
> webpack --config docs/examples/extensions/examples.config.js --watch "--ext=add-report"


webpack is watching the files…

Hash: 59d699618934da1febb0
Version: webpack 4.41.5
Time: 2770ms
Built at: 05.03.2020 18:24:15
                                                          Asset      Size      Chunks                   Chunk Names
                             ../../../../add-report/js/index.js  1.61 KiB              [emitted]        
../../../../add-report/woocommerce-admin-add-report-example.php  1.15 KiB              [emitted]        
                                       add-report/dist/index.js  11.6 KiB  add-report  [emitted]        add-report
                                   add-report/dist/index.js.map  9.17 KiB  add-report  [emitted] [dev]  add-report
Entrypoint add-report = add-report/dist/index.js add-report/dist/index.js.map
[./docs/examples/extensions/add-report/js/index.js] 1.93 KiB {add-report} [built]
[@woocommerce/components] external {"this":["wc","components"]} 42 bytes {add-report} [built]
[@wordpress/element] external {"this":["wp","element"]} 42 bytes {add-report} [built]
[@wordpress/hooks] external {"this":["wp","hooks"]} 42 bytes {add-report} [built]
[@wordpress/i18n] external {"this":["wp","i18n"]} 42 bytes {add-report} [built]
    + 4 hidden modules

EdithAllison on 5 Mar 2020

Am I handling this wrong?

@EdithAllison Can you try clearing your browser cache? If that doesn't work, can you rename the add-report folder and reactivate the plugin?

rrennick on 5 Mar 2020

The point where Terminal hangs for me is here

You can just Ctrl-C at this point.

rrennick on 5 Mar 2020

@EdithAllison Sorry, I just noticed this as well

git clone https://github.com/woocommerce/woocommerce-admin
cd woocommerce-admin 
git fetch origin pull/3830/head:allison
git checkout allison

should be

git clone https://github.com/woocommerce/woocommerce-admin
cd woocommerce-admin 
git checkout fix/add-report-ext

rrennick on 5 Mar 2020

👍1

Thank you for the suggestions and providing the correct git command. I've tried but same error. What I've tried:

Deleted folder woocommerce-admin

git clone https://github.com/woocommerce/woocommerce-admin
cd woocommerce-admin 
git checkout fix/add-report-ext
npm install 
composer install
npm run example -- --ext=add-report

Then uploaded "add-report" folder and activated it.
Also tried re-naming the folder.
Tested in Firefox (with cache cleared) , Opera and Chrome. Chrome gives a slightly different error message:

react-dom.min.js?ver=16.9.0:103 TypeError: Cannot read property 'period' of undefined
    at t.value (index.js?ver=0.26.1:34)
    at new t (index.js?ver=0.26.1:34)
    at Ag (react-dom.min.js?ver=16.9.0:63)
    at Vg (react-dom.min.js?ver=16.9.0:89)
    at ph (react-dom.min.js?ver=16.9.0:217)
    at lh (react-dom.min.js?ver=16.9.0:126)
    at O (react-dom.min.js?ver=16.9.0:121)
    at Sb (react-dom.min.js?ver=16.9.0:213)
    at wh (react-dom.min.js?ver=16.9.0:160)
    at fd (react-dom.min.js?ver=16.9.0:160)
ve @ react-dom.min.js?ver=16.9.0:103
index.js?ver=0.26.1:27 TypeError: Cannot read property 'period' of undefined
    at t.value (index.js?ver=0.26.1:34)
    at new t (index.js?ver=0.26.1:34)
    at Ag (react-dom.min.js?ver=16.9.0:63)
    at Vg (react-dom.min.js?ver=16.9.0:89)
    at ph (react-dom.min.js?ver=16.9.0:217)
    at lh (react-dom.min.js?ver=16.9.0:126)
    at O (react-dom.min.js?ver=16.9.0:121)
    at Sb (react-dom.min.js?ver=16.9.0:213)
    at wh (react-dom.min.js?ver=16.9.0:160)
    at fd (react-dom.min.js?ver=16.9.0:160)
value @ index.js?ver=0.26.1:27

### WordPress Environment ###

WC Version: 4.0.0
REST API Version: ✔ 1.0.7
WC Blocks Version: ✔ 2.5.13
Action Scheduler Version: ✔ 3.1.1
WC Admin Version: ✔ 0.26.1
Log Directory Writable: ✔
WP Version: 5.3.2
WP Multisite: –
WP Memory Limit: 768 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: –

### Server Environment ###

Server Info: Apache
PHP Version: 7.3.15
PHP Post Max Size: 128 MB
PHP Time Limit: 120
PHP Max Input Vars: 3000
cURL Version: 7.59.0
OpenSSL/1.0.2r

SUHOSIN Installed: –
MySQL Version: 5.6.40-84.0-log
Max Upload Size: 128 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

WC Database Version: 4.0.0
WC Database Prefix: wpib_

### Security ###

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

### Active Plugins (3) ###

WooCommerce Admin Add Report Example: by  –  – Not tested with the active version of WooCommerce
WooCommerce Beta Tester: by WooCommerce – 2.0.1 – Not tested with the active version of WooCommerce
WooCommerce: by Automattic – 4.0.0-rc.1

I'm just starting to work with React so not sure if I'm doing something really basic wrong? I'd be happy to provide WP admin login details.

EdithAllison on 5 Mar 2020

Can you try clearing your browser cache? If that doesn't work, can you rename the add-report folder and reactivate the plugin?

Did you try both of those?

Edit: Sorry, I missed your comment in the middle. Do you have any place other than SiteGround for a test install?

rrennick on 5 Mar 2020

Hmm thats odd because that error is the one I get when the changes aren't present. I'm thinking there should have been an npm run build in there and perhaps the old dist folder was still there.

git clone https://github.com/woocommerce/woocommerce-admin
cd woocommerce-admin 
git checkout fix/add-report-ext
npm install 
composer install
npm run example -- --ext=add-report

Try this:

cd woocommerce-admin
git checkout fix/add-report-ext
git pull origin fix/add-report-ext
npm run build
npm run example -- --ext=add-report

psealock on 6 Mar 2020

Hi Paul, thank you I've tried the supplied code (updated for the merge into v1) but no luck. I'm now offline, I will give this another go next week.

My try today:

git clone https://github.com/woocommerce/woocommerce-admin
cd woocommerce-admin
git checkout version/1.0
git pull origin version/1.
npm run build
npm run example -- --ext=add-report

EdithAllison on 6 Mar 2020

I'm closing this one out due to fix by https://github.com/woocommerce/woocommerce-admin/pull/3830.

@EdithAllison feel free to continue with updates here. I'm not sure why you're having trouble. Can you paste any error messages or is it the same one?

psealock on 9 Mar 2020

🎉1

Sorry for the delay & thank you for your offer to help. I've upgraded WooCommerce to the stable released version 4.0.1 and the report page is now working fine. Not sure what went wrong before, I can't replicate the error now. Thank you for bearing with me!

EdithAllison on 8 Apr 2020

Was this page helpful?

0 / 5 - 0 ratings