You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

[AKx10]

I need this toast for my react native web, expo project ../../node_modules/react-native-toast-message/lib/src/Toast.js Module parse failed: Unexpected token (15: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 | hide | }), [hide, show]));

return (<ToastUI isVisible={isVisible} options={options} data={data} hide={hide} show={show} config={config}/>);

| }); | let refs = [];

[ammarfaris]

I need this toast for my react native web, expo project ../../node_modules/react-native-toast-message/lib/src/Toast.js Module parse failed: Unexpected token (15: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 | hide | }), [hide, show]));

return (<ToastUI isVisible={isVisible} options={options} data={data} hide={hide} show={show} config={config}/>);

| }); | let refs = [];

do you manage to resolve it? @AKx10

[d1fferenz]

I'm encountering this issue in a kind of massive scale. I'm building a React Native app which I wan't to run as a web app with web pack to be able to test it with Cypress. Here's my stacktrace: ERROR in ./node_modules/react-native-toast-message/lib/src/Toast.js 15:12 Module parse failed: Unexpected token (15: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 | hide | }), [hide, show]));

return (<ToastUI isVisible={isVisible} options={options} data={data} hide={hide} show={show} config={config}/>);

| }); | let refs = []; @ ./node_modules/react-native-toast-message/lib/index.js 1:0-47 1:0-47 @ ./App.tsx 1:1899-1936 @ ./index.web.js 1:156-172

ERROR in ./node_modules/react-native-toast-message/lib/src/components/BaseToast.js 7:12 Module parse failed: Unexpected token (7: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 | import { Touchable } from './Touchable'; | export function BaseToast({ text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 1, text1Props, text2Style, text2NumberOfLines = 1, text2Props, renderLeadingIcon, renderTrailingIcon }) {

return (<Touchable testID={getTestId('TouchableContainer')} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>

| {renderLeadingIcon && renderLeadingIcon()} | <View testID={getTestId('ContentContainer')} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}> @ ./node_modules/react-native-toast-message/lib/index.js 2:0-55 2:0-55 @ ./App.tsx 1:1899-1936 @ ./index.web.js 1:156-172

ERROR in ./node_modules/react-native-toast-message/lib/src/components/ErrorToast.js 4:11 Module parse failed: Unexpected token (4: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 | import { BaseToast } from './BaseToast'; | export function ErrorToast(props) {

return <BaseToast style={{ borderLeftColor: '#FE6301' }} {...props}/>;

}

@ ./node_modules/react-native-toast-message/lib/index.js 4:0-57 4:0-57 @ ./App.tsx 1:1899-1936 @ ./index.web.js 1:156-172

ERROR in ./node_modules/react-native-toast-message/lib/src/components/InfoToast.js 4:11 Module parse failed: Unexpected token (4: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 | import { BaseToast } from './BaseToast'; | export function InfoToast(props) {

return <BaseToast style={{ borderLeftColor: '#87CEFA' }} {...props}/>;

}

@ ./node_modules/react-native-toast-message/lib/index.js 5:0-55 5:0-55 @ ./App.tsx 1:1899-1936 @ ./index.web.js 1:156-172

ERROR in ./node_modules/react-native-toast-message/lib/src/components/SuccessToast.js 4:11 Module parse failed: Unexpected token (4: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 | import { BaseToast } from './BaseToast'; | export function SuccessToast(props) {

return <BaseToast style={{ borderLeftColor: '#69C779' }} {...props}/>;

}

@ ./node_modules/react-native-toast-message/lib/index.js 3:0-61 3:0-61 @ ./App.tsx 1:1899-1936 @ ./index.web.js 1:156-172

Here's my web pack.config.cjs (the code sadly won't stay formatted :( ): `const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { mode: 'development', entry: './index.web.js', output: { path: path.resolve(dirname, 'dist'), filename: 'bundle.js', }, resolve: { extensions: ['.web.js', '.tsx', '.ts', '.js', '.jsx'], alias: { 'react-native$': 'react-native-web', }, }, module: { rules: [ { test: /.(ts|tsx)$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, { loader: 'ts-loader', options: { transpileOnly: true, }, }, ], }, { test: /.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, }, { test: /.(png|jpe?g|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, // Convert images < 8kb to base64 strings name: 'images/[name].[ext]', // Define output path and name format }, }, ], }, { test: /.css$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './index.html', }), ], devServer: { static: path.join(dirname, 'dist'), compress: true, port: 8082, }, }; `

[Sir-hennihau]

any news on this? experiencing this on a setup with react native web + tamagui

okay i could actually fix this by adding it to my transpiled packages in next.config.js

        transpilePackages: [
            "react-native-toast-message",
            "solito",
            "react-native-web",
            "expo-linking",
            "expo-constants",
            "expo-modules-core",
        ],

but now i have the problem that the component is not rendered on web :o