callstack / callstack/react-native-paper
WEB -> SyntaxError: Cannot use import statement outside a module - NX and Next.JS Page Router (14.2.16)
- 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
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