Intro.js does not working with React and Remix.run

Question

I'm trying to create onboarding modals on header links with intro.js . I'm using intro.js package in React.

Here's the code:

import { useState, type FC } from 'react'
import type { Links } from '../types'
import 'intro.js/introjs.css'
import { Steps } from 'intro.js-react'

export const Test = () => {
  const [enabled, setEnabled] = useState(false)
  const [initialStep, setInitialStep] = useState(0)

  const onExit = () => {
    setEnabled(false)
  }

  const steps = [
    {
      element: '#test1',
      intro: 'You can use this button for help',
      position: 'right',
    },
    {
      element: '#test2',
      intro: 'You can use this button to get more information',
    },
    {
      element: '#test3',
      intro: 'You can use this button to contact us',
    },
  ]

  return (
    <ul className='text-black-primary font-medium text-base flex gap-3 items-center max-md:text-white max-md:block'>
      <Steps enabled={enabled} steps={steps} initialStep={initialStep} onExit={onExit} />
      <div className='flex gap-5'>
        <p className='m-1' id='test1'>
          test1
        </p>
        <p className='m-1' id='test2'>
          test2
        </p>
        <p className='m-1' id='test3'>
          test3
        </p>
        <p
          className='m-1'
          id='test4'
          onClick={() => {
            console.log('test')
            setEnabled(true)
          }}
        >
          test4
        </p>
      </div>
    </ul>
  )
}

Interesting part is that I've tried this library with fresh create-react-app and it worked fine. But with my existing project 1st issue I've faced was could not resolve intro.js/introjs.css, after installing intro.js it dissapeared, but again, fresh react-app had no issues. And the main one is that it's not working.

Answer 1

One possible issue could be that the CSS file for intro.js is not being loaded correctly.You can import the CSS file like this:

import 'intro.js/introjs.css';

Make sure that you have installed both intro.js and intro.js-react using npm. You can install them like this:

npm install intro.js intro.js-react