react-scrollable-anchor
react-scrollable-anchor copied to clipboard
Published
20 hours ago •
gabergg
gabergg
Getting rendering error
Getting error using implementation as explained
error output:
invariant.js:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `ScrollableAnchor`.
at invariant (invariant.js:44)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:68)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:691)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
React version: 15.4.1
I got the same error once I comment out the ScrollableAnchor it mounts back the React version I am using is 16.2.0. I did the configureAnchors({}) within the componentWillMount(). ` render() { const { doc } = this.props;
return (
<div className="hub-reference" id={`page-${doc.slug}`}>
{
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a className="anchor-page-title" id={doc.slug} />
}
<div className="hub-reference-section hub-reference-section-top">
<div className="hub-reference-left">
<ScrollableAnchor id={`reference-edit/${doc.slug}`}>
<header>
{this.props.suggestedEdits && (
// eslint-disable-next-line jsx-a11y/href-no-hash
<a className="hub-reference-edit pull-right" href={`#reference-edit/${doc.slug}`}>
<i className="icon icon-register" />
Suggest Edits
</a>
)}
<h2>{doc.title}</h2>
{doc.excerpt && (
<div className="excerpt">
{
// eslint-disable-next-line react/no-danger
<p dangerouslySetInnerHTML={{ __html: doc.excerpt }} />
}
</div>
)}
</header>
</ScrollableAnchor>
</div>
</div>
</div>
);
} `
Can I ask how you import it?
import ScrollableAnchor from 'react-scrollable-anchor';
or
import { ScrollableAnchor } from 'react-scrollable-anchor';
If you're doing the second can you try doing the first?
Sorry, I'm probably just suggesting stuff that you've already tried.
Have you tried moving the configureAnchors({}) call to the top of the file, outside of the component?
Can you share the full file?
import React, { Component } from "react";
import { configureAnchors, ScrollableAnchor } from 'react-scrollable-anchor';
configureAnchors({})
const FAQ = ({ }) => {
return ( <div className="container">
<h2>Nordstrom Portal FAQs <a name="_Nordstrom_Portal_FAQs"></a>
</h2>
<p><b><strong><b><a href="#_Pre_Register1">How do I Register myself for the Supplier Portal</a></b></strong></b></p>
<p><b><a href="#_To_Request_Access">How to Request Access</a></b></p>
<p><b><a href="#_Portal_Access_User">Portal Access User ID's</a></b></p>
<p><b><a href="#_/_change_password">How to change your password/email address</a></b></p>
<p><b><a href="#_Portal_User_ID">Portal Login Unknown</a></b></p>
<p><b><a href="#_Problems_Logging_On_1">Problems Logging on</a></b></p>
<p><b><a href="#_How_to_navigate_2">How to Navigate in the Portal</a></b></p>
<p><b><a href="#_What_Info">What information can I access with my Supplier/Vendor Account
Name</a></b></p>
<p><b><a href="#_Minimum_PC_requirements">Minimum PC requirements</a></b></p>
<p><b><a href="#_Recommended_PC_setting">Recommended PC Settings for Suppliers</a></b></p>
<p> </p>
<ScrollableAnchor id={'_Pre_Register1'}>
<h3>How do I Register myself for the Supplier Portal?</h3>
<p><b>Q How do I register myself for the Supplier Portal?</b>
</p><p><b>A </b>
You can register by clicking on the 'Sign Up' link available at the Login
Page.
</p>
</ScrollableAnchor>
<p>
</p><p><b>Q Why do I register myself for the Supplier Portal?</b>
</p><p><b>A </b>
The Supplier Portal will ensure that each individual user of the portal has
a unique and valid email address to access the site.
</p><p>
</p><p><b>Q What do I need to register for the Supplier Portal?</b>
</p><p><strong>A </strong>
To register for the portal, you will need a valid Supplier/Vendor Account
Name(SVAccountName). SV AccountName is a unique identifier given to
each customer when they open an account with Nordstrom. Please contact your
designated administrator to obtain your SVAccountName.
</p><p><strong>Q <a name="_svaccount"></a> What is a Supplier/Vendor Account Name?</strong></p><strong>
</strong>
<p><strong>A</strong>
A Supplier/Vendor Account Name is the unique identifier that corresponds to a
vendor company. Previously, this was referred to as the ‘User ID’ and was used to log
into the old portal. With the new process, you will be using an email address to log
into the portal, instead of the User ID, which is why ‘User ID’ has been renamed to
Supplier/Vendor Account Name
</p><p><strong>Q <a name="_Login"></a>Why should I provide my email address during
Login?</strong></p><strong>
</strong>
<p><strong>A</strong>
You are required to login with the email address that you used for
registration.
</p><p>
</p><p></p>
<strong>Q What will my email address be used for?</strong>
<p></p>
<p><strong>A</strong> At the most basic level your email address is required to
gain access to the new Supplier Portal. It is only used to contact you in
regards to your account (receipts, changing your password, etc).</p>
<p><strong>Q <a name="_dadmin"></a>Who is an Administrator and what purpose do they
serve in the Portal?</strong></p><strong>
</strong>
<p><strong>A</strong> Administrator is a feature of our Supplier
Portal. Here is some important information to note:
</p><div>
<ul>
<li>
Every Pay-to-Vendor/Supplier company must designate at least one individual
within the Supplier/Vendor company as an Administrator for their account with
Nordstrom.
</li><li>
There can be more than one administrator for an account. Best practice is to
keep a minimum of 2 administrators per Supplier/Vendor company.
</li><li>
Please note that Factors (a company that owns the receivables for a vendor)
cannot be granted access as administrators for any Supplier/Vendor account.
</li><li>
Administrators will be notified via email whenever a new user registers into
the Portal using their account.
</li><li>
Administrators can then login to the Portal so that they may activate the
users for his/her account. They can also choose to de-activate users.
</li>
</ul>
</div>
<p><strong>Q Why should I provide my phone number?</strong>
</p><p><strong>A </strong>
Phone numbers are collected only for administrators. Phone numbers will be
given in the confirmation email communication to the users as additional
contact information in case they have a problem with their account.
</p><p>
</p><p><strong>Q I have registered for the new Supplier Portal, now what?</strong></p><strong>
</strong>
<p><strong>A </strong>You will receive email confirmation that you have
registered. If you are the first administrator of your account,
you may proceed logging in to your account with your registered email address and
access the 'User Admin' tab to grant access to your pending users. Otherwise,
you will have to wait until your designated administrator grants access to your
account.
</p>
<p><strong>Q I’m trying to register for the portal, but I keep getting a message that
says “This user ID is already pending for this account. Please contact an account
administrator for assistance.”</strong></p><strong>
</strong>
<p><strong>A </strong>When you register for a portal account, you use a unique
Supplier/Vendor account name to associate your email address and portal
account to a vendor. You will get this message when you try to register using
a Supplier/Vendor account name that you’ve already registered with your email
address—you cannot request access to the same account more than once.
</p>
<p><strong>Q I’ve registered for the portal and my account is pending approval from
an administrator, but then it says there is no administrator currently registered
for the account.</strong></p><strong>
</strong>
<p><strong>A </strong>If no administrator is registered for your account, you
will either need to designate someone within your company to register as the
administrator and then grant you access, or you can re-register as the administrator
using a secondary email address to gain access and grant administrator privileges to
your primary email address.
</p>
<p><strong>Q I thought I registered as an administrator, but the confirmation email
I received said my account is pending approval by an administrator. No administrator
is registered for an account, but I should be the administrator. How do I change my
account to the administrator?</strong></p><strong>
</strong>
<p><strong>A </strong>Once you register as a user, the system will not allow you to
re-register as the administrator for the same account. In order to gain administrator
rights, you will need to either have someone else within your company register as the
administrator and then grant you admin rights, or you can register as the administrator
with a secondary email address and then grant your primary email address admin rights.
</p>
<p><strong>Q I tried registering as the administrator, but it says there’s already an
administrator present. Who is my administrator?</strong></p><strong>
</strong>
<p><strong>A </strong>Nordstrom cannot quickly identify who is currently registered as
the administrator on your account. If you get this error, please register as a regular
user. Once you complete the registration, you will receive a confirmation email that
will include the current administrator’s name, email address, and phone number.
</p>
<p><strong>Q I am the administrator for our account. I need to setup accounts for other
people within my company, or for my factor. How do I add users to the account?</strong></p><strong>
</strong>
<p><strong>A </strong>Administrators are not responsible for creating accounts for other
users, just approving and denying access. Additional users will have to create their own
accounts. The administrator will have to supply them with the appropriate supplier/vendor
account name for the desired account. Users will then complete the registration procedure
on their own. Administrators will ultimately grant or deny a pending user’s access.
</p>
<p><strong>Q I have more questions. Who do I contact?</strong></p><strong>
</strong>
<p><strong>A </strong>Please use the following information to contact us with your
questions:
</p><ul>
<li>
For <b>AP Vendor Merchandise Inquiry or Nordstrom Order Verification System (NOVS)</b>
contact <a href="mailto:[email protected]"><b>[email protected]</b></a>
</li>
</ul>
<ul>
<li>
For <b>Supplier Reports</b>,
contact <a href="mailto:[email protected]">
<b>[email protected]</b></a>
</li>
</ul>
<p><a href="#_Nordstrom_Portal_FAQs"><b><u>Back to top</u></b></a>
</p>
<ScrollableAnchor id={'_To_Request_Access'}>
<h3>To Request Access</h3>
<p><b>Q How do I get access to the Nordstrom Supplier Portal?</b>
</p>
<p><b>A </b>A Pay to Vendor as well as a Supplier must be set up prior to the
portal access. If you are an active Pay to Vendor or Supplier please contact:</p>
<ul>
<li>
For <b>AP Vendor Merchandise Inquiry or Nordstrom Order Verification System (NOVS)</b>
contact <a href="mailto:[email protected]"><b>[email protected]</b></a>
</li>
</ul>
<ul>
<li>
For permission to receive selling data through the Supplier Reports
contact: <a href="mailto:[email protected]">
[email protected]</a>.
</li>
</ul>
</ScrollableAnchor>
<ScrollableAnchor id={'_Nordstrom_Portal_FAQs'}>
<p><b><u>Back to top</u></b></p>
</ScrollableAnchor>
<ScrollableAnchor id={'_Portal_Access_User'}>
<h3>Portal Access User ID's</h3>
<p><b>Q What is the difference between my Portal User ID, Supplier/Vendor Account
Name and my Pay to Vendor Number or my Supplier Number?</b>
</p><h3></h3>
<p><b>A </b>For the daily business with Nordstrom, a Vendor is assigned a unique
'Pay to Vendor' number in the Nordstrom systems and subsequent Suppliers are
assigned a unique Supplier number. Each Supplier number is associated to the
parent 'Pay to Vendor' number.
</p>
<p>In the new Supplier Portal, the Supplier/Vendor Account Name replaces the term
Portal User ID. For Vendors and Suppliers to participate in web access,
additional security is in place. Each participating Pay to Vendor or Supplier
is assigned a unique Supplier/Vendor Account Name when they initially
request access to the portal. They use this Supplier/Vendor Account Name
to register with their unique and valid email address for this account. This
email address will act as their Portal Login ID going forward.
</p>
<p><b>Your Pay to Vendor number and/or Supplier number has not changed- you do not need
to alter data for EDI Invoicing transmissions.</b></p>
</ScrollableAnchor>
<ScrollableAnchor id={'_Nordstrom_Portal_FAQs'}>
<p><b><u>Back to top</u></b></p>
</ScrollableAnchor>
<ScrollableAnchor id={'_change_password'}>
<h3>How do I change my password/email address</h3>
</ScrollableAnchor>
<p><b>Q I have registered into the portal but I would like to change my password.
How do I make the change?</b></p><b>
</b>
<p><b>A </b>Please select the "<strong>Edit</strong> <b>User Info</b>" option
located on the sidebar on the Home page after you have logged into the portal
and follow the instructions outlined on this screen. A confirmation message
will be sent to the email address logged during the change password process.
All fields are required entry. Please note that the passwords need to be
a minimum of 7 characters in length and a maximum of 10 characters. Passwords
must consist of at least one numeric character and are case sensitive.</p>
<p><b>Q I would like to change my email address and keep my password, who should I
contact?</b></p><b>
</b>
<p><b>A </b>In the Supplier Portal, your email address is used as an
unique identifier to access your account. This information cannot be changed
once registered. However, you may choose to register for the same SVAccountName
with another email address of yours. This will be considered as a new account
registration.</p>
<p><b>Q Am I required to enter my email address to complete the registration process?</b>
</p><p><b>A </b>Yes, an email address is required to complete the registration process.
A confirmation message from Nordstrom will be sent to the email address
registered with the portal. Future notifications of Nordstrom guidelines,
policies, and business updates may be sent to the registered email address. <em><b>It
is important to verify you have entered a valid email address.</b></em></p>
<ScrollableAnchor id={'_Nordstrom_Portal_FAQs'}>
<p><b><u>Back to top</u></b></p>
</ScrollableAnchor>
<ScrollableAnchor id={'_Portal_User_ID'}>
<h3>Portal Login Unknown</h3>
</ScrollableAnchor>
<p><b>Q I know my Pay to Vendor number or Supplier number but I do not know my
Supplier/Vendor Account Name. I want to gain access to the applications on the
Website. Who should I contact?</b></p><b>
</b>
<p><strong>A </strong>In order to register for the Portal, you will need your
company’s Supplier/Vendor Account Name. Please contact your company’s Portal
administrator for this information. If you do not know your company’s Portal
administrator, you may contact one of the following two support groups:</p>
<ul>
<li>
For <b>AP Vendor Merchandise Inquiry or Nordstrom Order Verification System (NOVS)</b>,
please email your request to <b><a href="mailto:[email protected]">[email protected]</a></b>
with "SPECIAL REQUEST" in the subject field. Please include your Pay to Vendor
Number, Pay to Vendor Name, Contact person, Contact phone, and Contact email
address.
</li>
</ul>
<ul>
<li>
For <b>Supplier Reports</b> contact <a href="mailto:[email protected]"><b>[email protected]</b></a>.
Please include your Supplier Number, Supplier Name, Contact person, Contact
phone number and Contact email address.</li></ul>
<ScrollableAnchor id={'_Nordstrom_Portal_FAQs'}>
<p><b><u>Back to top</u></b></p>
</ScrollableAnchor>
<ScrollableAnchor id={'_Problems_Logging_On_1'}>
<h3>Problems Logging On</h3>
</ScrollableAnchor>
<p><b>Q I am having problems logging into the portal. Who should I contact?</b></p><b>
</b>
<p><strong>A </strong>If you have already registered with your email address on the
portal, you can use <strong>'Retrieve It'</strong> link available on the Login
Page to request a temporary password be sent to your email address. After this,
you may login with your email address and the temporary password to access
applications available to you on the portal. You will need to change the
password soon after logging in. If you continue to experience problems, please
send your inquiry to;</p>
<ul>
<li>
For <b>AP Vendor Merchandise Inquiry or Nordstrom Order Verification System (NOVS)</b>
contact <a href="mailto:[email protected]"><b>[email protected]</b></a>
</li>
</ul>
<ul>
<li>
For <b>Supplier Reports</b>
contact <b>
<a href="mailto:[email protected]">
[email protected]</a></b> with "Assistance Request" in the
subject field. Please include your Supplier Number, Supplier Name, Contact
person, Contact phone number and Contact email address.</li></ul>
<p><b>Q I’ve registered for the portal, but when I log in, I get a message saying,
“This user has no active accounts. Please contact your account administrator.”</b></p>
<p><strong>A </strong> When you register as a user for a portal account, your account is
pending approval. An administrator on your account needs to approve your access before you’re
able to log in to the portal. The confirmation email you received when registering includes
the contact email and phone number for the administrator.</p>
<p><a href="#_Nordstrom_Portal_FAQs"><b><u>Back to top</u></b></a></p>
<h3><a name="_How_to_navigate_2"></a>How to Navigate in the Portal</h3>
<p><b>Q How do I find the information I need in the Nordstrom Supplier web site?</b></p><b>
</b>
<p><b>A </b>When you request access to the portal, training materials and
navigation instructions are provided to you. Please refer to these documents or
contact:
</p>
<ul>
<li>
For <b>AP Vendor Merchandise Inquiry or Nordstrom Order Verification System (NOVS)</b>
contact <a href="mailto:[email protected]"><b>[email protected]</b></a>
</li>
</ul>
<ul>
<li>
For <b>Supplier Reports</b>
contact <a href="mailto:[email protected]">
<b>[email protected]</b></a> with "Assistance Request" in the
subject field. Please include your Supplier Number, Supplier Name, Contact
person, Contact phone number and Contact email address.</li></ul>
<ScrollableAnchor id={'_Nordstrom_Portal_FAQs'}>
<p><b><u>Back to top</u></b></p>
</ScrollableAnchor>
<ScrollableAnchor id={'_What_Info'}>
<h3>What information can I access with my Supplier/Vendor
Account Name</h3>
</ScrollableAnchor>
<p><b>Q What information can I access with my Supplier/Vendor Account Name? </b>
</p><p>
</p><p><strong>A </strong>A Pay to Vendor portal access is separate from a Supplier Reports access.</p>
<ul>
<li>
An active <u>Pay to Vendor</u> web account will grant access to the AP
Merchandise Vendor Inquiry website and Nordstrom Order Verification System
(NOVS). The Supplier/Vendor Account Name is used for the registration
process and future queries into the portal.
</li>
</ul>
<ul>
<li>
An active <u>Supplier</u> web account will grant access to the reporting in the
Supplier's ToolKit website. The Supplier/Vendor Account Name is used for the
registration process and future queries into the portal.</li></ul>
<p><b>Q Can more than one Supplier/Vendor Account Name be created for a single Pay
to Vendor Number or Supplier Number?</b></p><b>
</b>
<p><b>A </b>No, only one Supplier/Vendor Account Name is created per individual Pay
to Vendor or Supplier. Your company will have control over who has access to
your Supplier/Vendor Account Name. You can grant access to Sales
Representatives, Factors, Agents and/or Banks at your discretion.</p>
<ScrollableAnchor id={'_Nordstrom_Portal_FAQs'}>
<p><b><u>Back to top</u></b></p>
</ScrollableAnchor>
<h3><a name="_Minimum_PC_requirements"></a>Minimum PC Requirements</h3>
<p><b>Computer:</b>
</p><div style={{ "textIndent" : "1in" }}>Pentium 3 processor recommended
</div>
<div style={{ "textIndent" : "1in" }}>Minimum CPU of 1 GHZ processor
</div>
<div style={{ "textIndent" : "1in" }}>Internet access
</div>
<div style={{ "textIndent" : "1in" }}>Memory 256MB RAM</div>
<p></p>
<p><b>Operating System (O/S):</b>
</p><div style={{ "textIndent" : "1in" }}>Windows 2000 SP4 or Windows XP SP1
</div>
<div style={{ "textIndent" : "1in" }}>JavaScript enabled
</div>
<div style={{ "textIndent" : "1in" }}>Cookies enabled
</div>
<div style={{ "textIndent" : "1in" }}>ActiveX enabled
</div>
<div style={{ "textIndent" : "1in" }}>Adobe Acrobat Reader - current version</div>
<p></p>
<p><b>Browser:</b>
</p><div style={{ "textIndent" : "1in" }}>Internet Explorer 5.5 Service Pack 2 or above
</div>
<div style={{ "textIndent" : "1in" }}>Settings: 'Automatic' or 'Every visit to the page'
</div>
<div style={{ "textIndent" : "1in" }}>(Internet Options / Temporary Internet
Options/Settings)</div>
<p></p>
<p><b>Office Software:</b>
</p><div style={{ "textIndent" : "1in" }}>Office 2000/ Excel SR1 or above</div>
<p></p>
<p><a href="#_Nordstrom_Portal_FAQs"><b><u>Back to top</u></b></a></p>
<h3><a name="_Recommended_PC_setting"></a>Recommended PC Settings for Suppliers</h3>
<p>Same PC requirements as above with additional security settings. Set PC and
Browser Security and Pop Up Blocker to allow active pages from <a href="http://portal.nordstrom.com/">
<b>https://portal.nordstrom.com </b></a>
</p><p>There are many settings that you'll need to check. We do recommend your IT
person review any changes made to your PC or System security.</p>
<p><b>Additional toolbars (such as Google, Yahoo!, Earthlink) should be set to allow
pop ups for the supplier site. </b>
</p>
<p><b>Internet Explorer - Tools/Internet Options/Advanced</b>
</p><div style={{ "textIndent" : "1in" }}>Cookies enabled
</div>
<div style={{ "textIndent" : "1in" }}>JavaScript enabled,low settings
</div>
<div style={{ "textIndent" : "1in" }}>ActiveX enabled
</div>
<p></p>
<p><b>Tools/Internet Options/General/Temporary Internet Options/Settings</b>
</p><div style={{ "textIndent" : "1in" }}>'Automatic'
</div>
<p></p>
<p><b>Tools/Internet Options/Security/Trusted Sites/Sites</b>
</p><div style={{ "textIndent" : "1in" }}>Add <a href="http://portal.nordstrom.com/"><b>https://portal.nordstrom.com</b></a>
</div>
<div style={{ "textIndent" : "1in" }}>√ Require server verification
</div>
<p></p>
<p><b>Tools/Internet Options/Security/Custom Level</b>
</p><div style={{ "textIndent" : "1in" }}>Reset custom setting 'low'
</div>
<p></p>
<p><b>Internet Explorer version 7 settings - </b>Need all the above and the following
<b>Tools->Internet Options->Security->Trusted Sites->Custom Level...</b>
</p><div style={{ "textIndent" : "1in" }}>Under Downloads, Enable ‘Automatic prompting for Downloads'
</div>
<p></p>
<p><b>XP SP2 -</b> Need all the above and the following
<b>Tools/Internet Options/Pop Up Blocker/Pop Up Blocker settings</b>
</p><div style={{ "textIndent" : "1in" }}>Add <a href="http://portal.nordstrom.com/"><b>https://portal.nordstrom.com</b></a>
</div>
<div style={{ "textIndent" : "1in" }}>Reset 'Filter Setting' 'low - allow pop up from
secure sites'
</div>
<p></p>
<p>Save your settings, close your browser, re-open and log in.
You should see 2 small icons at the bottom of the window on the frame bar
('done' shows on this bar). One icon is the green circle with the check mark
'Trusted Site' and one is a mini web page with a green check mark. This will
verify settings are correct. XP security settings will prompt you to open or
save the report request when it is returned.</p>
</div>
);
}
export default FAQ;
I have also tried:
import ScrollableAnchor from 'react-scrollable-anchor';
import React, { Component } from "react";
import { configureAnchors } from 'react-scrollable-anchor';
And with or without the configureAnchors({}) call
I am having the same issue and I followed the doc. Has anyone found a solution?
Also experiencing this issue.
import React from 'react';
import ScrollableAnchor from 'react-scrollable-anchor'
const Category = ({ children, subcategory, title }) => {
return (
<section className="Category" style={styles}>
<ScrollableAnchor id={title}>
{ subcategory ? <h3>{title}</h3> : <h2>{ title }</h2> }
{ children }
</ScrollableAnchor>
</section>
);
};
Has anyone found the solution to this issue?
I am using it the same way MrJadaml is.
React version 16.4.2
In my case, I wrapped all content in a <div>...</div> and it worked. It looks like the ScrollableAnchor accepts only one child.
Example:
<ScrollableAnchor id={title}>
<div>
{ subcategory ? <h3>{title}</h3> : <h2>{ title }</h2> }
{ children }
</div>
</ScrollableAnchor>
DenysZP is totally correct. The render is only setup to handle a single child. Feel free to use React.Fragment in place of a div (since a div might mess up styling) Someone should update the docs. I might myself.
