react-native-art / art

React Native module that allows you to draw vector graphics.
https://github.com/react-native-community/art
MIT License
287 stars 78 forks source link

not working using web #82

Open learncodingforweb opened 3 years ago

learncodingforweb commented 3 years ago

ERROR in ./node_modules/@react-native-community/art/lib/ARTSerializablePath.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /home/box/dev/rn_web/node_modules/@react-native-community/art/lib/ARTSerializablePath.js: Unexpected token, expected "," (21:27)

19 | // TODO: Refactor to class 20 | const SerializablePath = Class(Path, {

21 | initialize: function(path: string | SerializablePath) { | ^ 22 | this.reset(); 23 | if (path instanceof SerializablePath) { 24 | this.path = path.path.slice(0);

using webpack.config.js

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

module.exports = {
  mode: 'development',
  entry: './src/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)$/,
        include: [
          path.resolve('src'),
          path.resolve('node_modules/react-native-progress'),
          path.resolve('node_modules/@react-native-community')
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              {
                plugins: ['@babel/plugin-proposal-class-properties'],
              },
            ],
            plugins: ['babel-plugin-react-native-web'],
          },
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'release'),
    compress: true,
    port: 4000,
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
  },
};
amaankulshreshtha commented 3 years ago

inside the alias property, add this line

resolve: {
  alias: {
    'react-native$': 'react-native-web',
    '@react-native-community/art': 'react-art'
  }
}