callstack / callstack/react-native-paper

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

Open
#4,608 1 comment 0 reactions 0 assignees View on GitHub
bug web
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### 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);

```

Contributor guide

Open the contributing guide

Research direction

Start with the provided Next.js configuration and reproduce the error using NX 20.3.2, Next.js 14.2.16, and the listed React Native packages. Compare the Page Router and App Router build paths to identify where the module syntax is left untransformed. Done means the same configuration works with both routers without the SyntaxError.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, next.js, react-native, webpack
Domain
build-system, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.