@prismicio/react import error

Developing with Prismic
1

Hi guys,

I'm trying to integrate my Prismic CMS into a react project.

So far i have done 2 things

  1. npm install @prismicio/react @prismicio/client @prismicio/helpers
  2. import { PrismicProvider } from '@prismicio/react'

Now my project has an error:

./node_modules/@prismicio/react/dist/index.mjs
Attempted import error: 'Element' is not exported from '@prismicio/richtext'.

Is there a way i can get around this issue?

Thanks
Neil

3

Hello @neilshahlimited

Welcome to the Prismic community, and thanks for reaching out to us.

I need more information to resolve this issue:

  1. paste your package.json file.
  2. relevant code snippets or your project file.

Thanks,
Priyanka

4

Hi Priyanka,

No worries, let me try and get these 2 out to you.
If there is anything else you need, please let me know.

Thanks
Neil

///////////////////// index.js /////////////////////////////
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import './index.scss'
import App from './App'
import { PrismicProvider } from '@prismicio/react'

ReactDOM.render(
<React.StrictMode>



</React.StrictMode>,
document.getElementById('root')
)

////////////////////// package.json //////////////////////////
{
"name": "minima-website",
"version": "0.1.0",
"private": true,
"dependencies": {
"@prismicio/client": "^6.1.0",
"@prismicio/helpers": "^2.0.0",
"@prismicio/react": "^2.0.3",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"animejs": "^3.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"sass": "^1.49.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"prettier": {
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"printWidth": 160
},
"devDependencies": {
"express": "^4.17.1"
}
}

5

Hi Priyanka,

I've updated some dependencies in package.json and now it is working. You can close this ticket.

It may be there is a dependency on react-scripts 5.0

Thanks
Neil

"dependencies": {
"@prismicio/client": "^6.1.0",
"@prismicio/helpers": "^2.0.0",
"@prismicio/react": "^2.0.3",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-router-dom": "^6.0.2",
"animejs": "^3.2.1",
"sass": "^1.49.0"
}

6

Hello, @neilshahlimited

I am glad that you figured it out. Feel free to reach out to us if you have any questions.

Thanks,
Priyanka