Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Module problems with ionic and nextjs (react )

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:10 (3 by maintainers)

Top GitHub Comments

3reactions

lcswillemscommented, Aug 20, 2019

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

0reactions

ionitron-bot[bot]commented, Mar 19, 2020

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.

Top Results From Across the Web

bug: @ionic/react doesn't work [great] with Next.js #19975

Updating webpack's config with config.output.globalObject = 'this' doesn't change anything (if I get it well that's because the file that is causing the...

Set Up Swiper.js for React Slides [Example] - Ionic Framework

By default, Swiper for React does not import any additional modules. To use modules such as Navigation or Pagination, you need to import...

Building a Native Mobile App with Next.js and Capacitor

In this tutorial we will start with a new Next.js app and move into native land using Capacitor and eventually also add Ionic...

Use Mapbox GL JS in a React app | Help

React is a popular JavaScript library used for building user interfaces. Since React manipulates the DOM, it can be confusing to connect React...

Getting started with Capacitor using Next.js on Android - Ironeko

Ever wondered how to run a Next.js app natively on a mobile device? It requires some setup but it's actually very easy thanks...