search

silverstripe / silverstripe-tagfield

Silverstripe module for editing tags (both in the CMS and other forms)
http://silverstripe.org/tag-field-module
BSD 3-Clause "New" or "Revised" License
57 stars 74 forks source link

Component TagField does not exist #126

Closed KINKCreative closed 5 years ago

KINKCreative commented 5 years ago

I added a TagField normally to a SS4.4.x install. When visiting such post in the admin, I get a JS error and the field is just a blank.

Code:

use SilverStripe\TagField\TagField;
...

updateCMSFields() {

...
$cfield = TagField::create(
    'Categories',
    'Categories',
    Category::get(),
    $this->owner->Categories()
)
->setShouldLazyLoad(true) // tags should be lazy loaded
->setCanCreate(true);     // new tag DataObjects can be createds

$tfield = TagField::create(
    'Tags',
    'Tags',
    Tag::get(),
    $this->owner->Tags()
)
->setShouldLazyLoad(true) // tags should be lazy loaded
->setCanCreate(true);     // new tag DataObjects can be createds

$fields->addFieldsToTab("Root.Main", [
    $cfield,
    $tfield,
]);

}

Result: https://www.dropbox.com/s/npu4r7qowbtb3xs/Screenshot%202018-12-06%2016.03.45.png?dl=0

JS errors:

bundle.js?m=1540766768:1 Uncaught TypeError: Cannot read property 'string' of undefined
    at Object../client/src/components/TagField.js (bundle.js?m=1540766768:1)
    at e (bundle.js?m=1540766768:1)
    at Object../client/src/boot/registerComponents.js (bundle.js?m=1540766768:1)
    at e (bundle.js?m=1540766768:1)
    at Object../client/src/boot/index.js (bundle.js?m=1540766768:1)
    at e (bundle.js?m=1540766768:1)
    at Object../client/src/bundles/bundle.js (bundle.js?m=1540766768:1)
    at e (bundle.js?m=1540766768:1)
    at bundle.js?m=1540766768:1
    at bundle.js?m=1540766768:1
./client/src/components/TagField.js @ bundle.js?m=1540766768:1
e @ bundle.js?m=1540766768:1
./client/src/boot/registerComponents.js @ bundle.js?m=1540766768:1
e @ bundle.js?m=1540766768:1
./client/src/boot/index.js @ bundle.js?m=1540766768:1
e @ bundle.js?m=1540766768:1
./client/src/bundles/bundle.js @ bundle.js?m=1540766768:1
e @ bundle.js?m=1540766768:1
(anonymous) @ bundle.js?m=1540766768:1
(anonymous) @ bundle.js?m=1540766768:1
vendor.js?m=1544005032:1 Error: Injector.get(): Component TagField does not exist
    at Object.get (bundle.js?m=1544005032:1)
    at Object.get (bundle.js?m=1544005032:1)
    at bundle.js?m=1544005032:1
    at Object.ready (bundle.js?m=1544005032:1)
    at r.value (bundle.js?m=1544005032:1)
    at hn (vendor.js?m=1544005032:1)
    at Dn (vendor.js?m=1544005032:1)
    at Nn (vendor.js?m=1544005032:1)
    at Jn (vendor.js?m=1544005032:1)
    at Xn (vendor.js?m=1544005032:1)
