Haul: 1.0.0-rc.7 dev server returns 404 with `platform=ios` param

[chaseholland]

Current Behavior

When using Haul 1.0.0-rc.7 dev server with the iOS simulator, the bundle request returns a 404.

Expected Behavior

The bundle should load as it did in previous rcs (this worked in rc.6). Specifically, here are the list of commits leading up to the failure:

d795af385dfb5e3e8a2ef5ceb405aff8ab15933a -- working
6476292131bd440b30e65332a3d9ed008c80c51d -- working
2e3dcc1d27a9b456bb37923620d4c898bc8b38d1 -- not working

Haul Configuration (webpack.haul.js)

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const SourceMapPlugin = require('source-map-loader');
const TSPlugin = require('ts-loader');
const BabelPlugin = require('babel-loader');

import { createWebpackConfig } from 'haul';

export default {
    webpack: env => {
        const config = createWebpackConfig((options) => ({
            entry: [path.resolve(__dirname, `./src/index.tsx`)],
        }))(env);

        config.output.path = path.join(__dirname, "dist");
        config.output.filename = `main.${env.platform}.bundle`;

        config.module = Object.assign(
            {},
            config.module,
            {
                rules: config.module.rules.concat([
                    {
                        test: /\.resx.js$/,
                        enforce: 'pre',
                        use: {
                            loader: '<MyLoader>',
                        }
                    },
                    {
                        test: /\.resx$/,
                        enforce: 'pre',
                        use: {
                            loader: '<MyLoader>',
                        },
                        exclude: [
                            /node_modules/
                        ]
                    },
                    {
                        test: /\.(ts|tsx)?$/,
                        include: [
                            path.resolve(__dirname, 'src')
                        ],
                        exclude: [
                            /node_modules/
                        ],
                        use: [
                            {
                                loader: 'source-map-loader'
                            },
                            {
                                loader: 'babel-loader'
                            },
                            {
                                loader: 'ts-loader',
                                options: {
                                    transpileOnly: true,
                                    experimentalWatchApi: true,
                                }
                            }
                        ],
                    }
                ])
            }
        );

        config.resolveLoader = {
            modules: [
                path.resolve(__dirname, "../build/tasks/loaders"),
                path.resolve(__dirname, './node_modules'),
            ]
        };

        config.resolve.extensions = [
            '.tsx',
            '.ts',
            '.${platform}.ts',
            '.${platform}.tsx',
            '.native.tsx',
            ...config.resolve.extensions
        ];

        return config;
    }
}

Your Environment

When removing the platform=ios param, the bundle request returns a 200, as expected, eg localhost:8081/dist/main.ios.bundle?dev=true&minify=false works whereas localhost:8081/dist/main.ios.bundle?dev=true&minify=false&platform=ios does not work.

| software | version
| ---------------- | -------
| Haul | 1.0.0-rc.7
| react-native | 0.55.4
| node | 8.9.4
| npm or yarn | pnpm 2.9.0

[zamotany]

I suppose there's something wrong here: https://github.com/callstack/haul/blob/2e3dcc1d27a9b456bb37923620d4c898bc8b38d1/src/server/util/getRequestBundleData.js
If anyone is interested in contributing, please feel free to do so and don't hesitate to ask questions or chat at our Callstack discord server 😉

[greg-dove]

The issue appears to be the logic related to 'platform' when the request.path is a 'legacy' type.
In my case it was index.ios.bundle. So the scenario when the platform is in the request.query and also in the original request.path

The concatenated string determined for the filename at:
https://github.com/callstack/haul/blob/2e3dcc1d27a9b456bb37923620d4c898bc8b38d1/src/server/util/getRequestBundleData.js#L64

in this case results in something with the platform name twice.
e.g. index.ios.ios.bundle

I did not spend too long on this, and the following is not a 'robust'/correct fix, but it at least shows a hackfix (not suggested as a final solution) for the issue I think:

let basename = request.path.substring(1, match.index);
if (basename.indexOf('.' + platform) !== -1) basename = basename.split('.' + platform).join('');
const filename = `${basename}.${platform}.bundle`;

[greg-dove]

As an additional note: as a workaround for using rc7, I think the simplest option I can find to make this work is to change
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
to
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
inside AppDelegate.m

(Note the removal of '.ios' here). However I assume that this should not be needed? (because it worked fine as it was previously)

And it seems that android is affected by exactly the same problem.
To address this for rc.7 I made the following change inside the MainApplication.java
(inside the local mReactNativeHost implementation)
//change from default "index.android" to support haul rc.7+
@Override
protected String getJSMainModuleName() {
return "index";
}

[thymikee]

@acoates-ms this should be fixed with https://github.com/callstack/haul/pull/477 right?

[acoates-ms]

Yes this should be fixed in rc8.