Я использую реагирую с Иони c. Я установил пакеты @ionic/react
и @ionic/react-router
так же, как и другие проекты, которые я использовал для разработки. В этом проекте я пытаюсь использовать накопительный пакет для создания повторно используемых компонентов для других проектов, но в этом случае я вижу ошибку в IonReactRouter
, вот мой код:
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;
с этим кодом, следующая ошибка появляется у меня.
(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.
это мой пакет. 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"
}
}
и это моя конфигурация накопительного пакета:
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 не понимаю, почему это происходит с этим кодом, и я не знаю, как его отладить или исправить.