Starting form 2.0.1, react-meteor-data doesn't work with ardatan:webpack package.

[Fanaticys]

The reason of issue is new feature { lazy: true } in 2.0.1 version in package.js file of react-meteor-data package. Also I had created issue in ardatan:webpack atmosphere package (ardatan/meteor-webpack#90) several months ago.

[filipenevola]

Hi @Fanaticys as you said in the other issue, lazy loading is a good practice, the change would need to go on meteor-webpack I believe.

Do you agree? If so we should focus there in this discussion and how to fix the issue.

[Fanaticys]

Hi @filipenevola I would say, both of packages should fix different issues.
In react-meteor-data it is breaking changes issue. Because 2.0.0 is working, but 2.0.1 isn't.
In meteor-webpack it is not supporting lazy loading issue.

It would be great to have { lazy: true } configurable and passed from consumers if it is possible.

[CaptainN]

@Fanaticys The problem is that's not really configurable on the consumer side. And if it's not there in react-meteor-data it'll cause the entire react package (and others) to be eagerly loaded, which might not be desired for some set ups.

It can be forced in projects compiled with webpack though. Just put import 'meteor/react-meteor-data' in your main entry point.

[Fanaticys]

@CaptainN Ok. If we can't configure { lazy: true } on the consumer side then it is only ardatan:webpack issue. But import 'meteor/react-meteor-data'; doesn't help.

[filipenevola]

Hi @Fanaticys, is this issue still affecting you or meteor-webpack is supporting this case now?

If so you still need changes here, please respond here and then we can finally proceed with it.

[ZubMono]

Hello @CaptainN and @filipenevola , could you solve this issue? I have been trying to make it work for hours. Downgraded to the version 2.0.0 of react-meteor-data and useTracker is defined now, but I get this error, no matter if I use useTracker or withTracker.

Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Checked all the reasons but in reality, I can use state Hooks without problem. SO I think it has to do with something else.

[CaptainN]

@ZubMono This is almost certainly not a problem with react-meteor-data but more likely some other problem with the webpack package or configuration. The current version of react-meteor-data has no issue that would lead to useTracker being undefined. Does this work if you use the normal Meteor build system?

[ZubMono]

Hello @CaptainN,
I persist with the problem. I wanted to migrate react-router v5 to v6.
When I tried to dynamic import with Loadable, Meteor didnt let me use strings and loop the loadables, the only solution was to use Webpack, when all my problems started.

I have problems with other packages too:

• Cant use aldeed:schema-index, like in this thread Cannot use aldeed:schema-index, getting error "index" is not a supported property ardatan/meteor-webpack#41
• Meteor.publish with null (global) on startup is not working.

Tried to compile using Meteor but couldn't make my app run.

I think the problem has to do with Meteor packages compiling before Webpack, and startup running before webpack compiles. Im not an expernt in this subject.

This is my config file:

const clientConfig = {
  entry: [
    './client/main.js',
  ],
  target: 'web', 
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  },
  module: {
    rules: [{
      test: /\.ts(x?)$/, // Typescript
      exclude: /node_modules/,
      loader: 'ts-loader',
    }, {
      test: /\.js(x?)$/, // Javascript
      exclude: /node_modules/,
      use: {
        loader: require.resolve('babel-loader'),
        options: babelConfig,
      },
    }, { 
      test: /\.js.map$/,
      enforce: 'pre',
      use: ['source-map-loader'],
    }, {
      test: /\.css$/, //  .css,
      use: [
        'style-loader',
        'css-loader',
      ],
    },
    {
      test: /\.(scss|sass)$/, // .scss, .sass
      use: [
        'style-loader',
        'css-loader',
        'sass-loader', 
      ],
    },
    { 
      test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
          },
        },
      ],
    }, { 
      test: /\.(jpe?g|gif|png|svg)$/, 
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
          },
        },
      ],
    },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './client/main.html',
    }),
    isDevelopment && new webpack.HotModuleReplacementPlugin(),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ].filter(Boolean),
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: ${__dirname}/dist,
    publicPath: '/',
    filename: 'bundle.js',
  },
  externals: [
    meteorExternals(),
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
    hmr: true,
  },
  stats: {
    errorDetails: false, 
  },
};

// Server configurations
const serverConfig = {
  entry: [
    './server/main.js',
  ],
  target: 'node',
  devServer: {
    hot: true,
  },
  externals: [
    meteorExternals(), 
    nodeExternals(),
  ],
  plugins: [
    new LoadablePlugin(),
  ],
};

My packages.json

