After haul upgrade can't compile with TypeError: compilation.getAsset is not a function

[TNorth22]

Environment

    "@haul-bundler/babel-preset-react-native": "^0.13.2",
    "@haul-bundler/cli": "^0.13.1",
    "@haul-bundler/inspector": "^0.13.0",
    "@haul-bundler/preset-0.60": "^0.13.0",
    "react-native": "^0.61.1",
     Node v10.16.0

Config:

// since preset-0.61 isn't yet available
import { withPolyfills, makeConfig } from '@haul-bundler/preset-0.60';

const removeRuleByTest = (moduleConfig, test) => {
  const index = moduleConfig.findIndex(rule => {
    if (rule.test) {
      return rule.test.toString() === test.toString();
    }
    return false;
  });
  moduleConfig.splice(index, 1);
};

export default makeConfig({
  bundles: {
    index: platform => ({
      entry: withPolyfills(`./src/index.${platform}.js`),
      transform({ config }) {
        // Remove babel-loader, as it handles both .ts(x) and .js(x) files
        removeRuleByTest(config.module.rules, /\.[jt]sx?$/);

        config.module.rules = [
          {
            exclude: /node_modules(?!.*[\/\\](react|@react-native-community|@haul-bundler))/,
            test: /\.tsx?$/,
            loader: 'ts-loader',
          },
          ...config.module.rules,

          // Re-add the babel-loader, now only for .js(x)
          {
            exclude: /node_modules(?!.*[\/\\](react|@react-native-community|@haul-bundler))/,
            test: /\.jsx?$/,
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [require.resolve('@haul-bundler/core/build/utils/fixRequireIssues')],
            },
          },
          ...config.module.rules,
        ];

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

Description

After upgrading to the new haul bundle from a working legacy instance and starting with a fresh config I seemingly can't exclude things from Typescript checks and compilation terminates. Not sure what I'm missing or am I looking at an outdated config?

Traviss-MacBook-Pro:xc **$ yarn ios --haul-inspector
yarn run v1.16.0
$ NODE_OPTIONS=--max_old_space_size=8192 REACT_NATIVE=true NODE_ENV=development yarn haul start --platform ios --eager ios --haul-inspector
[Logs]

done ▶︎ Packager server running on http://localhost:8081
error ▶︎ /Users/**/**/xc/node_modules/@haul-bundler/core/node_modules/webpack/lib/SourceMapDevToolPlugin.js:179
const asset = compilation.getAsset(file).source;


TypeError: compilation.getAsset is not a function
at files.forEach (/Users/**/**/xc/node_modules/@haul-bundler/core/node_modules/webpack/lib/SourceMapDevToolPlugin.js:179:33)
at Array.forEach (<anonymous>)
at compilation.hooks.afterOptimizeChunkAssets.tap (/Users/**/**/xc/node_modules/@haul-bundler/core/node_modules/webpack/lib/SourceMapDevToolPlugin.js:178:12)
at SyncHook.eval [as call] (eval at create (/Users/**/**/xc/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:12:1)
at SyncHook.lazyCompileHook (/Users/**/**/xc/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (/Users/**/**/xc/node_modules/webpack/lib/Compilation.js:1313:42)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/**/**/xc/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
at AsyncSeriesHook.lazyCompileHook (/Users/**/**/xc/node_modules/tapable/lib/Hook.js:154:20)
at hooks.additionalAssets.callAsync.err (/Users/**/**/xc/node_modules/webpack/lib/Compilation.js:1309:36)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/**/**/xc/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
at AsyncSeriesHook.lazyCompileHook (/Users/**/**/xc/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeTree.callAsync.err (/Users/**/**/xc/node_modules/webpack/lib/Compilation.js:1305:32)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/**/**/xc/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
at AsyncSeriesHook.lazyCompileHook (/Users/**/**/xc/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.seal (/Users/**/**/xc/node_modules/webpack/lib/Compilation.js:1242:27)
at hooks.make.callAsync.err (/Users/**/**/xc/node_modules/webpack/lib/Compiler.js:546:17)
at _err0 (eval at create (/Users/**/**/xc/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
at _addModuleChain (/Users/**/**/xc/node_modules/webpack/lib/Compilation.js:1093:12)
at processModuleDependencies.err (/Users/**/**/xc/node_modules/webpack/lib/Compilation.js:1005:9)
at process._tickCallback (internal/process/next_tick.js:61:11)

Reproducible Demo

[zamotany]

@TNorth22 I'll take a lot at this tomorrow. In the meantime, if it's possible for you, could you create a repro repository, which I could use for testing?

[zamotany]

@TNorth22 I cannot reproduce your issue. The config looks file apart from duplicated ...config.module.rules. The stack trace is pointing to a Webpack plugin for creating source maps, so you can try adding sourceMap: false to bundle config (index object in haul.config.js) just to check if that helps. Other than that, without a reproduction repo I cannot do much.

[TNorth22]

Hey @zamotany thanks for the response. Just getting back from vacation today. Unfortunately I couldn't repro on a fresh rn project :-/.

sourceMap: false results in a slew of typescript errors so i don't think that's going to help.

I'll see if I can dig a little deeper and get some more info in the meantime.

[zamotany]

@TNorth22 setting sourceMap to false should not have any effect on loaders (and typescript compilation), which makes me think that maybe the underlying problem is with ts-loader/typescript.

1. Can you post those errors from typescript?
2. Did you tried haul bundle instead of start? Same results?

[rebirthtobi]

I'm also experiencing the same error, Also used haul bundle and i get the response

[zamotany]

@rebirthtobi Can you post your haul.config.js?

[zamotany]

@TNorth22 @rebirthtobi Can you add "resolution": { "webpack": "4.39.1" } to your package.json, do yarn install and check if the error is still occurring? Can you also try with "resolution": { "webpack": "4.41.1" }?

[rebirthtobi]

@zamotany i believe that fixes it but i'm faced with a new error .babelrcRoots is not allowed in .babelrc or "extends"ed files, only in root programmatic options, or babel.config.js/config

pointing to @haul-bundler/preset-0.60/node_mudules/babel-loader/lib/index.js

[zamotany]

@rebirthtobi Can you post your Babel config file??

[hjhart]

Just as a note – taking the note from @zamotany above worked for us. There was a small typo, however, and it is:

"resolutions": { "webpack": "4.41.1" }

Noting that the key recommended above was resolution but should be resolutions.

Thanks!

[zamotany]

Ok, so this issue looks like it's caused by duplicated webpack depednency. I need a volunteer to:

1. Remove resolutions from package.json
2. yarn install
3. yarn list --pattern webpack
4. Paste the outout

@hjhart @TNorth22 @rebirthtobi

[zamotany]

@rebirthtobi I believe the issue with .babelrcRoots is connected with your Babel config. In haul we don't use/specify babelrcRoots.

[hjhart]

@zamotany

yarn list v1.15.2
├─ @haul-bundler/[email protected]
├─ @haul-bundler/[email protected]
│  └─ [email protected]
├─ @haul-bundler/[email protected]
├─ @rails/[email protected]
│  ├─ [email protected]
│  └─ [email protected]
├─ @storybook/[email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  └─ [email protected]
├─ @storybook/[email protected]
│  └─ [email protected]
│     └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 2.10s.

[EugenePisotsky]

any updates? I have the same issue

[zamotany]

@EugenePisotsky There's no update. I cannot reproduce the issue. It seams it's connected with specific haul.config.js and/or duplicated webpack dependency, but without any repro I cannot do much. If you want to have this issue resolved, please try to create a repro project and post the link to it here.

[DaveWelling]

Future googlers - FWIW - I had this error and was able to resolve it by uninstalling webpack and webpack-cli, then installing the latest version of those two.

[denieler]

This issue was solved for me by upgrading webpack from 4.33 to 4.46 version. It looks like getAssets feature was added only in webpack version 4.40.