Loader issue in react-native-web: Module parse failed: Unexpected token

24 views Asked by At

I'm trying to setup React Native Web App with TypeScript and WebPack. While running the code I'm getting the around 63 errors all in node_modules

Bug Report

ERROR in ../node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js 11:7
Module parse failed: Unexpected token (11:7)
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
|  */
|
> export interface EventSubscription {
|   remove(): void;
| }
 @ ../node_modules/@react-native-firebase/app/lib/internal/SharedEventEmitter.js 18:0-78 20:19-31
 @ ../node_modules/@react-native-firebase/app/lib/internal/index.js 25:0-69 25:0-69
 @ ../node_modules/@react-native-firebase/analytics/lib/index.js 31:0-35:49 134:38-52 816:15-36 830:24-39
 @ ../src/routes/Navigation.tsx 29:36-79
 @ ../App.tsx 14:37-71
 @ ../index.web.ts 8:30-46

webpack-config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rootDir = path.join(__dirname, '..');
const webpackEnv = process.env.NODE_ENV || 'development';

module.exports = {
  mode: webpackEnv,
  entry: {
    app: path.join(rootDir, './index.web.ts'),
  },
  output: {
    path: path.resolve(rootDir, 'dist'),
    filename: 'app-[hash].bundle.js',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(tsx|ts|jsx|js|mjs)$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.jsx', '.web.js', '.jsx', '.js'],
    alias: Object.assign({
      'react-native$': 'react-native-web',
    }),
  },
};

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["esnext", "dom"],
    "jsx": "react",
    "noEmit": false,
    "strict": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": false,
    "resolveJsonModule": true
  },
  "exclude": ["node_modules"]
}

Any help would be most helpful.

0

There are 0 answers