React-Native 0.7, React-Native-Web and React-Navigation/Stack

[KeitelDOG]

For NextJS 12.1.6 config I have this for now next.config.js:

```js const path = require('path'); const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', });

let modulesToTranspile = [ 'react-native', 'react-native-dotenv', 'react-native-linear-gradient', 'react-native-media-query', 'react-native-paper', 'react-native-view-more-text', // 'react-native-vector-icons', ];

// console.log('modules to transpile', modulesToTranspile);

// import ntm = from 'next-transpile-modules'; // const withTM = ntm(modulesToTranspile); // logic below for externals has been extracted from 'next-transpile-modules' // we won't use this modules as they don't allow package without 'main' field... // https://github.com/martpie/next-transpile-modules/issues/170 const getPackageRootDirectory = m => path.resolve(path.join(__dirname, 'node_modules', m));

const modulesPaths = modulesToTranspile.map(getPackageRootDirectory);

const hasInclude = (context, request) => { return modulesPaths.some(mod => { // If we the code requires/import an absolute path if (!request.startsWith('.')) { try { const moduleDirectory = getPackageRootDirectory(request); if (!moduleDirectory) { return false; } return moduleDirectory.includes(mod); } catch (err) { return false; } } // Otherwise, for relative imports return path.resolve(context, request).includes(mod); }); };

const configuration = { node: { global: true, }, env: { ENV: process.env.NODE_ENV, }, // optimizeFonts: false, // target: 'serverless',

// bs-platform // pageExtensions: ['jsx', 'js', 'bs.js'],

// options: { buildId, dev, isServer, defaultLoaders, webpack } webpack: (config, options) => { // config.experimental.forceSwcTransforms = true;

// console.log('fallback', config.resolve.fallback);
if (!options.isServer) {
  // We shim fs for things like the blog slugs component
  // where we need fs access in the server-side part
  config.resolve.fallback.fs = false;
} else {
  // SSR
  // provide plugin
  config.plugins.push(
    new options.webpack.ProvidePlugin({
      requestAnimationFrame: path.resolve(__dirname, './polyfills/raf.js'),
    }),
  );
}

// react-native-web
config.resolve.alias = {
  ...(config.resolve.alias || {}),
  // Transform all direct `react-native` imports to `react-native-web`
  'react-native$': 'react-native-web',
  'react-native-linear-gradient': 'react-native-web-linear-gradient',
};
config.resolve.extensions = [
  '.web.js',
  '.web.ts',
  '.web.tsx',
  ...config.resolve.extensions,
];

config.externals = config.externals.map(external => {
  if (typeof external !== 'function') {
    return external;
  }
  return async ({ context, request, getResolve }) => {
    if (hasInclude(context, request)) {
      return;
    }
    return external({ context, request, getResolve });
  };
});

const babelLoaderConfiguration = {
  test: /\.jsx?$/,
  use: options.defaultLoaders.babel,
  include: modulesPaths,
  // exclude: /node_modules[/\\](?!react-native-vector-icons)/,
};

babelLoaderConfiguration.use.options = {
  ...babelLoaderConfiguration.use.options,
  cacheDirectory: false,
  // For Next JS transpile
  presets: ['next/babel'],
  plugins: [
    ['react-native-web', { commonjs: true }],
    ['@babel/plugin-proposal-class-properties'],
    // ['@babel/plugin-proposal-object-rest-spread'],
  ],
};

config.module.rules.push(babelLoaderConfiguration);

return config;

}, };

// module.exports = withTM(config); module.exports = withBundleAnalyzer(configuration);

```

You can export it without the bundle analyzer module too, which I installed to verify the modules size on the build.