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.
Related
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 ?
Following is the entry point to my library, it generates a component with a dynamic tag:
// muvement.js
import { defineComponent, ref, onMounted, h } from 'vue';
const createMuvement = (tag) => {
return defineComponent({
name: `m-${tag}`,
setup(props, context) {
const root = ref(null);
onMounted(() => {
console.log(root.value);
});
return () => h(tag, { ...context.attrs, ref: root }, context.slots);
}
});
};
const muvement = (...tags) => {
const components = {};
tags.map((tag) => (components[`m-${tag}`] = createMuvement(tag)));
return components;
};
export { muvement };
It's expected to be consumed like so:
// Home.vue
<template>
<div>
<m-div>div</m-div>
<m-button>button</m-button>
</div>
</template>
<script>
import { muvement } from "muvement";
export default {
name: "Home",
components: {
...muvement("div", "button")
}
};
</script>
This works as expected when the library code is contained within the Vue app folder (assuming we are now importing from "#/components/muvement.js" instead of "movement").
That is:
-muvement-test-project (scaffolded with vue-cli)
- src
- views
- Home.vue
- components
- muvement.js
I've also published an alpha release that works fine when importing "muvement" after installing it directly from the npm registry (that is, npm install muvement instead of npm link muvement).
The Problem
During development, I want an app to test the library with that is separate from the library's directory.
I've used npm link to link the library to the test app (as I have done with many other projects in the past).
From /path/to/library
$ npm link
From /path/to/test/app
$ npm link muvement
So far so good. The module is available as a symlink in the test app's node_modules folder. So I import { muvement } from "muvement", run npm run serve, and... BOOM.
Everything explodes (see errors below). It's also probably worth noting that trying to import from the full path (i.e. C:/dev/npm/muvment/dist/es/index.js) results in the same issues as npm link does, so I don't think it has anything to do with the symlink directly.
This is what appears in the console:
For pretty much the entire day I have been trying to solve this one issue. I've seen several seemingly similar questions that were solved by settings Webpack's resolve.symlinks to false but that has no effect on my problem. I've read all through the docs and even Vue's source code (here is the offending line for those who are curious).
Since the warning suggests that the error is commonly attributed to async setup I thought maybe webpack was doing something weird that would make my code async. This doesn't seem to be the case as the call stack of both the working attempt and failed attempt are identical.
What's not identical is the scope.
Here is the scope for the example that is working:
And here is the failing one:
(Notice that the target parameter is null during the call to injectHook, which is obviously what prompts Vue to show a warning).
My question is, why does the location of the imported module make such a difference during the execution of the said module?
The library code and build setup are available here:
https://github.com/justintaddei/muvement
The test app is available here:
https://github.com/justintaddei/muvement/tree/example
If I've left out something important, please let me know in the comments. It's been a long day so I'm sure I've probably missed something.
Thank you.
The problem is your app is using two different vue dependencies under the hood - vue requires the same dependency to be used to keep track on reactivity, lifecycle, etc.
When you link a library npm/yarn will use that linked folder node_modules, but your app is using it's dependencies from it's node_modules.
When your app imports vue it will go app/node_modules/vue but when you import from your linked dependency it will be going to linked_dep/node_modules/vue.
app
node_modules
vue
linked library
node_modules
vue
One easy way to debug this issue is to change both vue dependency files with a console.log and check if the console is logging both.
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';
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
I want to use https://github.com/gdsestimating/dxf-parser in my project. When i import in like:
import { DxfParser } from 'dxf-parser';
and than call:
new DxfParser()
i get an error:
TypeError: dxf_parser__WEBPACK_IMPORTED_MODULE_3__ is not a
constructor
What would be the correct way to use the DxfParser in angular? I want to do the same in angular as the jaascript example on projects site:
var parser = new DxfParser();
try {
var dxf = parser.parseSync(fileText);
}catch(err) {
return console.error(err.stack);
}
thanks a lot!
Like the readme of the github states, did you install DxfParser?
npm install dxf-parser
You might also need to install the types for typescript like so:
npm install #types/dxf-parser
Since installing does not seem to be the problem I tried it myself. Doing the import like you did does not work. I looked into the code and it seems that DxfParser is a default export. So if you do:
import DxfParser from "dxf-parser";
It should be working.
More information on exports can be found here