Module parse failed: Identifier 'StyleSheet' has already been declared

While trying to use with the Expo and React Native.

Running with: expo start --web

Getting this output:

./node_modules/react-native-web/dist/vendor/react-native/FlatList/index.js 105:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (105:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import deepDiffer from “…/deepDiffer”; | import * as React from ‘react’;

import StyleSheet from “…/…/…/exports/StyleSheet”; | import View from “…/…/…/exports/View”; | import ScrollView from “…/…/…/exports/ScrollView”; ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js 146:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (146:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import RefreshControl from “…/…/…/exports/RefreshControl”; | import ScrollView from “…/…/…/exports/ScrollView”;

import StyleSheet from “…/…/…/exports/StyleSheet”; | import UIManager from “…/…/…/exports/UIManager”; | import View from “…/…/…/exports/View”; ./node_modules/react-native-web/dist/modules/createDOMProps/index.js 22:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (22:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import AccessibilityUtil from “…/AccessibilityUtil”; | import css from “…/…/exports/StyleSheet/css”;

import StyleSheet from “…/…/exports/StyleSheet”; | import styleResolver from “…/…/exports/StyleSheet/styleResolver”; | import { STYLE_GROUPS } from “…/…/exports/StyleSheet/constants”; ./node_modules/react-native-web/dist/exports/ProgressBar/index.js 39:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (39:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | import * as React from ‘react’;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | var ProgressBar = React.forwardRef(function (props, ref) { ./node_modules/react-native-web/dist/exports/ActivityIndicator/index.js 39:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (39:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | import * as React from ‘react’;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | var accessibilityValue = { ./node_modules/react-native-web/dist/exports/SafeAreaView/index.js 40:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (40:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import * as React from ‘react’; | import { canUseDOM } from ‘fbjs/lib/ExecutionEnvironment’;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | ./node_modules/react-native-web/dist/exports/ImageBackground/index.js 41:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (41:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import { forwardRef } from ‘react’; | import Image from “…/Image”;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | var emptyObject = {}; ./node_modules/react-native-web/dist/exports/TouchableOpacity/index.js 44:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (44:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import useMergeRefs from “…/…/modules/useMergeRefs”; | import usePressEvents from “…/…/modules/usePressEvents”;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | ./node_modules/react-native-web/dist/exports/TouchableHighlight/index.js 44:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (44:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import useMergeRefs from “…/…/modules/useMergeRefs”; | import usePressEvents from “…/…/modules/usePressEvents”;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | ./node_modules/react-native-web/dist/exports/Pressable/index.js 45:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (45:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import useHover from “…/…/modules/useHover”; | import usePressEvents from “…/…/modules/usePressEvents”;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | ./node_modules/react-native-web/dist/exports/Button/index.js 5:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (5:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import { StyledComponent } from “tailwindcss-react-native”; | import * as React from ‘react’;

import StyleSheet from “…/StyleSheet”; | import TouchableOpacity from “…/TouchableOpacity”; | import Text from “…/Text”; ./node_modules/react-native-web/dist/exports/AppRegistry/AppContainer.js 5:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (5:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import { StyledComponent } from “tailwindcss-react-native”; | import * as React from ‘react’;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | var RootTagContext = React.createContext(null); ./node_modules/react-native-web/dist/exports/Modal/ModalAnimation.js 5:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (5:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import { StyledComponent } from “tailwindcss-react-native”; | import * as React from ‘react’;

import StyleSheet from “…/StyleSheet”; | import createElement from “…/createElement”; | var ANIMATION_DURATION = 300; ./node_modules/react-native-web/dist/exports/StyleSheet/index.js 5:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (5:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import { StyledComponent } from “tailwindcss-react-native”; | import { canUseDOM } from ‘fbjs/lib/ExecutionEnvironment’;

import StyleSheet from “./StyleSheet”; | | if (canUseDOM && window.REACT_DEVTOOLS_GLOBAL_HOOK) { ./node_modules/react-native-web/dist/exports/View/index.js 63:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (63:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import usePlatformMethods from “…/…/modules/usePlatformMethods”; | import useResponderEvents from “…/…/modules/useResponderEvents”;

import StyleSheet from “…/StyleSheet”; | import TextAncestorContext from “…/Text/TextAncestorContext”; | ./node_modules/react-native-web/dist/exports/Text/index.js 63:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (63:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import usePlatformMethods from “…/…/modules/usePlatformMethods”; | import useResponderEvents from “…/…/modules/useResponderEvents”;

import StyleSheet from “…/StyleSheet”; | import TextAncestorContext from “./TextAncestorContext”; | ./node_modules/react-native-web/dist/exports/TextInput/index.js 64:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (64:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import usePlatformMethods from “…/…/modules/usePlatformMethods”; | import useResponderEvents from “…/…/modules/useResponderEvents”;

import StyleSheet from “…/StyleSheet”; | import TextInputState from “…/…/modules/TextInputState”; | ./node_modules/react-native-web/dist/exports/Picker/index.js 74:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (74:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import usePlatformMethods from “…/…/modules/usePlatformMethods”; | import PickerItem from “./PickerItem”;

import StyleSheet from “…/StyleSheet”; | var Picker = React.forwardRef(function (props, forwardedRef) { | var children = props.children, ./node_modules/react-native-web/dist/exports/Modal/ModalContent.js 7:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (7:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import { canUseDOM } from ‘fbjs/lib/ExecutionEnvironment’; | import View from “…/View”;

import StyleSheet from “…/StyleSheet”; | var ModalContent = React.forwardRef(function (props, forwardedRef) { | var active = props.active, ./node_modules/react-native-web/dist/exports/CheckBox/index.js 89:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (89:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import * as React from ‘react’; | import createElement from “…/createElement”;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | var CheckBox = React.forwardRef(function (props, forwardedRef) { ./node_modules/react-native-web/dist/exports/Modal/ModalFocusTrap.js 8:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (8:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import View from “…/View”; | import createElement from “…/createElement”;

import StyleSheet from “…/StyleSheet”; | import UIManager from “…/UIManager”; | ./node_modules/react-native-web/dist/exports/Switch/index.js 90:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (90:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import createElement from “…/createElement”; | import multiplyStyleLengthValue from “…/…/modules/multiplyStyleLengthValue”;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | var emptyObject = {}; ./node_modules/react-native-web/dist/exports/ScrollView/index.js 93:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (93:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import ScrollResponder from “…/…/modules/ScrollResponder”; | import ScrollViewBase from “./ScrollViewBase”;

import StyleSheet from “…/StyleSheet”; | import View from “…/View”; | import React from ‘react’; ./node_modules/react-native-web/dist/exports/Image/index.js 94:7 Module parse failed: Identifier ‘StyleSheet’ has already been declared (94:7) File was processed with these loaders:

• ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | import ImageLoader from “…/…/modules/ImageLoader”; | import PixelRatio from “…/PixelRatio”;

import StyleSheet from “…/StyleSheet”; | import TextAncestorContext from “…/Text/TextAncestorContext”; | import View from “…/View”; ./node_modules/tailwindcss-react-native/dist/context/platform.js 11:11 Module parse failed: Unexpected token (11:11) 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 | }); | function PlatformProvider({ preview = false, platform = react_native_1.Platform.OS, …props }) { return <PlatformContext.Provider value={{ preview, platform }} {…props}/>; | } | exports.PlatformProvider = PlatformProvider; ./node_modules/tailwindcss-react-native/dist/context/color-scheme.js 13:84 Module parse failed: Unexpected token (13:84) 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 | }); | function ColorSchemeProvider({ initialColorScheme, …props }) { const [colorScheme, setColorScheme] = (0, react_1.useState)(initialColorScheme ?? react_native_1.Appearance.getColorScheme() ?? “light”); | return (<ColorSchemeContext.Provider value={{ | colorScheme, ./node_modules/tailwindcss-react-native/dist/context/device-media.js 19:12 Module parse failed: Unexpected token (19:12) 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 | ? “portrait” | : “landscape”; return (<DeviceMediaContext.Provider value={{ | width, | height, ./node_modules/tailwindcss-react-native/dist/styled.js 21:23 Module parse failed: Unexpected token (21:23) 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 baseClassName = typeof styledBaseClassNameOrOptions === “string” | ? styledBaseClassNameOrOptions : maybeOptions?.baseClassName; | function Styled({ className, tw: twClassName, baseTw, style: styleProp, children: componentChildren, …componentProps }, ref) { | const { platform, preview } = (0, platform_1.usePlatform)(); ./node_modules/tailwindcss-react-native/dist/styled-component.js 32:11 Module parse failed: Unexpected token (32:11) 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 | exports.StyledComponent = React.forwardRef(({ component, …options }, ref) => { | const Component = (0, styled_1.styled)(component); return <Component {…options} ref={ref}/>; | }); | ./node_modules/tailwindcss-react-native/dist/provider.js 32:131 Module parse failed: Unexpected token (32:131) 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 device_media_1 = require(“./context/device-media”); | const style_sheet_1 = require(“./context/style-sheet”); function TailwindProvider({ styles = globalThis.tailwindcss_react_native_style, media = globalThis.tailwindcss_react_native_media ?? {}, initialColorScheme, preview, platform, children, }) { | const stylesheet = { styles, media }; | return (<platform_1.PlatformProvider preview={preview} platform={platform}> ./node_modules/tailwindcss-react-native/dist/context/style-sheet.js 5:43 Module parse failed: Unexpected token (5: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 | exports.useStyleSheet = exports.StyleSheetContext = void 0; | const react_1 = require(“react”); globalThis.tailwindcss_react_native_style ?? (globalThis.tailwindcss_react_native_style = {}); | globalThis.tailwindcss_react_native_media ?? (globalThis.tailwindcss_react_native_media = {}); | exports.StyleSheetContext = (0, react_1.createContext)({

// tailwind.config.js <-- trying to avoid processing node_modules, same problem with [“./**/*.{js,jsx,ts,tsx}”],

module.exports = {
    content: ["./src/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

// babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["tailwindcss-react-native/babel"]
  };
};

[marklawlor]

No that looks correct. Like I said, if your able to provide a repo I’m happy to debug the problem for you, and save you the hassle of back and forth questions. This library is still quite new and there’s a high change there is a bug within the babel plugin

[vincentvella]

🐐 Thank you! For anyone following the thread still: https://github.com/marklawlor/tailwindcss-react-native/commit/6fc986d7e43835f8672b7c8bcd9406c5bbdacd2f