fastify.setValidatorCompiler is not a function - javascript

I have fastify 2.14 installed. I am following the documentation to use custom validation library.
Here's my code:
import fastify from 'fastify';
const app = fastify({});
app.setValidatorCompiler(({schema}) => data => schema.validate(data)); // setValidatorCompiler is not a function
console.log(app.setValidatorCompiler) // undefined
export default app;
I also tried passing it in the route options and typescript doesn't recognize it as a field.
also setSerializerCompiler is not a function.

It seems like they have wrong documentation versioning.
I was reading version 2.14 documentation and it was for 3-alpha.
Installing the 3-alpha version solved my problem.

fastify.setValidatorCompiler(({ schema, method, url, httpPart }) => {
return ajv.compile(schema)
})
https://www.fastify.io/docs/v3.3.x/Validation-and-Serialization/#validator-compiler

Related

Cannot use newly installed plugins (node modules) in Nuxt pages/components

First off, I'm a beginner with NuxtJS and front-end development in general, so it might be that I'm missing something - though I do believe I went through all the options before posting here. Apologies in advance if that is not the case.
I've been having trouble using installed modules that I've registered as plugins. For example, take mapbox-sdk.
After installing it with npm install #mapbox/mapbox-sdk, which correctly creates #mapbox/mapbox-sdk in node_modules, I register it in nuxt.config.js:
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Of course, I also create the mapbox-sdk.js file in plugins/, containing:
import "#mapbox/mapbox-sdk";
Then, in a page (say, myMap.vue), when I try:
var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
which is the basic usage example in the documentation, I get:
mapboxSdk is not defined
in the console. This behavior extends to every single module I installed today, but is not the case for modules I had previously installed.
The reason why you're getting the error mapboxSdk is not defined is because there are a few issues with the way you've set up this plugin.
Docs here https://nuxtjs.org/docs/2.x/directory-structure/plugins/, they have some useful diagrams.
There are a couple of ways you can use this package.
Plugin
// ~/plugins/mapbox-sdk.js
import mapboxSdk from '#mapbox/mapbox-sdk'
export default (_ctx, inject) => {
// Exposing the mapboxSdk to your Nuxt app as $mapBox.
inject('mapBox', mapboxSdk)
}
Then in nuxt.config.js, same as you've already done.
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Then in your component myMap.vue
var mapboxClient = this.$mapBox({ accessToken: MY_ACCESS_TOKEN });
Directly in the component:
If you don't wish to use a plugin, the way that #kissu mentioned above https://stackoverflow.com/a/67421094/12205549 will also work.
Try adding this after the import to let Vue know that this method exists (in the same .vue file) at first
<script>
import mapboxSdk from '#mapbox/mapbox-sdk'
export default {
methods: {
mapboxSdk,
},
mounted() {
console.log('mapbox function >>', mapboxSdk)
},
}
</script>
Do you have it working in a .vue component at first ?

react-native-image-picker is undefined

I have installed the package react-native-image picker:
npm i react-native-image-picker --save
And I have also linked it to my project:
react-native link react-native-image-picker
And when I try to import the module and use it:
import ImagePicker from 'react-native-image-picker';
ImagePicker.launchImageLibrary(options, (response) => {
// code here
}
I receive this following error:
typeError: Cannot read property 'launchImageLibrary' of undefined
What went wrong here?
You should carefully check the newest documentation of this npm package as it was migrated to newer version. The old 2.x.x version is deprecated, as written in the GitHub page of the package, thus names of key modules might have changed...
Below is the solution for it,
import {launchImageLibrary} from 'react-native-image-picker';
const changePhoto = () => {
const options = {
noData: true,
};
launchImageLibrary(options, (response) => {
console.log(response);
});
};
<TouchableOpacity onPress={changePhoto}>
<Text>Change Photo</Text>
</TouchableOpacity>
At the place of
import ImagePicker from 'react-native-image-picker';
replace with
var ImagePicker = require('react-native-image-picker');
and run the application again.
For 3.x version, you can directly import the function like
import {launchImageLibrary} from 'react-native-image-picker';
In an Expo project, I still got the same error, like this issue (since lauchImageLibrary comes from NativeModules.ImagePickerManager). But it works fine in the project initialized with React Native CLI.
For version 3.x, let run npx pod-install then get the function by that way import { launchImageLibrary } from 'react-native-image-picker';

JEST throws .finally is not a function

Here is my react component:
import { sendAnalytics } from 'analytics';
class MyComponent extends React.Component {
myMethod() {
console.log('do something!');
}
render() {
return (
<Button
onClick={submitAnalytics({name: 'foo'}).finally(this.myMethod())}
dataset={{"data-id": "button"}}
> Send Analytics
</Button>
}
)
}
}
And my test is like so:
import * as analytics from 'analytics';
jest.mock('analytics');
describe('Analytics', () => {
it('Should call analytics when button is clicked', () => {
analytics.submitAnalytics.mockResolvedValue(Promise.resolve(true));
const tree = ReactTestRenderer.create(<MyComponent />);
// Actual implementation of following 3 lines is slightly different.
const button = tree.root.findByProps({"data-id": "button"});
button.props.onClick();
expect(analytics.submitAnalytics).toHaveBeenCalled();
});
});
I tried several different mocking strategies like:
analytics.submitAnalytics.mockImplementation(() => {
return Promise.resolve(true)
});
Nothing seems to work out. I keep getting the following error:
TypeError: (0 , analytics.submitAnalytics)(...).finally is not a function.
I don't know why. Any help appreciated.
Please let me know if you need any more contextual code.
Importing #babel/polyfill before the test also solve this problem
import '#babel/polyfill';
// Your tests...
Upgrading my node version from
v8.10.0
to
v10.19.0
Resolved this error.
Looking at the Browser Compatibility chart on MDN it looks like .finally() is not supported in Node until 10.0.0
import '#babel/polyfill'; worked for me, but is deprecated since babel 7.4.
Instead, import this works fine as well:
import "core-js/stable";
import "regenerator-runtime/runtime";
eventually, I just updated node version (from 8.10.2 to 12.16.1)
I figured it out folks! Here's what was to be done:
analytics.submitPayload = jest.fn().mockImplementation(() => {
return {
finally: () => {
return true;
}
};
});
I don't know if this is right or wrong, but it works. Please let me know if there's a better way to do it.
I faced same challenge.
Reason- Jest runs in Node enviroment,and "Finally" is supported from Node version- 10.0.0. But my Jenkins versions was 8.x so As a quick fix you can remove finally from code. Later we can upgrade local and remote server version.
Below is MDN link-
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

