0

I'm using react with ionic. I have installed the @ionic/react and @ionic/react-router packages, in the same way as other project that I used to develop. In this project i'm trying to use rollup to generate reusable components for other projects, but in this case an error appears me in IonReactRouter, the following it's my code:

import * as React from 'react';
import { IonApp } from '@ionic/react';
import { 
    Route,
    Switch, 
} from 'react-router';
import { IonReactRouter } from '@ionic/react-router';

/*Some Props interfaces*/

export const Router:React.FC<RouterProps> = (props: RouterProps) => (
    <IonApp>
        <IonReactRouter>
            <Routes {...props}/>
        </IonReactRouter>
    </IonApp>
);

export default GalaxyRouter;

with this code, the following error appears me.

(rpt2 plugin) Error: /home/ec2-user/environment/galaxy-components-lib/src/GalaxyRouter/index.tsx(35,9): 
semantic error TS2605 JSX element type 'IonReactRouter' is not a constructor function for JSX elements.

this is my package.json:

{
  "name": "a-lib",
  "version": "0.0.0",
  "description": "",
  "author": "",
  "license": "MIT",
  "repository": "",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "engines": {
    "node": ">=8",
    "npm": ">=5"
  },
  "scripts": {
    "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
    "test:watch": "react-scripts-ts test --env=jsdom",
    "build": "rollup -c",
    "start": "rollup -c -w",
    "prepare": "npm run build",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build",
    "release": "standard-version"
  },
  "peerDependencies": {
    "prop-types": "^15.5.4",
    "react": "^15.0.0 || ^16.0.0",
    "react-dom": "^15.0.0 || ^16.0.0",
    "@ionic/react": "^5.0.4",
    "@ionic/react-router": "^5.0.4",
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1"
  },
  "devDependencies": {
    "@ionic/react": "^5.0.5",
    "@ionic/react-router": "^5.0.5",
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@svgr/rollup": "^2.4.1",
    "@types/jest": "^23.1.5",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/react-router-dom": "^5.1.3",
    "babel-core": "^6.26.3",
    "babel-runtime": "^6.26.0",
    "cross-env": "^5.1.4",
    "gh-pages": "^1.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts-ts": "^2.16.0",
    "rollup": "^0.62.0",
    "rollup-plugin-babel": "^3.0.7",
    "rollup-plugin-commonjs": "^9.1.3",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-postcss": "^1.6.2",
    "rollup-plugin-typescript2": "^0.17.0",
    "rollup-plugin-url": "^1.4.0",
    "standard-version": "^7.1.0",
    "typescript": "^2.8.3"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "@types/classnames": "^2.2.10",
    "classnames": "^2.2.6"
  }
}

and this is my rollup configuration:

import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svgr from '@svgr/rollup'

import pkg from './package.json'

export default {
  input: 'src/index.tsx',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      exports: 'named',
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      exports: 'named',
      sourcemap: true
    }
  ],
  plugins: [
    external(),
    postcss({}),
    url(),
    svgr(),
    resolve(),
    typescript({
      rollupCommonJSResolveHack: true,
      clean: true
    }),
    commonjs({
      include: 'node_modules/**',
      namedExports: {
        'node_modules/react-is/index.js': ['isValidElementType']
      }
    })
  ]
}

I don't undestand why it's happens with this code, and I have no idea how to debug or fix it.

Luciano Alzugaray
  • 1

1 Answers1

-1

IonReactRouter has been moved to its own package, so add this to your imports:

import { IonReactRouter } from '@ionic/react-router';

link here: https://github.com/ionic-team/ionic/issues/18964

simmer
  • 2,639
  • 1
  • 18
  • 22
kbirdz
  • 1