'@frontity/html2react' module not found

🙋Get Help
1

So I’ve followed the instructions at https://docs.frontity.org/api-reference-1/frontity-html2react installing it in the root directory of my project and including in my frontity.settings.js config as such:

const settings = {
  ...
  "packages": [
    {
      "name": "ljmv-theme"
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          api: "http://clientwebsite.test/wp-json/",
          homepage: "/home"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;

Only when I go to use it in my component, I get a ReferenceError: Html2React is not defined

import React from 'react'
import {connect} from 'frontity'

const Menus = ({state}) => {
  const data = state.source.get(state.router.link)
  const post = state.source[data.type][data.id]

  console.log(post.acf)
  
  return (
    <div>
      <h1>{post.title.rendered}</h1>

      <Html2React html={post.content.rendered} />
    </div>
  )
}

export default connect(Menus)

Which makes total sense because I never imported it! However, when I import it by adding import Html2React from '@frontity.html2react', I get the following error:

 ERROR in ./packages/ljmv-theme/src/components/menus.js
    Module not found: Error: Can't resolve '@frontity/html2react' in '/home/myhome/Development/ljmv/ljmv-frontity/packages/ljmv-theme/src/components'

And it’s all in red and scary looking. According to how I read the documentation, I followed it exactly, but this is obviously not right. Here are my additional details:

## System:
 - OS: Linux 5.4 Pop!_OS 20.04 LTS
 - CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
 - Memory: 3.57 GB / 31.22 GB
 - Shell: 5.0.16 - /bin/bash
## Binaries:
 - Node: 12.18.1 - ~/n/bin/node
 - npm: 6.14.5 - ~/n/bin/npm
## Browsers:
 - Chrome: 83.0.4103.106
 - Firefox: 77.0.1
## npmPackages:
 - @frontity/core: ^1.7.1 => 1.7.1 
 - @frontity/html2react: ^1.3.4 => 1.3.4 
 - @frontity/tiny-router: ^1.2.1 => 1.2.1 
 - @frontity/wp-source: ^1.8.0 => 1.8.0 
 - frontity: ^1.9.0 => 1.9.0 
 - ljmv-theme: file:packages/ljmv-theme => 1.0.0 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found
3

Anyone have any tips on this?

4

I think you don’t have to import the package itself, you can find html2react inside libraries. This means that you just have to pass libraries to your component and then you can use Html2React. I guess your <Menus /> component should be something similar to this:

import React from 'react'
import {connect} from 'frontity'

const Menus = ({state, libraries}) => {
  const data = state.source.get(state.router.link)
  const post = state.source[data.type][data.id]
  const Html2React = libraries.html2react.Component;

  console.log(post.acf)
  
  return (
    <div>
      <h1>{post.title.rendered}</h1>

      <Html2React html={post.content.rendered} />
    </div>
  )
}

export default connect(Menus)

Let us know if that solves the problem :slightly_smiling_face:.

7

@SantosGuillamot Thanks so much! That worked perfectly!