Ionic-framework: Module problems with ionic and nextjs (react )

[SulimanTwfiq]

Bug Report

Ionic version:
ionic v4

Current behavior:
I have tried out ionic v4 with CRA and it works well but i want to use it with nextjs and i get alot of errors similar to this :

./node_modules/ionicons/dist/ionicons/svg/ios-switch.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="144" cy="368" r="42"/><path d="M367.5 272h-223C91.2 272 48 315.2 48 368.5S91.2 464 144.5 464h223c53.3 0 96.5-42.2 96.5-95.5S420.8 272 367.5 272zM144 432c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z"/><circle cx="368" cy="144" r="42"/><path d="M144.5 240h223c53.3 0 96.5-42.2 96.5-95.5S420.8 48 367.5 48h-223C91.2 48 48 91.2 48 144.5S91.2 240 144.5 240zM368 80c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64z"/></svg>

Expected behavior:
I think ionic v4 should work with nextjs ,gatsbyjs or any react framework

Other information:
I think the problems are related to CSS files .

• i am not using typescript .

*EDIT
I tried out ionic 4 with Gatsbyjs and it works
https://codesandbox.io/s/4zkwp5xv4w

[jthoms1]

This looks to be an issue with out nextjs uses the ionicon resources. I am going to leave this open as an issue that we need to investigate further.

That being said I am happy to hear it works with Gatsby!

[jthoms1]

Looks like next 2 does not support svgs out of the box and a babel plugin is needed to do so. More information is available here https://github.com/zeit/next.js/tree/master/examples/svg-components

This is not necessarily an issue with Ionic React but I will leave it open because it will be important to document this.

[SulimanTwfiq]

Thank you @jthoms1 for replying .
I am using gatsbyjs now and it works perfectly but i have problem in build time which is WebpackError: ReferenceError: window is not defined .

Steps for checking out the problem :
1) https://codesandbox.io/s/4zkwp5xv4w
2) download the project
3) npm i
4) gatsby build

[SulimanTwfiq]

I still trying to solve this problem , does ionic support SSR ?

[LunaTK]

It seems like Ionic does not support SSR because Ionic use ES module resolution, whereas SSR of Next.js seems like to be using CommonJS module resolution (not 100% sure).

First, to solve image resolving problem, you have to add plugins such as withCSS and withImages, and configure next.config.js properly.
Refer to zeit's official Nextjs plugin repo

Second, to solve SSR problem, you have to use dynamic import with named export, also disabling SSR.

import React from 'react';
import dynamic from 'next/dynamic';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

const IonApp = dynamic(
  async () => {
    const mod = await import('@ionic/react');
    return mod.IonApp;
  },
  {
    ssr: false
  }
);

const IonButton = dynamic(
  async () => {
    const mod = await import('@ionic/react');
    return mod.IonButton;
  },
  {
    ssr: false
  }
);

export default function lab() {
  return (
    <IonApp>
      <IonButton>IONIC 4</IonButton>
    </IonApp>
  );
}

Definitely, you will get bunch of dynamic import if you have to use more Ion components.
I believe there must be more simple way to import multiple components dynamically.
I have no time to check how can I do that. Check this.

[SulimanTwfiq]

Still Ionic doesn't support SSR. To solve this problem in gatsbyjs , you have to paste this code in gatsby-node.js .

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /\@ionic/,
use: loaders.null(),
},
],
},
})
}
}

Anyway, i don't recommend using Gatsbyjs v2 because it uses reach router which is not supported in ionic . Gatsbyjs v3 will use react-router .

[lcswillems]

I have the same issue. Did somebody find how to solve it?

[elylucas]

Closing this issue as its old on a pre-beta version of Ionic/React. If the problem still persists on the latest version, please create a new issue and link this one for reference.

[wis]

@elylucas I created one and commenting here with a link #20525 to link

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.