user1170304 user1170304 - 8 months ago 55
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?


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