callstack / callstack/react-native-paper
WEB -> SyntaxError: Cannot use import statement outside a module - NX and Next.JS Page Router (14.2.16)
- 主要言語
- TypeScript
- スター
- 14.5k
- フォーク
- 2.2k
- 平均マージ
- 5日 23時間
- マージ済み PR(30日)
- 12
説明
### 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);
```
コントリビューションガイド
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- babel, javascript, next.js, react-native, webpack
- 領域
- build-system, frontend, web-dev
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100