Haul: Unexpected keyword 'const'. Const declarations are not supported in strict mode

[naiyt]

Current Behavior

When running a new app using haul with Typescript I get Unexpected keyword 'const'. Const declarations are not supported in strict mode.. This appears to have happened previously in https://github.com/callstack/haul/issues/159, but according to that ticket it was solved several versions ago by excluding pretty-format in 58c17ff. I'm on the latest version of haul and am seeing it happen.

Expected Behavior

The error doesn't occur.

Haul Configuration (webpack.haul.js)

I followed the Typescript setup instructions:

webpack.haul.js:

module.exports = ({ platform }, { module, resolve }) => ({
  entry: `./index.js`,
  module: {
    ...module,
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'ts-loader'
          },
        ],
      },
      ...module.rules
    ]
  },
  resolve: {
    ...resolve,
    extensions: [
      '.ts',
      '.tsx',
      `.${platform}.ts`,
      '.native.ts',
      `.${platform}.tsx`,
      '.native.tsx',
      ...resolve.extensions],
  },
});

tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "lib": ["es2015"],
    "module": "es6",
    "moduleResolution": "node",
    "jsx": "react",
    "target": "es2015",
    "allowSyntheticDefaultImports": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false
}

.babelrc:

{
  "presets": ["react-native"]
}

Your Environment

| software | version
| ---------------- | -------
| Haul | 1.0.0-beta.13
| react-native | 0.55.1
| node | both 9.11.1 and 8.11.1
| yarn | 1.3.2

Thanks for any help!

[deepsweet]

Happens to me as well since RN 0.54, and I found the problematic file: node_modules/metro/src/lib/bundle-modules/MetroClient.js, so now we have an additional lib to traspile explicitly.

Added metro to node_modules/haul/src/utils/makeReactNativeConfig.js and it works:

test: /\.js$/,
exclude: /node_modules\/(?!react|@expo|pretty-format|haul|metro)/,

[naiyt]

Thanks, I can confirm that fixes it for me!

I'll admit my webpack knowledge is lacking so I don't fully understand what's going on there. If node_modules is already being excluded from the loader why do we have to explicitly add metro?

[satya164]

@naiyt it's for including metro :)

[thymikee]

@naiyt, this is not specific to Webpack, but to how regular expressions work in general.
Webpack's exclude for loaders is a regex whitelist of files to exclude from applying the loader. In regex land, whitelisting is usually done with negative lookahead: (?!...). So, this rule tells:

use this loader (babel-loader/ts-loader), excluding all files in node_modules, except for: react, pretty-format, haul, etc.

[satya164]

do you know if we can use include for this purpose instead of the confusing regex?

[naiyt]

Oh I get it now, thanks! Since that source has const, we need to exclude it from the exclude so that babel will transpile it. :)

[thymikee]

@satya164 dunno, but probably not :<

[timwangdev]

hi @satya164, can you make a release for this?

[mortdatherobot]

I am still facing this error when running android release?

[mortdatherobot]

For anyone has const keyword issue this is my config file and it works
webpack.haul.js

var path = require('path'); module.exports = ({ platform }, defaults) => ({ entry:./index.js`,
module: {
...defaults.module,
rules: [
...defaults.module.rules,
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
include: [ path.resolve(__dirname, './node_modules/strict-uri-encode'), path.resolve(__dirname, './node_modules/decode-uri-component'),],
loader: 'babel',
},
{
test: /.js$/,
loader: 'babel-loader',
},
],
},

});`