error in web

[learncodingforweb]

Getting error

ERROR in ./node_modules/react-native-confirmation-code-field/esm/CodeField.js 34:4
Module parse failed: Unexpected token (34:4)
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
|   );
|   return (
>     <RootComponent {...RootProps} style={getStyle(styles.root, rootStyle)}>
|       {cells}
|       <TextInput
 @ ./node_modules/react-native-confirmation-code-field/esm/index.js 2:0-38 2:0-38

using webpack config

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('react-native-confirmation-code-field'),
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-flow',
              '@babel/preset-typescript',
            ],
            plugins: [
              'babel-plugin-react-native-web',
              '@babel/plugin-proposal-class-properties',
            ],
          },
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'release'),
    compress: true,
    port: 4000,
    historyApiFallback: true,
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: [
      '.web.js',
      '.web.jsx',
      '.web.ts',
      '.web.tsx',
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
    ],
  },
};

using following packages

"dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-native-confirmation-code-field": "^7.0.1",
    "react-native-web": "^0.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-flow": "^7.13.13",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "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.26.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },

[retyui]

        include: [
          path.resolve('src'),
-          path.resolve('react-native-confirmation-code-field'),
+          path.parse(require.resolve('react-native-confirmation-code-field/package.json')).dir
        ],

[learncodingforweb]

Getting following warnings

react-dom.development.js:67 Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
    at Home (webpack://rn_web/./src/Home.js?:32:66)
    at div
    at eval (webpack://rn_web/./node_modules/react-native-web/dist/exports/View/index.js?:56:25)
    at App

Warning: Cannot update a component (`ForwardRef(CodeFieldComponent)`) while rendering a different component (`Home`). To locate the bad setState() call inside `Home`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Home (webpack://rn_web/./src/Home.js?:32:66)
    at div
    at eval (webpack://rn_web/./node_modules/react-native-web/dist/exports/View/index.js?:56:25)
    at App

[retyui]

@learncodingforweb Could you please provide a DEMO REPO to reproduce this error?

[learncodingforweb]

@retyui, Please check repo, After entering all the digit above warning messages appear
https://github.com/learncodingforweb/react-native-confirmation-code-field-web-example

[retyui]

Fixed in

• 7.1.0
• 6.7.0

diff: 7.0.0...7.1.0

[learncodingforweb]

no warning messages appear in 7.1.0

But
onEndEditing={(e)=> console.log('end')}
is not executing at the end of entering all the digits