"dependencies": {
    "@babel/runtime": "^7.14.0",
    "@fontsource/roboto": "^4.2.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/pro-regular-svg-icons": "^5.13.0",
    "@fortawesome/pro-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "0.1.14",
    "@loadable/component": "^5.14.1",
    "@loadable/server": "^5.14.2",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@sendgrid/mail": "^7.4.2",
    "@tinymce/tinymce-react": "^3.12.3",
    "aws-sdk": "^2.897.0",
    "bcrypt": "^5.0.1",
    "bootstrap": "^4.6.0",
    "clsx": "^1.1.0",
    "disqus-react": "^1.0.11",
    "fb": "^2.0.0",
    "fibers": "^5.0.0",
    "google-map-react": "^2.1.9",
    "history": "^5.0.0",
    "jimp": "^0.16.1",
    "jquery": "^3.5.1",
    "jquery-migrate": "^3.3.0",
    "jquery-validation": "^1.19.2",
    "jump.js": "^1.0.2",
    "lodash": "^4.17.21",
    "match-sorter": "^6.3.0",
    "mercadolibre": "0.0.13",
    "meteor-node-stubs": "^1.0.3",
    "mime": "^2.4.6",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "node-fetch": "^2.6.1",
    "node-s3-public-url": "^1.0.3",
    "notistack": "^1.0.7",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "payment": "^2.4.3",
    "popper.js": "^1.16.1",
    "prerender-node": "^3.2.5",
    "prop-types": "^15.7.2",
    "rc-drawer": "^4.3.1",
    "react": "^17.0.2",
    "react-autobind": "^1.0.6",
    "react-bootstrap": "^1.0.1",
    "react-country-region-selector": "^3.0.2",
    "react-day-picker": "^7.4.8",
    "react-dom": "^17.0.2",
    "react-dropzone": "^3.6.0",
    "react-facebook-pixel": "^1.0.4",
    "react-ga": "^3.3.0",
    "react-google-recaptcha": "^2.1.0",
    "react-gtm-module": "^2.0.8",
    "react-helmet": "^6.1.0",
    "react-hot-loader": "^4.13.0",
    "react-image-gallery": "^1.0.9",
    "react-komposer": "^1.13.1",
    "react-parallax": "^3.3.0",
    "react-redux": "^7.2.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^6.0.0-beta.0",
    "react-scrollable-anchor": "^0.6.1",
    "react-select": "^4.3.0",
    "react-share": "^4.4.0",
    "react-slick": "^0.28.1",
    "react-sortablejs": "^1.5.1",
    "react-table": "^6.10.3",
    "react-table-hoc-fixed-columns": "^2.3.1",
    "react-transition-group": "^4.4.1",
    "react-vis": "^1.11.7",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "s3": "^4.4.0",
    "save-dev": "0.0.1-security",
    "simpl-schema": "1.12.0",
    "slick-carousel": "^1.8.1",
    "sortablejs": "^1.10.1",
    "speakingurl": "^14.0.1",
    "sweetalert2": "^10.16.7",
    "sweetalert2-react-content": "^3.0.1",
    "swiper": "^6.5.9"
  }, "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/eslint-parser": "^7.13.14",
    "@babel/plugin-transform-runtime": "^7.13.15",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-react": "^7.13.13",
    "@babel/register": "^7.13.16",
    "@loadable/babel-plugin": "^5.13.2",
    "@loadable/webpack-plugin": "^5.14.2",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.4",
    "eslint": "^7.25.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-meteor": "^7.3.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.2",
    "path": "^0.12.7",
    "react-refresh": "^0.10.0",
    "sass": "^1.32.12",
    "sass-loader": "^7.3.1",
    "source-map-loader": "^2.0.1",
    "style-loader": "^2.0.0",
    "ts-loader": "^9.1.2",
    "url-loader": "^4.1.1",
    "webpack": "^4.46.0",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-middleware": "^3.7.3",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-hot-server-middleware": "^0.6.1",
    "webpack-meteor-externals": "0.0.5",
    "webpack-node-externals": "^3.0.0"
  }

and babel.config

module.exports = {
  presets: [
    '@babel/preset-env', 
    ['@babel/preset-react', { 
      runtime: 'automatic', 
    }],
  ],
  plugins: [
    '@loadable/babel-plugin', 
    '@babel/plugin-transform-runtime', 
    isDevelopment && require.resolve('react-refresh/babel'),
  ].filter(Boolean),
};

Any help is really appreciated!
Best regards,

[Fanaticys]

@ZubMono
Hi. You will have issues with any package which has lazy loading feature in combination with ardatan:webpack package. ardatan:webpack can't handle lazy loading.

[ZubMono]

Thank for your answer @Fanaticys
Do you recommend any other package to use Webpack +Meteor?
Because I'm also experiencing problems with startup files,

Trid the React example in the package but is not wokirng, made a repo for it: Here

best regards,

[Fanaticys]

@ZubMono I do not know any other packages. I my case I decided to get rid of ardatan:webpack in project.

[ZubMono]

Thanks @Fanaticys, I had to take the same decistion, right now I'm using meteor compiler and not webpack. Do you recommend any package to use with webpack?