Integrate @polkadot/api with Vuexy React Template

FedeC87p commented 2 years ago

I try to use PolkadotJs with my website create with Vuexy React but i have this error:

./node_modules/@polkadot/api/packageInfo.js 6:14 Module parse failed: Unexpected token (6:14) File was processed with these loaders:

./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | export const packageInfo = { | name: '@polkadot/api',

path: import.meta && import.meta.url ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto', | type: 'esm', | version: '9.1.1'

This is my package.json { "name": "vuexy-react-admin-dashboard", "version": "8.0.0", "private": true, "dependencies": { "@casl/ability": "^5.4.3", "@casl/react": "^2.3.0", "@craco/craco": "^6.4.3", "@fullcalendar/core": "^5.11.0", "@fullcalendar/daygrid": "^5.11.0", "@fullcalendar/interaction": "^5.11.0", "@fullcalendar/list": "^5.11.0", "@fullcalendar/react": "^5.11.1", "@fullcalendar/timegrid": "^5.11.0", "@fullcalendar/timeline": "^5.11.0", "@hookform/resolvers": "^2.8.10", "@polkadot/api": "^9.1.1", "@popperjs/core": "^2.11.3", "@reduxjs/toolkit": "^1.2.5", "animate.css": "4.1.1", "apexcharts": "^3.35.2", "apexcharts-clevision": "^3.28.5", "axios": "^0.27.2", "axios-mock-adapter": "^1.20.0", "bootstrap": "5.1.0", "bs-stepper": "1.7.0", "chart.js": "^3.7.1", "classnames": "2.3.1", "cleave.js": "1.6.0", "draft-js": "0.11.7", "draftjs-to-html": "0.9.1", "file-saver": "^2.0.5", "flatpickr": "^4.6.13", "history": "^5.3.0", "html-to-draftjs": "1.5.0", "i18next": "^21.8.2", "i18next-browser-languagedetector": "^6.1.4", "i18next-xhr-backend": "3.2.2", "jquery": "^3.6.0", "jsonwebtoken": "8.5.1", "moment": "^2.29.3", "nouislider": "^15.5.0", "nouislider-react": "^3.4.1", "postcss-rtl": "^1.5.0", "prismjs": "^1.28.0", "prop-types": "^15.8.1", "rc-input-number": "^7.3.4", "react": "^18.1.0", "react-apexcharts": "^1.4.0", "react-chartjs-2": "^4.1.0", "react-contexify": "5.0.0", "react-copy-to-clipboard": "^5.1.0", "react-country-flag": "^3.0.2", "react-data-table-component": "^7.5.2", "react-dom": "^18.1.0", "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^14.2.1", "react-feather": "~2.0.3", "react-flatpickr": "^3.10.12", "react-hook-form": "^7.31.1", "react-hot-toast": "2.2.0", "react-i18next": "^11.16.9", "react-paginate": "^8.1.3", "react-perfect-scrollbar": "^1.5.8", "react-player": "^2.10.1", "react-rating": "2.0.5", "react-redux": "^8.0.1", "react-router-dom": "^6.3.0", "react-scripts": "4.0.2", "react-select": "^5.3.2", "react-shepherd": "3.3.6", "react-slidedown": "^2.4.7", "react-sortablejs": "6.0.0", "reactstrap": "9.0.1", "recharts": "^2.1.9", "redux": "^4.2.0", "redux-debounced": "0.5.0", "redux-thunk": "^2.4.1", "sass": "^1.51.0", "screenfull": "5.0.2", "sortablejs": "^1.12.0", "styled-components": "^5.3.5", "sweetalert2": "^11.4.14", "sweetalert2-react-content": "^5.0.0", "swiper": "^8.1.5", "wnumb": "1.2.0", "xlsx": "^0.18.5", "yarn": "^1.22.18", "yup": "^0.32.11" }, "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject", "format": "prettier --write \"src/**/*.js\"", "lint": "eslint src/**/*.js src/**/*.js", "lint:fix": "eslint src/**/*.js --fix" }, "eslintConfig": { "extends": "react-app" }, "devDependencies": { "@types/sortablejs": "^1.10.6", "eslint": "^8.15.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-react": "^7.29.4", "prettier": "^2.6.2", "sass-loader": "^12.6.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "resolutions": { "react-error-overlay": "6.0.9", "react-scripts/postcss-preset-env/postcss-custom-properties": "^10.0.0" }, "homepage": "" }

craco.config.js ` const path = require('path')

module.exports = { reactScriptsVersion: 'react-scripts', style: { sass: { loaderOptions: { sassOptions: { includePaths: ['node_modules', 'src/assets'] } } }, postcss: { plugins: [require('postcss-rtl')()] } }, babel: { plugins: [["@babel/plugin-proposal-private-methods", { "loose": true }]] }, webpack: { alias: { '@src': path.resolve(dirname, 'src'), '@assets': path.resolve(dirname, 'src/@core/assets'), '@components': path.resolve(dirname, 'src/@core/components'), '@layouts': path.resolve(dirname, 'src/@core/layouts'), '@store': path.resolve(dirname, 'src/redux'), '@styles': path.resolve(dirname, 'src/@core/scss'), '@configs': path.resolve(dirname, 'src/configs'), '@utils': path.resolve(dirname, 'src/utility/Utils'), '@hooks': path.resolve(__dirname, 'src/utility/hooks') } } } `

jacogr commented 2 years ago

Asked on SE.

FedeC87p commented 2 years ago

with yarn update and some changes, I have resolt that problem. But i still have other problem:

./node_modules/@polkadot/api-derive/type/HeaderExtended.js Module not found: Can't resolve 'D:/repos/ecc....../node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classPrivateFieldLooseBase.js' in 'D:\repos\ecc......\node_modules\@polkadot\api-derive\type'

now I don't know what to check anymore. I always use that template with standard configurations and it never gave me problems with any other library

jacogr commented 2 years ago

This is the actual contents of the HeaderExtended.js file -

// Copyright 2017-2022 @polkadot/api-derive authors & contributors
// SPDX-License-Identifier: Apache-2.0
import { extractAuthor } from "./util.js";
export function createHeaderExtended(registry, header, validators, author) {
  // an instance of the base extrinsic for us to extend
  const HeaderBase = registry.createClass('Header');

  class Implementation extends HeaderBase {
    #author;

    constructor(registry, header, validators, author) {
      super(registry, header);
      this.#author = author || extractAuthor(this.digest, validators || []);
      this.createdAtHash = header === null || header === void 0 ? void 0 : header.createdAtHash;
    }
    /**
     * @description Convenience method, returns the author for the block
     */

    get author() {
      return this.#author;
    }

  }

  return new Implementation(registry, header, validators, author);
}

There is no classPrivateFieldLooseBase nor any babel runtime imports - that gets injected by the plugin you are using, e.g. babel-preset-react-app - it is not the actual API code.

FedeC87p commented 2 years ago

Ok, I'll try to use a different template. Thank you

polkadot-js-bot commented 2 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.

polkadot-js / api

Integrate @polkadot/api with Vuexy React Template #5144