Preview fails if component includes a 3rd party react-native library.

[Saikedo]

I am trying to see how I can import 3rd party libraries into my bit component.

I have a 3rd party component that works perfectly fine in a standalone react-native-web environment, but when I try to use the same component in my bit component, I get an error in the preview stating something like this.

Module parse failed: Unexpected token (62:13)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

In react-native-web environment, I usually handle this by using a babel-loader so that the 3rd party react-native library will be processed with react native web plugin when webpack runs. I am assuming the issue is similar here but I was unable to achieve the same thing in my bit project.

This is what I tried.

//webpack.config.js file

import path from 'path';

const appDirectory = path.resolve(__dirname).split('node_modules')[0];

// Add every react-native package that needs compiling
const compileNodeModules = [
    'react-native-walkthrough-tooltip',
].map(moduleName => path.resolve(appDirectory, `node_modules/${moduleName}`));

const babelLoaderConfiguration = {
    test: /\.js$|tsx?$/,
    // Add every directory that needs to be compiled by Babel during the build.
    include: [
        path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
        ...compileNodeModules,
    ],
    use: {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true,
            plugins: ['react-native-web'],
            presets: ['module:metro-react-native-babel-preset', ['@babel/env', { 'targets': { 'node': 6 } }]],
        },
    },
};

module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    module: {
        rules: [
            babelLoaderConfiguration,
        ],
    },
    resolve: {
        extensions: [
            '.web.js',
            '.js',
            '.web.ts',
            '.ts',
            '.web.tsx',
            '.tsx',
            '.web.mjs',
            '.mjs',
        ],
        alias: {
            'react-native$': 'react-native-web',
        },
    },
};

//webpack-transformers.ts file

import { WebpackConfigTransformer, WebpackConfigMutator, WebpackConfigTransformContext } from '@teambit/webpack';

const webpackConfig = require('./webpack.config.js');

/**
 * Transformation to apply for both preview and dev server
 * @param config
 * @param _context
 */

function commonTransformation(config: WebpackConfigMutator, _context: WebpackConfigTransformContext) {
  config.merge([webpackConfig]);
  return config;
}

/**
 * Transformation for the preview only
 * @param config
 * @param context
 * @returns
 */
export const previewConfigTransformer: WebpackConfigTransformer = (
  config: WebpackConfigMutator,
  context: WebpackConfigTransformContext
) => {
  const newConfig = commonTransformation(config, context);
  return newConfig;
};

/**
 * Transformation for the dev server only
 * @param config
 * @param context
 * @returns
 */
export const devServerConfigTransformer: WebpackConfigTransformer = (
  config: WebpackConfigMutator,
  context: WebpackConfigTransformContext
) => {
  const newConfig = commonTransformation(config, context);
  return newConfig;
};

And finally inside my custom env, I have this (not posting the entire code, just the snippet that adds custom webpack configs)

reactNative.useWebpack({
        previewConfig: [previewConfigTransformer],
        devServerConfig: [devServerConfigTransformer],
      }),

Am I doing something wrong here? Did anyone manage to make this work ?

P.S. For a reference, I am trying to use the following library in my component.
https://www.npmjs.com/package/react-native-walkthrough-tooltip

[benjgil]

@Saikedo
Just closing this as we've now resolved.
Was an issue with bit's core envs' webpack config not being OS-agnostic and therefore not working with Windows. This has now been resolved by this and this PRs.
So it should all work now out of the box with the teambit.react/react-native env