I used Vue 2.6.14 in my electron app, calling it from main JavaScript script like this:
import Wookmark from 'wookmark/wookmark';
import Vue from 'vue'; // <-- HERE
import {Language} from './model/language';
import Header from '../vue/header.vue';
import VueContextMenu from "vue-context-menu";
import bsn from "bootstrap.native";
Before electron 19.1.5 it worked well, but after electron 20.0.0, this code does not worked.
The code stopped around import Vue from 'vue'; with error Uncaught (in promise) Error: module not found: ./maplist (NOTE: maplist is the name of this script).
What is this breaking change between electron 19 and 20?
How can I avoid it?
Conditions:
electron: 19.1.5 and 20.0.0
Vue: 2.6.14
electron-builder: 23.6.0
vue-loader: 15.9.8
vue-template-compiler: 2.6.14
vue-context-menu: 2.0.6
I don't use any "vue-electron"-ish solutions.
======
Additional info:
With checking this page, I found workaround that adding sandbox: false setting in my main.js
mainWindow = new BrowserWindow({
width: appWidth,
height: appHeight,
webPreferences: {
preload: path.join(__dirname, '../../frontend/api/preload.js'), // eslint-disable-line no-undef
sandbox: false // <- This
}
});
But the defult value of sandbox is true, I believe it is by security reason, so I want to know how to call vue with default sandbox setting, to keep security.
Start to test view for React Native 0.68.2/jest 29/react-test-renderer 17.0.2 app. The test case is simple:
import renderer from 'react-test-renderer'; //<<==import causes open handler and jest can't exit
import Home from './Home'; //<<== test Home page view
it ('describe Home page view', () => {
const home = renderer.create(<Home />).toJSON();
expect(home).toMatchSnapshot();
})
Here is the output of yarn jest --detectOpenHandles:
Jest has detected the following 1 open handle potentially keeping Jest from exiting:
● MESSAGEPORT
> 1 | import renderer from 'react-test-renderer';
| ^
2 | import Home from './Home';
3 |
4 | it ('describe Home page view', () => {
at node_modules/scheduler/cjs/scheduler.development.js:178:17
at Object.<anonymous> (node_modules/scheduler/cjs/scheduler.development.js:13:3)
at Object.require (node_modules/scheduler/index.js:6:20)
at require (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:19:19)
at Object.<anonymous> (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13:3)
at Object.require (node_modules/react-test-renderer/index.js:6:20)
at Object.<anonymous> (src/components/home/Home.test.js:1:1)
at asyncGeneratorStep (node_modules/#babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (node_modules/#babel/runtime/helpers/asyncToGenerator.js:25:9)
The jest can exit by itself and has to be terminated forcefully. What caused the error here?
I am setting up the plugin file of vuetify based on this reference:
https://vuetifyjs.com/en/getting-started/quick-start
import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
export default new Vuetify({ ... });
Getting this error:
Failed to compile.
./src/plugins/vuetify.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/codes/hkiod-mpm/client/src/plugins/vuetify.js: Unexpected token (6:33)
4 | Vue.use(Vuetify);
5 |
> 6 | export default new Vuetify({ ... });
| ^
7 |
I am not sure what this ... means? Is this a new javascript syntax? How can I get this fix? Thanks.
After updating my RN version, the test files are no longer passing. The following is one test that is failing and the corresponding error:
import React from 'react'
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer'
import RelatedCallsListItem from
'../app/components/Phoning/relatedCallsListItem'
import {shallow} from 'enzyme'
const openItem = {
dueDate: '07/03/18',
subType: 'Follow-up',
subject: 'Test subject',
comment: 'Test comment',
dueTime: '',
date: '',
result: '',
isOpen: 'yes'
}
const completedItem = {
dueDate: '07/03/18',
subType: 'Follow-up',
subject: 'Test subject',
comment: 'Test comment',
dueTime: '',
date: '',
result: 'AppointmentMade',
isOpen: 'no'
}
it('renders properly', () => {
const item = openItem
expect(renderer.create(
<RelatedCallsListItem item={item}/>
)).toMatchSnapshot()
})
it('notices the call is still open and there is a subType', () => {
const item = openItem
const test = shallow(
<RelatedCallsListItem item={item}/>
)
console.log('test: ', test.debug())
expect(test.find('Text[testID="subType"]').prop('children')).toEqual('FOLLOW-UP')
})
it('notices the call is completed and there is a result', () => {
const item = completedItem
const test = shallow(
<RelatedCallsListItem item={item}/>
)
console.log('test: ', test.debug())
expect(test.find('Text[testID="result"]').prop('children')).toEqual('APPT MADE')
})
And this is the error I get when I try to run it:
● Test suite failed to run
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.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
SyntaxError: /Users/fri0729/Desktop/PostingPlus/posting-plus/PostingPlus/node_modules/react-native/Libraries/StyleSheet/StyleSheet.js: Unexpected token (18:12)
16 | const flatten = require('flattenStyle');
17 |
> 18 | import type {
| ^
19 | ____Styles_Internal,
20 | ____DangerouslyImpreciseStyle_Internal,
21 | ____DangerouslyImpreciseStyleProp_Internal,
at Parser.raise (node_modules/#babel/core/node_modules/babylon/lib/index.js:776:15)
at Parser.unexpected (node_modules/#babel/core/node_modules/babylon/lib/index.js:2079:16)
at Parser.expectContextual (node_modules/#babel/core/node_modules/babylon/lib/index.js:2047:41)
at Parser.parseImport (node_modules/#babel/core/node_modules/babylon/lib/index.js:5205:12)
at Parser.parseStatementContent (node_modules/#babel/core/node_modules/babylon/lib/index.js:4043:27)
at Parser.parseStatement (node_modules/#babel/core/node_modules/babylon/lib/index.js:3962:17)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/core/node_modules/babylon/lib/index.js:4513:23)
at Parser.parseBlockBody (node_modules/#babel/core/node_modules/babylon/lib/index.js:4500:10)
at Parser.parseTopLevel (node_modules/#babel/core/node_modules/babylon/lib/index.js:3938:10)
at Parser.parse (node_modules/#babel/core/node_modules/babylon/lib/index.js:5304:17)
I have seen some solutions with adding ignore patterns to my package.json file, but I have not been successful with those fixes. The tests ran fine until I updated the RN version and corresponding jest and babel packages.
For those struggling with this issue, this link provides a partial fix:
React Native - Jest: Broken since update to 0.56. How to fix it?
From there, you may have to update certain tests since updating Babel tends to change syntax in their updates.
I'm using the react-native source from git for project dependency,
I put the RN source in an external directory(instead of node_modules) and add it to the extraNodeModules in rn-cli.js, so the RN packager could find all the source correctly.
but when running jest, it couldn't find any RN builtin components.
test file:
import { View } from 'react-native';
import React from 'react';
import mockCamera from '../__mocks__/camera';
import renderer from 'react-test-renderer';
jest.mock('react-native-camera', () => mockCamera);
var TableIDInputer = props => <View />;
test('renders correctly', () => {
const component = renderer.create(<TableIDInputer />);
let tree = component.toJSON();
expect(tree.type).not.toBe('b');
expect(tree).toMatchSnapshot();
});
test result:
● renders correctly
Cannot find module 'View' from 'react-native-implementation.js'
146 | },
147 | get View() {
> 148 | return require('View');
149 | },
150 | get ViewPagerAndroid() {
151 | return require('ViewPagerAndroid');
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:169:17)
at Object.get View [as View] (../../libs/react-native/Libraries/react-native/react-native-implementation.js:148:12)
at TableIDInputer (__tests__/test-component.js:7:31)
at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4137:15)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4541:16)
because the View component is provided by a haste module, which was implemented by #providesModule before, but today it seems it's replaced by a new mechanism, so I'm doubting is it causing the test fail??
env info:
jest: ^22.4.3
react-native: 2018-5-31 6e359c4589b0627de59332ce56fe28804425a609