Cannot read property 'frontity' of undefined

🙋Get Help
1

I worked, I didn’t want to wait for tomorrow. :partying_face:
But I needed to create a new Frontity project, because I got some weird error with the old installation after updating it with npm install. I guess I have messed something while trying to get image imported during weekend.

In case you @luisherranz are interested that error, it’s there below. But like I said, I may caused that by messing with webpack, before you provided the update.

  TypeError: Cannot read property 'frontity' of undefined
      at Theme (webpack-internal:///./packages/mars-theme/src/html/components/theme.js:23:329)
      at ReactiveClassComp.render (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:13:170)
      at runAsReaction (webpack-internal:///./node_modules/@frontity/connect/src/reactionRunner.js:16:45)
      at ReactiveClassComp.reaction [as render] (webpack-internal:///./node_modules/@frontity/connect/src/observer.js:7:131)
      at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:456:631)
      at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:451:122)
      at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:487:855)
      at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:487:55)
      at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:520:116)
      at app.use (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:47:243)
2

Line 23 of theme.js is

<title>{state.frontity.title}</title>`.

If the error is Cannot read property 'frontity' of undefined it looks like state is undefined.

Check that the Theme component is still “connected”:

export default connect(Theme);

If it’s not, it won’t receive state or actions from Frontity.

Let me know if that fixes the issue.

3

Yes, I can found those lines from my code.

Line 23 => const Theme = ({ state }) => (

<>

<Head>
  <title>{state.frontity.title}</title>
  <html lang="en" />
</Head>
<Global styles={globalStyles} />
<HeadContainer>
  <Header />
</HeadContainer>
<IntroductionContainer>
  <Introduction />
</IntroductionContainer>

<Body>
    
  {state.source.data(state.router.path).isArchive && <List />}
  {state.source.data(state.router.path).isPostType && <Post />}
  {state.source.data(state.router.path).is404 && <Page404 />}
    
</Body>

</>
);

export default connect(Theme);

And from Chrome developer tools:

frontity.state
VM989:1 Uncaught ReferenceError: frontity is not defined
at :1:1

4

Do you have a repo we can take a look at?

5

I pushed the broken code here:

But like I said, I tried many different things before Frontity update and maybe I messed something.

6

Hi @marika.kononen!

I faced the same error. But it was fixed by just replacing Your-Project/node_modules/@ frontity folder with the same folder from latest frontity project (npx frontity create my-app).

1
1.png1440Ă—2099 1.32 MB
2
2.png1440Ă—1299 434 KB
3
3.png1440Ă—4778 1.39 MB

2 Likes
7

That’s right, thanks @smit.soni22 :slight_smile:

Just an additional note: instead of copying and pasting the node_modules folder you can run npm update to update all your packages.

During the beta version we probably want to also run npm outdated:

55

And update manually any package that appears there with:

npm install @frontity/core@latest

Please note that during the beta using npm install ...@latest can include breaking changes and broke your code if it’s not properly updated. That won’t happen once we release the 1.0.0 version.

If you guys want to learn more about semantic versioning you can take a look at https://semver.org/ :slight_smile:

1 Like
13

Hey @SantosGuillamot I think we could create a guide explaining how to update Frontity using @luisherranz’s post.

I’ve opened a thread to talk about this: Create a guide explaining how to update frontity framework and its packages

15

Oh, it was so simple one. :laughing: Thank you! It’s working now.

2 Likes