Rn @ vendor.js?m=1544005032:1
Un.n.callback @ vendor.js?m=1544005032:1
$t @ vendor.js?m=1544005032:1
Kt @ vendor.js?m=1544005032:1
yr @ vendor.js?m=1544005032:1
_r @ vendor.js?m=1544005032:1
hr @ vendor.js?m=1544005032:1
dr @ vendor.js?m=1544005032:1
rr @ vendor.js?m=1544005032:1
wr @ vendor.js?m=1544005032:1
xr @ vendor.js?m=1544005032:1
Mr.render @ vendor.js?m=1544005032:1
(anonymous) @ vendor.js?m=1544005032:1
br @ vendor.js?m=1544005032:1
Lr @ vendor.js?m=1544005032:1
render @ vendor.js?m=1544005032:1
onmatch @ bundle.js?m=1540766768:1
l @ vendor.js?m=1544005032:1
(anonymous) @ vendor.js?m=1544005032:1
dispatch @ VM3629:3332
eventHandle @ VM3629:2941
trigger @ VM3629:3210
triggerHandler @ VM3629:3874
triggerEvent @ vendor.js?m=1544005032:1
n.test.(anonymous function) @ vendor.js?m=1544005032:1
(anonymous) @ vendor.js?m=1544005032:1
setTimeout (async)
changed @ vendor.js?m=1544005032:1
n.test.(anonymous function) @ vendor.js?m=1544005032:1
addClass @ vendor.js?m=1544005032:1
n.test.(anonymous function) @ vendor.js?m=1544005032:1
(anonymous) @ vendor.js?m=1544005032:1
e.fn.(anonymous function) @ vendor.js?m=1544005032:1
(anonymous) @ bundle.js?m=1544005032:1
(anonymous) @ bundle.js?m=1544005032:1
load @ bundle.js?m=1544005032:1
(anonymous) @ bundle.js?m=1544005032:1
setTimeout (async)
(anonymous) @ bundle.js?m=1544005032:1
r @ vendor.js?m=1544005032:1
(anonymous) @ vendor.js?m=1544005032:1
e.(anonymous function) @ vendor.js?m=1544005032:1
r @ bundle.js?m=1544005032:1
(anonymous) @ bundle.js?m=1544005032:1
Promise.then (async)
r @ bundle.js?m=1544005032:1
(anonymous) @ bundle.js?m=1544005032:1
(anonymous) @ bundle.js?m=1544005032:1
(anonymous) @ bundle.js?m=1544005032:1
load (async)
./client/src/boot/index.js @ bundle.js?m=1544005032:1
t @ vendor.js?m=1544005032:1
./client/src/bundles/bundle.js @ bundle.js?m=1544005032:1
t @ vendor.js?m=1544005032:1
window.webpackJsonp @ vendor.js?m=1544005032:1
(anonymous) @ bundle.js?m=1544005032:1
robbieaverill commented 5 years ago

@KINKCreative which version of tagfield are you using? And are you using this in a page?

I ask because there's a couple of factors that might cause this error right now:

Having only had a very quick glance at your stack trace, it looks like a PropTypes library incompatibility. If you're keen to update it, it's a very straightforward process to replace the native library with the extra package and we'd welcome a pull request to do so if you're up for it.

Kethatril commented 5 years ago

I am having this issue with SS4.3 as well, if you start on a page that doesn't have a tagfield, then navigate to a page that has a tag field, the tag field will not load. This is happening with 2.2.1.

robbieaverill commented 5 years ago

@Kethatril thanks for the report. I think the issue here is that the JS and CSS bundles are not available when you navigate to a page that is generated with PJAX- such as loading a page without a tagfield then loading a page that does. If you load the second page directly then the PHP form field's requirements calls are run and get added correctly, but in the first page's case they don't get loaded in time.

We can try to avoid this issue by adding them as "extra JS" and CSS configuration on the LeftAndMain class. Here's an example:

https://github.com/dnadesign/silverstripe-elemental/blob/147a6877c3c215258ed1934f55ea27b0529c2da1/_config/config.yml#L5-L9

Would you like to give that a try?

Kethatril commented 5 years ago

Yeah, I've got it working with that already, still having some other issues though. When you search for a tag the spinner in the dropdown doesn't stop spinning, or show any results until you unfocus the field and re-search. This seems to happen when lazy is true. Not sure if I should report it here or wherever the dropdown component comes from.

robbieaverill commented 5 years ago

@Kethatril I think repository is the right place, but in a separate issue