Issue with Typescript React Native setup

[arunvickram]

Environment

Running this on macOS 10.14.5.

• npm: 6.9.0
• node: 12.6.0
• react-native: 0.60.4
• react-native-cli: 2.0.1

Description

Package is not building on yarn start haul, getting an error that looks like in the terminal:

Field 'browser' doesn't contain a valid alias configuration

Reproducible Demo

• Created new project using react-native init Project --template typescript
• Added haul using yarn add --dev @haul-bundler/cli
• Initialized haul using yarn haul init
• Ran haul using yarn haul start
• Ran simulator using react-native run-ios

[zamotany]

@arundilipan Can you copy & paste content of haul.config.js?

[isuhar]

@zamotany Similar problem with TypeScript

export default makeConfig({
bundles: {
index: {
entry: "./src/mobile/index",
transform({ bundleName, env, runtime, config }) {
runtime.logger.info(Altering Webpack config for bundle ${bundleName})

            const options = makeOptions(Object.assign({}, argv.env, argv, {mobile: true}, env, {prod: !env.dev}))

            if (env.dev) {
                spliceFilter(config.entry, entry => entry.indexOf("hot/patch.js") !== -1)
                spliceFilter(config.plugins, plugin => plugin instanceof HotModuleReplacementPlugin)
                config.resolve.alias = {}
            } else {
                spliceFilter(config.plugins, plugin => plugin instanceof SourceMapDevToolPlugin)
            }

            config = merge.strategy({
                "module.rules": "replace",
                "stats": "replace"
            })(
                config,
                resolver(options)
            )
        },
    },
},

})

[zamotany]

@isuhar
Try adding this to transform:

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

If that's the cause, I think I'll add it to a default config.

[arunvickram]

@arundilipan Can you copy & paste content of haul.config.js?

tried this:

import { withPolyfills, makeConfig } from "@haul-bundler/preset-0.60";

export default makeConfig({
  bundles: {
    index: {
      entry: withPolyfills('./index.js'),
    },
  },
});

then I basically did this

export default makeConfig({
  bundles: {
    index: {
      entry: withPolyfills('./index.js'),
      transform({ env, config }) {
        config.module.rules = [
          {
            test: /\.tsx?$/,
            loader: 'ts-loader'
          },
          ...config.module.rules,
        ];
         config.resolve.extensions = [
          '.ts',
          '.tsx',
          `.${env.platform}.ts`,
          '.native.ts',
          `.${env.platform}.tsx`,
          '.native.tsx',
          ...config.resolve.extensions,
        ]
      },
    },
  },
});

I've since started a new react-native project without haul. I was originally interested in Haul because of the possibility of hooking React Native up to Purescript through Webpack.

[isuhar]

This was a problem

config = merge.strategy({ "module.rules": "replace", "stats": "replace" })( config, resolver(options) )

Must be

Object.assign(config, merge.strategy({ "module.rules": "replace", "stats": "replace" })( config, resolver(options) ))

[zamotany]

@isuhar Ah, yes, in transform you can either mutate the config like config.plugins.push(...) or create a new instance of modified config and return it, so in you case it would be:

transform({ config }) {
  // ...
  config = merge.strategy({ "module.rules": "replace", "stats": "replace" })(
    config, resolver(options)
  );
  return config;
}