I'm switching a SDK from Expo managed workflow to Expo bare workflow to reduce some of the unnecessary libraries included in Expo. I'm currently using some of the libraries such as Secure-store, Constants and Web browser from Expo instead of using the entire Expo package. I have some tests originally ran in jest, jest-expo and Expo. I removed expo from jest and trying to compile jest with only those three expo libraries above along with #unimodules. The tests files have import statements such as:
import * as SecureStore from 'expo-secure-store';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';
However, when compiling jest, it keeps giving me
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. >SyntaxError: Unexpected token import at
import Constants from 'expo-constants'; >ScriptTransformer._transformAndBuildScript(node_modules/#jest/transform/build/ScriptTransformer.js:471:17)
Seems like I might have resolved unexpected imports for expo-secure-store since I was getting that error before. I switched from Babel6 to babel7, added a babel.config.js that looks like this:
module.exports = {
presets: [
'#babel/preset-env'
],
env: {
test: {
presets: [['#babel/preset-env']]
}
},
plugins: [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
};
And i'm switching from jest-preset: jest-expo to jest-preset: react-native.
Am I doing something wrong here with the workflow? Any help appreciated.
A bit late but I was having this problem and I fixed adding
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
following the guide from https://docs.expo.io/guides/testing-with-jest/
Related
Getting below error for any snapshot testing where the component is using following import
import { Auth } from 'aws-amplify';
Test suite failed to run
NetInfo must be passed to networkMonitor to enable reachability in React Native
at ReachabilityNavigator.Object.<anonymous>.ReachabilityNavigator.networkMonitor (node_modules/#aws-amplify/core/src/Util/Reachability.native.ts:20:10)
at Object.<anonymous> (node_modules/#aws-amplify/datastore/src/sync/datastoreReachability/index.native.ts:4:55)
at Object.<anonymous> (node_modules/#aws-amplify/datastore/src/sync/datastoreConnectivity.ts:3:1)
If you go to the aws-aplify code, that error is thrown in this networkMonitor function, which is called in this other place where #react-native-community/netinfo is used. Mocking the dependency as indicated in the lib README should fix the issue.
If you do not have a Jest Setup file configured, you should add the
following to your Jest settings and create the jest.setup.js file in
project root:
setupFiles: ['<rootDir>/jest.setup.js']
You should then add the
following to your Jest setup file to mock the NetInfo Native Module:
import mockRNCNetInfo from '#react-native-community/netinfo/jest/netinfo-mock.js';
jest.mock('#react-native-community/netinfo', () => mockRNCNetInfo);
I'm making a react native app that makes a request to my server hosted on heroku.
Should I be hiding the URL of my server and if so how can I add an environment variable to a react native project?
I have made a .env file and then have done this:
console.log(process.env.URL)
Which is returning undefined - I am also using expo if that makes a difference.
If you use Expo, there is an easy way to create environment variables.
In your app.json file
{
"expo": {
"extra": {
"URL": "https://..."
}
}
}
After that, you will need to install the expo-constant package.
expo install expo-constants
And, to get the info in your app:
import Constants from "expo-constants";
console.log(Constants.manifest.extra.URL);
One library that I like to use that works for bare react native and expo is react-native-dotenv
Install it npm i react-native-dotenv
Add a .env file with your variables
MY_ENV_VARIABLE=SECRET_PASSWORD
Add the babel plugin to .babelrc file.
{
"plugins": [
["module:react-native-dotenv"]
]
}
Import and use it
import { MY_ENV_VARIABLE } from "react-native-dotenv";
function doSomething() {
console.log(MY_ENV_VARIABLE);
}
When trying to run the application with npm run serve (on iOS), I am getting the following error:
This relative module was not found:
./src/main.js in multi (webpack)-dev-server/client?http://10.0.0.5:8081/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
Please bear with me, I am new to this.
I have tried a bunch of random stuff like checking for misspelling issues, reinstalling webpack, updating node, and nothing. I have no clue of what this error is about so I am not sure where to look at.
The main.js file looks like this:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
import './registerServiceWorker'
import * as VueGoogleMaps from "vue2-google-maps"
import VeeValidate from 'vee-validate'
import BootstrapVue from 'bootstrap-vue'
Vue.use(VueGoogleMaps, {
load: {
key: "AIzaSyCGiy39IZbj8oxvO4HHqSVjP5RmLSHl7mY",
libraries: "places" // necessary for places input
}
});
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
router,
store,
beforeCreate() {
this.$store.commit('initialiseStore');
this.$store.dispatch('commons/initialize');
},
render: h => h(App)
}).$mount('#app')
I expect the live web server to display, but I am getting this compilation error and it is failing.
I faced a similar issue after and spent hours searching.
The issue occurred in my project when I tried to install vuetify using command vue add vuetify. Apparently, the in automatically changes the app entry property in webpack.config automatically.
You can either change the filename itself to main.js or change the webpack config through vue.config.js (by reading the vue cli documentation regararding webpack config).
You can check your webpack.config by using the command vue inspect.
],
entry: {
app: [
'./src/main.js'
]
}
}
I had a similar error, this worked for me but not sure you have the same issue. I found this in one of my webpack configuration files (usually named like webpack.dev.conf.js):
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client')
]
},
I removed resolve('node_modules/webpack-dev-server/client') and it fixed that issue.
This is an old thread, but I ran across this recently after installing a new module to a Vue project. The problem went away when I updated all my other modules, too.
I have created an project in vuejs using vue-cli3. It working fine on chrome browser but in IE-11 version blank screen is shown with the following error in console as mentioned in this link: https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk
On clicking console error that I have pointed in above screenshot, it opens a screen as display in given link https://drive.google.com/file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view?usp=drivesdk with the error in mini-toastr package:
Here is my babel.config.js file code:
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
and .browserslistrc file code :
> 1%
last 2 versions
not ie <= 8
I am not getting where I am doing a mistake. Is anything I am missing? If anyone need some more info please let me know. Thanks!
I finally ended up with the solution of above issue. To run project on IE-11 version just follow the 2 steps:
Install babel-polyfill using command "npm install --save babel-polyfill".
Import babel-polyfill in your main.js or index.js file at the top of above all imported packages. For e.g Here is your main.js file.
Note: If you import babel-polyfill at the end it does't work.
import 'babel-polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import router from './router'
// include script file
import './lib/DemoScript'
// include all css files
import './lib/DemoCss'
Vue.use(Vuetify)
new Vue({
store,
router,
render: h => h(App),
components: { App }
}).$mount('#app')
Another solution: use the power of vue-cli-3 to leverage browser support: https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
Just one option when building and you're done once you've chosen browserslist to support :-)
This should work well for building an app.
Trying to get the Dragabilly Vue plugin to work with my Nuxt app: https://www.npmjs.com/package/vue-draggabilly
I've used the usual approach that has worked with similar plugins but I don't have the depth of knowledge to crack this one. I am adding into my nuxt config file:
plugins: [ { src: '~/plugins/vue-draggabilly.js', ssr: false } ]
That file includes this code:
import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
However, I get the following error and I'm not able to use:
vue-draggabilly.js:3 Uncaught ReferenceError: exports is not defined
This refers to this line in the plugin:
exports.install = function (Vue, options) { ....
It is a usual vuew plugin package, but I'm not sure how to get it to work with nuxt. Any help very greatly appreciated!
I see a warning:
warning in ./plugins/vue-draggabilly.js
4:8-22 "export 'default' (imported as 'VueDraggabilly') was not found in 'vue-draggabilly'
I don't know the best answer, but this seems to work:
import Vue from 'vue'
import * as VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)