WEB -> SyntaxError: Cannot use import statement outside a module - NX and Next.JS Page Router (14.2.16)

[hugoewarrior]

Current behaviour

Im trying to use React Native Paper on Web, using Next.JS Page Router and NX but i get error: SyntaxError: Cannot use import statement outside a module
But when i use that same configuration on App Router everything works fine.

Expected behaviour

This same configuration should work with Page and App Router.

How to reproduce?

1. Create a brand new Mono Repo using NX 20.3.2
2. Create a Next.JS App (14.2.16)
3. Install following dependencies:
   "next": "14.2.16",
   "react": "18.3.1",
   "react-dom": "18.3.1",
   "react-native-paper": "^5.13.1",
   "react-native-safe-area-context": "^5.0.0",
   "react-native-svg": "^15.11.1",
   "react-native-vector-icons": "^10.2.0",
   "react-native-web": "^0.19.13"

Preview

What have you tried so far?

Your Environment

software	version
ios	x
android	x
react-native	x.x.x
react-native-paper	^5.13.1
node	v18.18.0
npm or yarn	yarn
expo sdk	x.x.x

Next.Js config:

const { composePlugins, withNx } = require('@nx/next');

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/

const nextConfig = {
  transpilePackages: ["react-native-paper", "react-native-safe-area-context"],
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  
  webpack: (config) => {
    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.js$/,
        include: /node_modules/,
        exclude: /node_modules[/\\](?!react-native-paper|react-native|react-native-vector-icons|react-native-safe-area-view|react-native-safe-area-context)/,
        use: {
          loader: 'babel-loader',
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,

            // The configuration for compilation
            presets: [
              'next/babel',
              ['@babel/preset-env', { useBuiltIns: 'usage', corejs: '2' }],
              '@babel/preset-flow',
              '@babel/preset-typescript',
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-transform-modules-commonjs',
            ],
          },
        },
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|svg|ttf)$/,
        type: 'asset/resource',
      }
    ];
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'react-native$': 'react-native-web',
      'react-native-svg$': 'react-native-svg/lib/module/ReactNativeSVG',
      'react-native-linear-gradient$': 'react-native-web-linear-gradient',
      'react-native/Libraries/Renderer/shims/ReactNativePropRegistry$':
        'react-native-web/dist/modules/ReactNativePropRegistry',
      'react-native-vector-icons': 'react-native-vector-icons/dist',
    };
    config.resolve.extensions = [
      '.web.js',
      '.web.jsx',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ];
    return config;
  },
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

[hugoewarrior]

Fresh Update:
I just found out that using versions mentioned above, you need to transpile react-native-paper and exclude it.

I just want to know if this is a correct way to accomplish this, if that the case we should update the documentation for this.