FilePlayer not loaded

[kingstar1227]

Be sure to search for your issue before opening a new one.

Current Behavior

react-dom.development.js:11865 Uncaught TypeError: Failed to fetch dynamically imported module: tmp/static/scripts/FilePlayer

I bundled the app with gulp and it doesn't load FilePlayer from node_module. It's trying to load the FilePlayer from the dist directory.

Expected Behavior

Steps to Reproduce

Environment

• URL attempting to play:
• Browser:
• Operating system:
• jsFiddle example: https://jsfiddle.net/sv5x3ug1

Other Information

[cookpete]

As of 2.1.0, you may need to use react-player/dist/ReactPlayer.js in systems that do not support code splitting/dynamic imports, although that file will set a window.ReactPlayer global rather than a normal module export, so you may need to adjust your config a bit.

[kingstar1227]

I use this npm module in the React.js application. Does it mean that I'm not able to import ReactPlayer in the react component?

[kingstar1227]

Please let me know how to support code-splitting/dynamic imports on react and gulp.

[cookpete]

@kingstar1227 does the problem occur in 2.0.1? I may need to rethink how I am implementing lazy loading players.

[kingstar1227]

@cookpete it works well in 2.0.1. I think the main reason is that you load the FilePlayer component from this route './FilePlayer'. After the project is bundled, it doesn't import FileMaker from node_module, it is trying to import FilePlayer from dist directory.

[cookpete]

Yeah, the library that is bundling the project should see import() statements and know to pull in those files as separate chunks alongside the main bundle. Obviously gulp doesn't support this yet but things like webpack do.

How exactly is gulp bundling your files? Can you share any config?

[kingstar1227]

@cookpete This is my gulp config.

gulp.task('scripts', () => {
    return gulp.src('app/static/scripts/**/*.js?(x)')
        // .pipe($.cached('scripts'))
        .pipe($.plumber())
        .pipe($.sourcemaps.init())
        .pipe($.babel({presets: ["@babel/preset-env", "@babel/preset-react"]}))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('.tmp/static/scripts'));
});

gulp.task('es6', gulp.series('typescripts', () => {
    return browserify([
            "./.tmp/static/scripts/app.js"],
        {
            debug: true,
        })
        .transform(babelify)
        .bundle()
        //
        .pipe(source('app-bundle.js'))
        .pipe(gulp.dest('./.tmp/static/scripts'))
        .pipe(reload({stream: true}));
}));

gulp.task('serve', gulp.series('styles', 'scripts', 'es6', 'fonts', () => {
    // sets up browser sync
    // will proxy locally to 8080 (default backend port)
    browserSync({
        notify: false,
        https: true,
        ghostMode: false,
        logLevel: "debug",
        proxy: {
            target: 'localhost:8080',
            ws: true,
        },
        port: 8081,
        host: 'local.agingchoices.com',
        open: 'external',
        cors: true,
        serveStatic: [{
            route: '/bower_components',
            dir: './bower_components',
            proxyRes: [
                function (proxyRes, req, res) {
                    // console.log(proxyRes.headers);
                    // console.log(proxyRes);

                    // if proxy returns a redirect
                    if (proxyRes.statusCode === 302) {

                        // check if location is set
                        if (typeof proxyRes.headers.location !== 'undefined') {

                            // this will rewrite a location redirect to https as the proxy
                            // connection is over http and so browser sync will redirect to http
                            proxyRes.headers.location = proxyRes.headers.location.replace(
                                'http://', 'https://');
                        }

                    }

                }
            ]
        },
            {
                route: '/node_modules',
                dir: './node_modules'
            },
            {
                route: '/.tmp',
                dir: ['./.tmp/']
            },
            {
                route: '/static',
                dir: ['./app/static']
            },
        ]
    });
}

[cookpete]

@kingstar1227 I'm hoping this works ok when using 2.2.0?