react-native-reanimated: Reanimated is not working in web

ERROR in ./node_modules/react-native-reanimated/src/Transitioning.js 36:6 Module parse failed: Unexpected token (36:6) 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

Using package.json

{
  "name": "dev",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-native-reanimated": "^2.0.0",
    "react-native-web": "^0.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-native-web": "^0.15.0",
    "html-webpack-plugin": "^5.3.1",
    "prettier": "^2.2.1",
    "webpack": "^5.25.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "start": "webpack serve --config webpack.config.js",
    "build": "webpack --config webpack.config.js",
    "format": "prettier --write ."
  }
}

with webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './release'),
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['babel-plugin-react-native-web'],
          },
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'release'),
    compress: true,
    port: 3000,
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
  },
};

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 25 (4 by maintainers)

Most upvoted comments

I figured out a setup as well. I added a config.module.rules that would include react-native-reanimated.

kyleshevlin on May 13, 2022

just added babel plugin to babel.config.js and it worked plugins: [ ‘@babel/plugin-proposal-export-namespace-from’, ‘react-native-reanimated/plugin’,

tarkanlar on Jan 16, 2023

@kyleshevlin i managed to figure out my setup. here is my webpack.config.js. hope it helps.

const {merge} = require('webpack-merge');
const alias = require('../alias');
const webpack = require('webpack');
const path = require('path');

const aliasPath = modulePath =>
  path.resolve(__dirname, '../../../node_modules/', modulePath);

module.exports = config => {
  return merge(config, {
    module: {
      rules: [
        {
          test: /\.(gif|jpe?g|png|ttf)$/,
          use: {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]',
              esModule: false,
            },
          },
        },
        {
          test: /\.svg$/,
          exclude: /node_modules/,
          use: [
            {
              loader: '@svgr/webpack',
            },
          ],
        },
        {
          test: /\.(js|jsx)$/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              babelrc: false,
              configFile: false,
              presets: ['@babel/preset-react', '@babel/preset-env'],
            },
          },
        },
      ],
    },
    resolve: {
      extensions: [
        '.web.js',
        '.js',
        '.web.ts',
        '.ts',
        '.web.jsx',
        '.jsx',
        '.web.tsx',
        '.tsx',
        '.css',
        '.json',
      ],
      alias: {
        'react-native$': 'react-native-web',
        './module$': aliasPath(
          'react-native-localize/dist/module/module.web.js',
        ),
        ...alias,
      },
    },
    plugins: [
      new webpack.DefinePlugin({
        __DEV__: process.env.NODE_ENV === 'development',
      }),
    ],
  });
};

radelcom on May 13, 2022

For posterity, if you’re using Expo and want Reanimated to work for web, there are instructions here: https://docs.expo.dev/versions/latest/sdk/reanimated/

npx expo install react-native-reanimated

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/plugin-proposal-export-namespace-from",
      "react-native-reanimated/plugin"],
  };
};

corysimmons on Feb 21, 2023

Hey @learncodingforweb The reason this issue was webpack configuration, I fixed this with this PR Example webpack config

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    path: path.resolve(__dirname, './release'),
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
    }),
    new webpack.DefinePlugin({
      process: { env: {} }
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env', 
              '@babel/preset-react',
              {
                plugins: [
                  '@babel/plugin-proposal-class-properties'
                ]
              }
            ],
            plugins: ['babel-plugin-react-native-web'],
          },
        },
      },
    ],
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: ['.web.js', '.js'],
  },
};

piaskowyk on Apr 8, 2021

Error can be seen on https://github.com/learncodingforweb/web_reanimated

learncodingforweb on Mar 15, 2021

@learncodingforweb, @gurkerl83 Change exclude key to:

exclude: /node_modules\/(?!react-native-reanimated)/,

This happens because we use JSX syntax and your babel configuration doesn’t compile node_modules.

jakub-gonet on Mar 15, 2021