Can't setup the library in Next.js Pages

[therealgabryx]

Hey there, I'm getting these errors while trying to open a page after installing NextStep.

I'm on "next": "^14.2.3", using pages directory, so I'm loading the components in _app.tsx like so:

But for some reason I get these and can't load the app at all.

Not sure if the problem is with my installation or the library – but any idea what could be causing this? I'm open to discuss about a solution and contribute if needed

[enszrlu]

I have not tested this with pages router yet. Since I am using next/navigation, I am not sure if it would work with it.

One thing to check, sometimes it does not install peer dependencies properly. Can you please check it you have these in your package.json?

I am keen to work on this to support pages router as well. Thanks for raising the issue.

radix-ui/react-portal
framer-motion

[therealgabryx]

Tried installing both packages but I'm still getting the same error, so I suppose the issue is not with peer deps

[enszrlu]

Tried installing both packages but I'm still getting the same error, so I suppose the issue is not with peer deps

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    esmExternals: true,
  },
  transpilePackages: ['nextstepjs'],
};

export default nextConfig;

can you please try above in your next.config.mjs?

The error you're encountering is due to a mismatch between ES modules (which use export statements) and CommonJS modules (which use module.exports). The nextstepjs package is using ES module syntax, but your Next.js project is set up to use CommonJS.

I will add this info to readme and docs.

Please let me know if this resolves the issue.

[enszrlu]

@therealgabryx have you had a chance to test it out? I was able to setup without any issue once I update next config as above.

[therealgabryx]

@enszrlu confirm that the nextConfig change fixed it and app doesn't crash anymore! Thank you.

However – I can't seem to figure out how to make the library work🧐 I set everything up as described (including the tailwind.config part) but even tho the tour starts, nothing shows up.

As you can see here, the app is still wrapped by the provider, and i defined a "mainTour" with a first step with id #tour1-step1, id that is then assigned to the div. Seems straight forward and can't understand why it might not be working. Tried passing a custom Card component too but no changes.

https://github.com/user-attachments/assets/9901d331-3ebb-45f3-ba50-c49f4c1eb30a

Any clue on this?

[enszrlu]

@enszrlu confirm that the nextConfig change fixed it and app doesn't crash anymore! Thank you.

However – I can't seem to figure out how to make the library work🧐 I set everything up as described (including the tailwind.config part) but even tho the tour starts, nothing shows up.

As you can see here, the app is still wrapped by the provider, and i defined a "mainTour" with a first step with id #tour1-step1, id that is then assigned to the div. Seems straight forward and can't understand why it might not be working. Tried passing a custom Card component too but no changes.

https://github.com/user-attachments/assets/9901d331-3ebb-45f3-ba50-c49f4c1eb30a

Any clue on this?

It exactly looks like tailwindconfig issue. Can I see your tailwindconfig and package.json as well? Or if it is a public repo, you can send me the repo link 😊

[therealgabryx]

@enszrlu not a public repo sadly!

I'm working with a pnpm mororepo structured with /packages and /apps folders

in /apps/web I have the next.js app, while in /packages/fe-common I have a vite app with the design system package and storybook installation, that exports the base tailwind config.

Thanks for the heads up about the config btw, I'll look into what could cause this later. (This might be very specific to my usage scenario: maybe installing nextstep in the design system package would do? I'll give that a try)

Here's the configs

edit: I omitted package.jsons for brevity, but we have 2 of them: the next.js one and the design system package one. If u wanna take a look I still can put them here (it's a lot tho, so maybe just lemme know what to check for, if anything)

[enszrlu]

@therealgabryx I am pretty sure issue is related to tailwindcss config, somehow it is not parsing it properly. If you try beta version with npm install nextstepjs@beta, it should at least show the card with bit broken style.

I am currently stripping the library from tailwindcss so it would not be dependent on tailwindcss. You can download the code from the branch and replace your node_module/nextstepjs with this to test it out. I am not releasing it as I want to fully test it first.

Here is the branch: InlineCSS NextStep

[enszrlu]

@therealgabryx Hi, do you have any update on this issue?