repack

repack copied to clipboard

Ask your Question

Hey, thanks for this amazing project. Webpack is so much more powerful than Metro, so the ability to use it for react-native opens up a lot of exciting possibilities.

I do have a question about terminal output when running the re.pack dev server however:

I'm using the example webpack config and just added a console.log to the top:

console.log('Log entry from webpack config');

However, it ends up in my Terminal looking like this:

✖ [14:31:46.994Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'Log entry from webpack config' }

This is also the case for console output that originates from plugins and other "config-time" elements (e.g. speed-measure-webpack-plugin, etc.).

It's not a deal breaker but I would like to able to make these types of logs a little easier to read.

I see that the docs reference a LoggingPlugin which I suspect I need to configure somehow but I'm not sure how.

Cannot parse compiler worker message is not strictly an issue that would affect anything. LoggerPlugin is to capture logs from Webpack and other plugins (which are using Webpack's logging), but if you want to get rid of it the error, there are 2 options:

The raw method:

console.log({
  timestamp: Date.now(),
  issuer: '<something_easily_identifiable>',
  type: 'info', // or: 'debug' | 'info' | 'warn' | 'error'
  message: ['<your message>'],
});

Or:

const logger = new LoggerPlugin();
console.log(
  logger.createEntry(
    '<something_easily_identifiable>',
    'info', // or: 'debug' | 'info' | 'warn' | 'error',
    ['<your message>']
  )
)

It's not ideal, but has to do for now. We might revisit it later to make it easier.

Thanks for the response - yeah the bundle works etc. so this isn't a blocking issue for me, it just makes the console output hard to read.

Unfortunately in this case I don't always have control over the code that's calling console.log. In particular, I'm using speed-measure-webpack-plugin to profile why my bundler is slow and it's generating output like this:

✖ [23:55:50.996Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'SMP  ⏱' }
✖ [23:55:50.996Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'General output time took 55.47 secs' }
✖ [23:55:50.997Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'SMP  ⏱  Plugins' }
✖ [23:55:50.997Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'TargetPlugin took 19.45 secs' }
✖ [23:55:50.997Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'SourceMapDevToolPlugin took 4.91 secs' }
✖ [23:55:50.998Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'LoggerPlugin took 1.25 secs' }
✖ [23:55:50.998Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'DevServerPlugin took 0.207 secs' }
✖ [23:55:51.000Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'DefinePlugin took 0.001 secs' }
✖ [23:55:51.000Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'SMP  ⏱  Loaders' }
✖ [23:55:51.000Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'modules with no loaders took 32.22 secs' }
✖ [23:55:51.001Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'module count = 2753' }
✖ [23:55:51.001Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'cache-loader, and' }
✖ [23:55:51.001Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'babel-loader took 18.74 secs' }
✖ [23:55:51.001Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'module count = 931' }
✖ [23:55:51.002Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'cache-loader, and' }
✖ [23:55:51.002Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: '@callstack/repack took 5.68 secs' }
✖ [23:55:51.003Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'module count = 104' }
✖ [23:55:51.003Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'cache-loader, and' }
✖ [23:55:51.003Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'esbuild-loader took 5.23 secs' }
✖ [23:55:51.003Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'module count = 95' }
✖ [23:55:51.004Z][DevServerProxy] Cannot parse compiler worker message {
  platform: 'ios',
  message: '@pmmmwh/react-refresh-webpack-plugin, and'
}
✖ [23:55:51.004Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'cache-loader, and' }
✖ [23:55:51.004Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'esbuild-loader took 2.006 secs' }
✖ [23:55:51.004Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'module count = 48' }
✖ [23:55:51.004Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'cache-loader, and' }
✖ [23:55:51.005Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'graphql-tag took 1.59 secs' }
✖ [23:55:51.005Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'module count = 14' }
✖ [23:55:51.005Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'cache-loader, and' }
✖ [23:55:51.005Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'babel-loader, and' }
✖ [23:55:51.006Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'cache-loader, and' }
✖ [23:55:51.006Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'esbuild-loader took 0.363 secs' }
✖ [23:55:51.006Z][DevServerProxy] Cannot parse compiler worker message { platform: 'ios', message: 'module count = 1' }

Since the actual logs are not in my code, I can't manipulate the call site as you've suggested above.

Based on the docs you could pass outputTarget:

outputTarget: (...args) => {
  console.log({
    timestamp: Date.now(),
    issuer: 'speed-measure-webpack-plugin',
    type: 'info',
    message: args,
  });
}

Have you tried it?

Looks like there's a solution posted in the previous comment, closing due to inactivity.