Dynamic imports fails in production

react
1

I have a React (no Blaze) app (1.7.0.3) that uses very basic Dynamic imports. It runs fine in Development (I can see the fetch happening in dev tools)
In production (and production with --debug) I’m failing.
I traced the failure into the Http call Dynamic Imports it makes and the unhelpful message is

Connection lost at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/packages/http.js?hash=d3dd208935f8ca87ff86948a5349
coming from
http://localhost/meteor/dynamic-import/fetch 0 ()

I don’t see any difference with the inputs to the fetchMissing function (missingTree) from dev environment to production other than the failure.

So I built ‘The simplest React app’ using ‘react-loadable’ hoping to understand my woes … and it fails in development mode the same way!!

I’m obviously doing something very wrong.

Could someone point to what I’m possibly doing wrong?

Here is my simple app

app.js

import React, { Component } from "react";
import {Testing} from "./app-loadable";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { showit: false };
  }

  render() {
    return (
      <React.Fragment>
        <h1 onClick={() => this.setState({ showit: !this.state.showit })}>
          Here is the App
        </h1>
        {this.state.showit && <Test />}
      </React.Fragment>
    );
  }
}

app-loadable.js

import React, { Component } from "react";
import Loadable from 'react-loadable';


const LoadableComponent = Loadable({
  loader: () => import('./testLoadable'),
  loading() {
    return <div>Loading...</div>
  }
});

export class Testing extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

//  testLoadable.js
import React from 'React'

export class Test extends React.Component {
  render() {
    return <div>The import is here</div>;
  }
}
1 Like
2

it looks like you forgot to set ROOT_URL evn.

3

import('./testLoadable') will use the default export from testLoadable, but you are not exporting a default from that file. export class Test should be export default class Test.

4

@jorgeer . thanks for the suggestion. I’ve tried changing all to named imports as well as ‘export default’. All give the same failure.

@minhna adding ROOT_URL=‘http://localhost’ prior to running meteor makes no difference.

Meteor is building a ‘dynamic’ import in web.browser/dynamic/client/testLoadable.js . why it wont load is still a mystery

5

what kind of production are you using?
I run my meteor app on development with command: meteor npm start
I tried to add --production to the command but see no different.
I built the app with meteor build command and deploy on a Ubuntu server without any problem.
My app uses react-loadable

6

The app that I’m having issues with (not the little test app I’ve posted here). In production runs on a DigitalOcean Ubuntu (18) server. Dynamic imports fail in production but actually work locally. They also fail locally if I run production locally.
My app requires a database so its run with a
export MONGO_URL and a PORT
To run production locally I do a
meteor build --directory …/testBuild
I also added here a --debug so I can see what is going on.
Meteor ‘build’ produces a README that explains how to build and run (with all the required export commands)

I’m getting EXACTLY the same results on my ‘real’ server as I do locally on my MAC. Failure in production

I’m at a lose on what to do… I’ll add back Blaze to this test project … though even if that fixes it … it won’t help me with my ‘real’ app.

It ‘feels’ like I’m missing something (like a package) … but what it would be??

7

@minhna are you using an ‘imports’ folder in your project?

8

Yes, I put all my code in imports folder.

9

Ah … that fixes one issue. I made a ‘components’ folder and put everything but main.js in it.
Fixed up the imports AND no error when the dynamic import is called!! I can see the fetch and it says its good.

Unfortunately, react-loadable still only displays the ‘loading’ component. But no errors is an improvement.

The real app is a port of a ‘CreateReactApp’ where ‘client’ has no special meaning … which it does in Meteor.
I thought what I did with the latest Meteor(where imports is not required) was correct … obviously something is not right

I’ll rebuild the test app in a bit using an imports folder and see if that cures what ails these apps

thanks a million for your help here!

1 Like
10

Just adding to this in case it helps someone. I have a Meteor app that I develop on locally. I have my hosts file mapping DNS for local.myapp.com -> localhost. My ROOT_URL was set to “http://local.myapp.com:3000”.
Everything was working great for me in normal development mode, until I tested with --production (locally).

For some reason --production broke the dynamic imports, and I was getting an error in the console:
https://local.myapp.com:3000/meteor/dynamic-import/fetch net::ERR_CONNECTION_CLOSED

The only way I was able to resolve it was to set my ROOT_URL to http://localhost:3000 instead of my custom local URL. Now it works fine in --production locally. The app was not having any issue when published to Galaxy either way.