I installed the TextToSpeech Cordova Plugin on my Ionic App:
"#ionic-native/text-to-speech": "^5.30.0",
"cordova-plugin-tts": "^0.2.3",
And used it in my vue file:
import { Plugins } from "#capacitor/core";
const { TextToSpeech } = Plugins;
...
methods: {
tts(text) {
TextToSpeech.speak(text)
.then(() => console.log("Success Speach"))
.catch((reason) => console.log(reason));
},
...
console.log(TextToSpeech);
I'm using Capacitor
IOS
When I'm trying to use the plugin on IOS: I get an unknown error: error {}
When I'm printing the plugin, I get: [log] - undefined
Browser
When I'm trying to use the plugin it prints as expecting: TextToSpeech does not have web implementation.
When I'm printing the plugin, I get: Proxy {}
So it's working and loaded in the Browser, but no on the Device.
I found the solution.
first update #ionic-native/core
npm uninstall --save #ionic-native/core && npm install --save #ionic-native/core#latest
The import the plugin like this
import { TextToSpeech } from "#ionic-native/text-to-speech";
Related
A clean-slate creation of an Expo-based React-Native app (npx create-expo-app my-app) and then installing react-native-elements runs fine on IOS, but generates the error below for running on the web. I also tried using the template provided by react-native-elements but wind-up with the same result.
Module parse failed: Unexpected token (7:58)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders
| import { defaultSpacing } from './theme';
| import { lightColors } from './colors';
> const isClassComponent = (Component) =>
Boolean(Component?.prototype?.isReactComponent);
| const combineByStyles = (propName = '') => {
| if (propName.endsWith('Style') || propName.endsWith('style')) {
at ./node_modules/#rneui/themed/dist/config/withTheme.js```
I created a shared-components repo which contains wrapped Material-UI components and are packaged as an NPM module.
The module works fine when installed via the remote package: npm install *name-of-package*, but when I npm link so I can develop locally it crashes saying the theme variables I define are undefined.
Here is my main repo's code:
import { ThemeProvider } from '#mui/material';
import { theme, Button } from 'my-shared-components'; // npm-link'd repo
...
<ThemeProvider theme={theme}>
<Button>Click</Button>. // crash occurs here saying a theme color is undefined
</ThemeProvider>
package.json
dependencies: {
"#mui/material": "^5.0.0-rc.0",
"#mui/styled-engine": "npm:#mui/styled-engine-sc#next",
"#mui/styled-engine-sc": "^5.0.0-rc.0",
...
}
Shared-Component repo code:
import { createTheme } from '#mui/material/styles';
...
export default createTheme(themeObj);
package.json
"peerDependencies": {
"#mui/material": "^5.0.0-rc.0",
"#mui/styled-engine-sc": "^5.0.0-rc.0",
"#mui/styled-engine": "npm:#mui/styled-engine-sc#next",
...
}
Does anyone know why this would work when I do npm install but not when I npm link? Thanks!
I created a react-native using this package it is a simple library and what it does is just pops up an alert:
import { NativeModules, Alert } from 'react-native';
const { RNReactNativeOkoModule } = NativeModules;
class RNReactNativeOko {
create() {
Alert.alert('You need to...')
}
}
export default new RNReactNativeOko()
export default RNReactNativeOkoModule
I then in other to test this module, I packed it using npm pack and installed it in a test project with:
npm install /Users/sidomexmusicstudio/Desktop/ReactNativeOkra/react-native-react-native-okra-1.0.0.tgz
the on running react-native run-ios I get the following error:
error Could not find the following native modules: RNReactNativeOko. Did you forget to run "pod install" ?
Please why is this?
I want to explore this project https://github.com/mqttjs/MQTT.js within the React Native environment. So I did this:
react-native init myproject
npm install --save mqtt
Then I pasted this sample code from the mqttjs into my App.js a bit after the "Welcome to React Native" component.
var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://test.mosquitto.org')
client.on('connect', function () {
client.subscribe('presence', function (err) {
if (!err) {
client.publish('presence', 'Hello mqtt')
}
})
})
client.on('message', function (topic, message) {
// message is Buffer
console.log(message.toString())
client.end()
})
But when I run react-native run-android, I get a compilation error with a message like
Module url does not exist in the Haste module map
I tried replacing mqtt://test.mosquitto.org with a url to my own mosquitto broker with some of these values: mqtt://192.168.0.20, tcp://192.168.0.20, 192.168.0.20. But all these still generated the same error.
What am I doing wrong?
You can solve this by explicitly installing the url module:
npm install url
I installed vue-chartjs and also added chart.js both using NPM
When I run npm start my server is started but in broswer console i get an error
TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Doughnut.extend is not a function
I'm not sure what this mean. I reinstalled all packages also installed this packages separete using npm install vue-chartjs
Can you show your code of your component? Webpack 3 ?
With vue-chartjs version 3 you have to create your components this way:
import {Doughnut} from 'vue-chartjs
export default {
extends: Doughnut,
mounted () {
this.renderChart(data, options)
}
}