Expect libarary TypeError: expect(...).toInclude is not a function

I'm guessing it's an import error somehow, but I can't seem to figure out how, expect is up to date and I can't get it too run without it saying
libarary TypeError: expect(...).toInclude is not a function
var request = require("supertest");
var {app} = require("./../server.js");
var {Show} = require("./../models/show");
var expect = require('expect');
describe("GET /show/:id", () => {
it("Should include the show name 'Arrow' in the body", (done) => {
request(app)
.get(`/show/${showName}`)
.expect(200)
.expect((res) => {
expect('hello world').toInclude('world')
})
.end(done);
});
})
});
UPDATE:
besides .toMatchObject, you can also use .toHaveProperty
For anyone who used .toInclude to check if an object contains certain fields, the new version is .toMatchObject.
Here is the document reference
The expect library was recently made part of the Jest project - the Jest team changed the API a little, as this answer explains.
The full documentation for expect can now be found here: https://facebook.github.io/jest/docs/en/expect.html
If you are facing similar problem than it can be solved by importing jest-dom in your test file:
import '#testing-library/jest-dom' in your xyz.test.js
Don't forget to install jest-dom in order to use it with jest:
npm i --save-dev #testing-library/jest-dom
Hope it helps.. :)

Accessing params with react-router-redux

I'm using react-router-redux (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)
installed with
npm install --save react-router-redux#next
implemented like so:
<Route path='/resource/:id' component={Resource}/>
I'm trying to access the parameter for the id in the container, like so:
const mapStateToProps = (state, ownProps) => {
console.log(ownProps)
return {...state.resource, id: ownProps.params.id}
}
As shown in the react-router-redux docs.
I'm getting an error stating that ownProps.params is undefined however. So this works:
const mapStateToProps = (state, ownProps) => {
return {...state.resource, id: ownProps.match.params.id}
}
When I log ownProps, however, I find that ownProps.match.params.id contains the id I require.
Is this a change in implementation or have I implemented the route wrong? Thanks
I know that it's already closed question, but I think it would be helpful info for someone else
I'm using the same version and here is my solution for the task of getting params when you don't have access to match:
import { createMatchSelector } from 'react-router-redux';
const { params } = createMatchSelector({ path: '/resource/:id' })(state);
console.log(params.id);
I'm using it in a redux-saga, not in the component.
And for your situation, it would be better to use react-router props and get params from props.match.params.id
npm install --save react-router-redux#next
With above command, you probably have installed an alpha version of react-router-redux 5 and you are using it with react-router v4.
As they have mention in https://github.com/reactjs/react-router-redux readme, react-router-redux version 5 is currently being actively developed in somewhere else.
This repo is for react-router-redux 4.x, which is only compatible with
react-router 2.x and 3.x
The next version of react-router-redux will be 5.0.0 and will be
compatible with react-router 4.x. It is currently being actively
developed over there.
So the documentation you are referring isn't valid for the version you are using.
There is nothing wrong in your implementation and you can continue to access params via match of ownProps.

Categories

Resources