Themes in NextJS doesn't work

[ThomasGysemans]

My project and steps to reproduce the problem

I want to use SweetAlert with the theme entitled "borderless". I was coding my project with it but I realised it wasn't working, so I built a new nextjs project with the following code:

// _app.js
import "../styles/globals.css";
import "@sweetalert2/theme-borderless/borderless.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

// index.js
import styles from "../styles/Home.module.css";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

export default function Home() {
  const MySwal = withReactContent(Swal);

  const open = () => {
    MySwal.fire({
      title: <p>Test with BORDERLESS Theme</p>,
    });
  };

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <button onClick={open} className={styles.OPENSWAL}>
          OPEN
        </button>
      </main>
    </div>
  );
}

NOTE: I did not change anything in the css files when I created the new project.

I have executed the following commands, in that order:

npx create-next-app testsweetalert
cd .\testsweetalert\
code .
npm install --save sweetalert2 sweetalert2-react-content
npm install --save sweetalert2 @sweetalert2/theme-borderless
npm run dev

Here is my package.json:

{
  "name": "testsweetalert",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@sweetalert2/theme-borderless": "^5.0.8",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sweetalert2": "^11.3.0",
    "sweetalert2-react-content": "^4.2.0"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "12.0.7"
  }
}

NOTE: I don't want to use SCSS

What's not working?

Swal is working, but the theme is the one by default. I don't know why the borderless theme is not used by Swal whereas it is installed, and the css file is imported in _app.js.

NOTE: importing the css file in /styles/globals.css doesn't change anything.

Expected behavior

I want to have the same behavior as on the documentation when I enable the borderless theme.

Live demo

You can reproduce easily a demo on your own computer, I have written the whole source code above.

[limonte]

I believe you missed this detail from the docs:

// index.js
- import Swal from 'sweetalert2'
+ import Swal from 'sweetalert2/src/sweetalert2.js'

Let me know if this helped

[ThomasGysemans]

import Swal from "sweetalert2/src/sweetalert2.js"

is throwing an error:

SyntaxError: Cannot use import statement outside a module

Same if I remove the ".js" extension

[limonte]

That's completely unrelated issue, https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import

[ThomasGysemans]

All right I had to use this instead:

import Swal from "sweetalert2/dist/sweetalert2.js";

The problem is that this isn't specified in the README of sweetalert2-react-content. It is also false in the repo sweetalert2-themes.

As you are a member, could you change that or should I publish an issue there? Or at least specify it in the READMEs?

[limonte]

That's the Next.js issue: https://github.com/vercel/next.js/issues/9890

But since Next.js is quite popular, I think it does make sense to update the docs. Thanks for the suggestion! Done 👍