State.source.entity is not a function

Rcls · 4 October 2020 11:30

I seem to have a problem with @frontity/head-tags. I recently completed building my own theme and afterwards noticed I forgot about SEO. So I follow your documentation and installed the @frontity/head-tags npm package, added it to frontity.settings.json and even installed REST API - Head Tags plugin on Wordpress. But when I try to run the development server it immediately crashes with an Internal Server Error:

 TypeError: state.source.entity is not a function
      at getHeadTags (webpack-internal:///./node_modules/@frontity/head-tags/src/utils/index.ts:96:27)
      at Proxy.eval (webpack-internal:///./node_modules/@frontity/head-tags/src/index.ts:4:209)
      at eval (webpack-internal:///./node_modules/@frontity/head-tags/src/components/index.tsx:15:88)
      at Object.useMemo (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:255:854)
      at Object.useMemo (webpack-internal:///./node_modules/react/cjs/react.development.js:327:1217)
      at Root (webpack-internal:///./node_modules/@frontity/head-tags/src/components/index.tsx:15:61)
      at runAsReaction (webpack-internal:///./node_modules/@frontity/connect/src/reactionRunner.js:16:45)
      at reaction (webpack-internal:///./node_modules/@frontity/connect/src/observer.js:7:131)
      at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:21:16)
      at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:397:2319)

I also tried installing @frontity/yoast but same results there.

I’ll list the information about npx frontity info below. The website is deployed to www.web1.fi and the REST API is at static.web1.fi/wp-json, but I haven’t made any modifications there yet. I went and tried to implement this locally and it didn’t work, so now I’m stuck. I can’t share the code repository.

It seems as if the module is attempting to gain access to state.source.entity which does not exist, but why doesn’t it exist?

I have no real idea why this problem occurs and where. I am fairly certain it’s the project as I cannot reproduce this when I do a clean install using npx frontity create. That’s why I’m asking the people here how can I find out the problem here because the error originates from the module itself.

npx frontity info

## System:
 - OS: Windows 10 10.0.19041
 - CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor              
 - Memory: 16.77 GB / 31.91 GB
## Binaries:
 - Node: 12.16.0 - C:\Program Files\nodejs\node.EXE
 - npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
## Browsers:
 - Chrome: 85.0.4183.121
 - Edge: Spartan (44.19041.423.0), Chromium (85.0.564.68)
 - Internet Explorer: 11.0.19041.1
## npmPackages:
 - @fortawesome/fontawesome-svg-core: ^1.2.29 => 1.2.30 
 - @fortawesome/free-solid-svg-icons: ^5.13.1 => 5.14.0 
 - @fortawesome/react-fontawesome: ^0.1.11 => 0.1.11 
 - @frontity/core: ^1.7.2 => 1.7.3 
 - @frontity/head-tags: ^1.0.7 => 1.0.7 
 - @frontity/html2react: ^1.3.4 => 1.3.4 
 - @frontity/mars-theme: ^1.4.3 => 1.4.3 
 - @frontity/tiny-router: ^1.2.1 => 1.2.1 
 - @frontity/web1-theme: ./packages/web1-theme => 1.0.0 
 - @frontity/wp-source: ^1.8.0 => 1.8.1 
 - bootstrap: ^4.5.0 => 4.5.2 
 - dotenv: ^8.2.0 => 8.2.0 
 - frontity: ^1.10.0 => 1.10.1 (1.12.0)
 - i18next: ^19.6.3 => 19.6.3 
 - i18next-browser-languagedetector: ^5.0.1 => 5.0.1 
 - i18next-http-backend: ^1.0.17 => 1.0.17 
 - lodash: ^4.17.15 => 4.17.19 
 - react-bootstrap: ^1.3.0 => 1.3.0 
 - react-bootstrap/AbstractNav:  undefined ()
 - react-bootstrap/AbstractNavItem:  undefined ()
 - react-bootstrap/Accordion:  undefined ()
 - react-bootstrap/AccordionCollapse:  undefined ()
 - react-bootstrap/AccordionContext:  undefined ()
 - react-bootstrap/AccordionToggle:  undefined ()
 - react-bootstrap/Alert:  undefined ()
 - react-bootstrap/Badge:  undefined ()
 - react-bootstrap/BootstrapModalManager:  undefined ()
 - react-bootstrap/Breadcrumb:  undefined ()
 - react-bootstrap/BreadcrumbItem:  undefined ()
 - react-bootstrap/Button:  undefined ()
 - react-bootstrap/ButtonGroup:  undefined ()
 - react-bootstrap/ButtonToolbar:  undefined ()
 - react-bootstrap/Card:  undefined ()
 - react-bootstrap/CardColumns:  undefined ()
 - react-bootstrap/CardContext:  undefined ()
 - react-bootstrap/CardDeck:  undefined ()
 - react-bootstrap/CardGroup:  undefined ()
 - react-bootstrap/CardImg:  undefined ()
 - react-bootstrap/Carousel:  undefined ()
 - react-bootstrap/CarouselCaption:  undefined ()
 - react-bootstrap/CarouselItem:  undefined ()
 - react-bootstrap/CloseButton:  undefined ()
 - react-bootstrap/Col:  undefined ()
 - react-bootstrap/Collapse:  undefined ()
 - react-bootstrap/Container:  undefined ()
 - react-bootstrap/Dropdown:  undefined ()
 - react-bootstrap/DropdownButton:  undefined ()
 - react-bootstrap/DropdownItem:  undefined ()
 - react-bootstrap/DropdownMenu:  undefined ()
 - react-bootstrap/DropdownToggle:  undefined ()
 - react-bootstrap/ElementChildren:  undefined ()
 - react-bootstrap/Fade:  undefined ()
 - react-bootstrap/Feedback:  undefined ()
 - react-bootstrap/Figure:  undefined ()
 - react-bootstrap/FigureCaption:  undefined ()
 - react-bootstrap/FigureImage:  undefined ()
 - react-bootstrap/Form:  undefined ()
 - react-bootstrap/FormCheck:  undefined ()
 - react-bootstrap/FormCheckInput:  undefined ()
 - react-bootstrap/FormCheckLabel:  undefined ()
 - react-bootstrap/FormContext:  undefined ()
 - react-bootstrap/FormControl:  undefined ()
 - react-bootstrap/FormFile:  undefined ()
 - react-bootstrap/FormFileInput:  undefined ()
 - react-bootstrap/FormFileLabel:  undefined ()
 - react-bootstrap/FormGroup:  undefined ()
 - react-bootstrap/FormLabel:  undefined ()
 - react-bootstrap/FormText:  undefined ()
 - react-bootstrap/Image:  undefined ()
 - react-bootstrap/InputGroup:  undefined ()
 - react-bootstrap/Jumbotron:  undefined ()
 - react-bootstrap/ListGroup:  undefined ()
 - react-bootstrap/ListGroupItem:  undefined ()
 - react-bootstrap/Media:  undefined ()
 - react-bootstrap/Modal:  undefined ()
 - react-bootstrap/ModalBody:  undefined ()
 - react-bootstrap/ModalContext:  undefined ()
 - react-bootstrap/ModalDialog:  undefined ()
 - react-bootstrap/ModalFooter:  undefined ()
 - react-bootstrap/ModalHeader:  undefined ()
 - react-bootstrap/ModalTitle:  undefined ()
 - react-bootstrap/Nav:  undefined ()
 - react-bootstrap/NavContext:  undefined ()
 - react-bootstrap/NavDropdown:  undefined ()
 - react-bootstrap/NavItem:  undefined ()
 - react-bootstrap/NavLink:  undefined ()
 - react-bootstrap/Navbar:  undefined ()
 - react-bootstrap/NavbarBrand:  undefined ()
 - react-bootstrap/NavbarCollapse:  undefined ()
 - react-bootstrap/NavbarContext:  undefined ()
 - react-bootstrap/NavbarToggle:  undefined ()
 - react-bootstrap/Overlay:  undefined ()
 - react-bootstrap/OverlayTrigger:  undefined ()
 - react-bootstrap/PageItem:  undefined ()
 - react-bootstrap/Pagination:  undefined ()
 - react-bootstrap/Popover:  undefined ()
 - react-bootstrap/PopoverContent:  undefined ()
 - react-bootstrap/PopoverTitle:  undefined ()
 - react-bootstrap/ProgressBar:  undefined ()
 - react-bootstrap/ResponsiveEmbed:  undefined ()
 - react-bootstrap/Row:  undefined ()
 - react-bootstrap/SafeAnchor:  undefined ()
 - react-bootstrap/SelectableContext:  undefined ()
 - react-bootstrap/Spinner:  undefined ()
 - react-bootstrap/SplitButton:  undefined ()
 - react-bootstrap/Switch:  undefined ()
 - react-bootstrap/Tab:  undefined ()
 - react-bootstrap/TabContainer:  undefined ()
 - react-bootstrap/TabContent:  undefined ()
 - react-bootstrap/TabContext:  undefined ()
 - react-bootstrap/TabPane:  undefined ()
 - react-bootstrap/Table:  undefined ()
 - react-bootstrap/Tabs:  undefined ()
 - react-bootstrap/ThemeProvider:  undefined ()
 - react-bootstrap/Toast:  undefined ()
 - react-bootstrap/ToastBody:  undefined ()
 - react-bootstrap/ToastContext:  undefined ()
 - react-bootstrap/ToastHeader:  undefined ()
 - react-bootstrap/ToggleButton:  undefined ()
 - react-bootstrap/ToggleButtonGroup:  undefined ()
 - react-bootstrap/Tooltip:  undefined ()
 - react-bootstrap/createChainedFunction:  undefined ()
 - react-bootstrap/createWithBsPrefix:  undefined ()
 - react-bootstrap/divWithClassName:  undefined ()
 - react-bootstrap/helpers:  undefined ()
 - react-bootstrap/triggerBrowserReflow:  undefined ()
 - react-bootstrap/types:  undefined ()
 - react-bootstrap/usePopperMarginModifiers:  undefined ()
 - react-bootstrap/useWrappedRefWithWarning:  undefined ()
 - react-ga: ^3.1.2 => 3.1.2 
 - react-i18next: ^11.7.0 => 11.7.0 
 - react-responsive: ^8.1.0 => 8.1.0 
 - react-toastify: ^6.0.8 => 6.0.8 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

juanma · 5 October 2020 08:55

Hi @Rcls

Can you Provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

Rcls · 5 October 2020 18:13

Hi, thanks for the reply!

I created a codesandbox and retraced some of my steps. Turns out it’s due to splitting the src/index.js to two separate files: client.js and server.js. I did this so I could use dotenv.

orballo · 12 October 2020 18:14

If you need to use dotenv you can set that part of the state in frontity.settings.js instead of src/index.js. Hope that helps.

Rcls · 13 October 2020 15:31

Did not solve the issue. I did however update @frontity/wp-source and it started working. Apparently it was missing from wp-source. Issue resolved.