react-native-elements + Next.js给出" Module parse failed:



我有一个结合Expo/React Native + Next.js项目(原生+ web应用),基于Expo的说明(见指南,@expo/next-adapter,代码示例)。

源代码:https://github.com/tomsoderlund/reactnative-nextjs-template/pull/1

它工作得很好,直到我试图添加react-native-elements;现在它给出了一个Webpack错误,当运行在Next.js与yarn dev(它工作良好与React Nativeyarn dev:native)。

我在next.config.js中添加了新的模块到transpilePackages

错误信息:

./node_modules/react-native-ratings/dist/SwipeRating.js
Module parse failed: Unexpected token (171:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const { imageSize, ratingCount, type, tintColor } = this.props;
|   const { source } = TYPES[type];
>   return times(ratingCount, index => <View key={index} style={styles.starContainer}>
|   <Image source={source} style={{ width: imageSize, height: imageSize, tintColor }}/>
| </View>);

更新:next-transpile-modules

阅读完世博指南后:

你可能需要使用next-transpile-modules插件来编译某些第三方模块,以使它们工作(如Emotion)。

…我尝试将next-transpile-modules添加到我的next.config.js,但后来得知它是多余的:https://nextjs.org/blog/next-13-1#built-in-module-transpilation-stable

注意:next-transpile-modules现在已经内置到Next.js: https://github.com/martpie/next-transpile-modules/releases/tag/the-end

相关内容