user1170304 user1170304 - 25 days ago 6
React JSX Question

Dynamic Imports for JavaScript React Meteor

I've got a lot of code that looks like the following:

import {Meteor} from 'meteor/meteor'; import {createContainer} from 'meteor/react-meteor-data';

import FoodItemList from '../components/FoodItemList.jsx';

import {FoodItems} from '../../api/FoodItems/FoodItems.js';

const FoodItemListContainer = createContainer(({imageIDFilter}) => {
const user = Meteor.user()
? Meteor.user().username
: '';
const query = {
username: {
$not: {
$eq: user
}
}
};
const foodItems = Meteor.subscribe('foodItems');
const foodItemList = FoodItems.find(query).fetch()
const loading = !foodItems.ready();

return {loading, foodItemList, imageIDFilter, user};

}, FoodItemList);

export default FoodItemListContainer


Obviously when I refactor I want to remove some of this boiler plate but I'm not sure how I can do this because I don't see how I can dynamically import the files I need. Is this possible in JS React Meteor?

Answer

It is possible to do dynamic imports with Meteor as mentioned here using require, but noticed that it is not recommended to do so because it may cause bugs in your app.

I have done this kind of import a few times and my code still work fine. But I do not recommend you to do it, only if you really need it, it may worth trying