Community Learn Tools Library Leisure
search
English
Support for experimental syntax "decorators" is not currently enabled (8:3)
P粉428986744
P粉428986744 2023-08-29 21:09:30
0
1
448
<p>我正在尝试在我的react.js应用程序中使用<code>@field</code>。该应用程序是从 Themeforest 购买的主题。我面临的错误是这样的</p> <pre class="brush:php;toolbar:false;">ERROR in ./src/watermelon/model/Staff.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\projects\siloc-react-laravel\siloc-react\src\watermelon\model\Staff.js: Support for the experimental syntax 'decorators' isn't currently enabled (8:3): 6 | 7 | > 8 | @field('name') name; | ^ 9 | // @action async getStaff() 10 | // { 11 | // return { Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.</pre> <p>我使用的文件是这个 <code>Staff.js</code></p> <pre class="brush:php;toolbar:false;">import { Model } from '@nozbe/watermelondb'; import { field } from '@nozbe/watermelondb/decorators'; export default class Staff extends Model { static table = 'staff'; @field('name') name; // @action async getStaff() // { // return { // id: this.id, // name: this.name // } // } }</pre> <p>我在互联网上看到的解决方案是在 <code>.babelrc</code> 中添加这些行。但就我而言，这些似乎是在 <code>package.json</code> 文件中完成的配置，因为我没有 <code>.babelrc</code> 文件</p> <pre class="brush:php;toolbar:false;">&quot;plugins&quot;: [ [ &quot;@babel/plugin-proposal-decorators&quot;, { &quot;legacy&quot;: true } ], [ &quot;@babel/plugin-proposal-class-properties&quot;, { &quot;loose&quot;: true } ], [ &quot;@babel/plugin-transform-runtime&quot;, { &quot;helpers&quot;: true, &quot;regenerator&quot;: true } ] ]</pre> <p>这是我的整个 <code>package.json</code> 文件</p> <pre class="brush:php;toolbar:false;">{ &quot;name&quot;: &quot;able-pro-material-react&quot;, &quot;version&quot;: &quot;9.1.0&quot;, &quot;private&quot;: true, &quot;dependencies&quot;: { &quot;@auth0/auth0-spa-js&quot;: &quot;^2.0.5&quot;, &quot;@babel/plugin-syntax-decorators&quot;: &quot;^7.22.3&quot;, &quot;@date-io/date-fns&quot;: &quot;^2.16.0&quot;, &quot;@date-io/dayjs&quot;: &quot;^2.16.0&quot;, &quot;@date-io/luxon&quot;: &quot;^2.16.1&quot;, &quot;@date-io/moment&quot;: &quot;^2.16.1&quot;, &quot;@emotion/cache&quot;: &quot;^11.11.0&quot;, &quot;@emotion/react&quot;: &quot;^11.11.0&quot;, &quot;@emotion/styled&quot;: &quot;^11.11.0&quot;, &quot;@fullcalendar/common&quot;: &quot;^5.11.5&quot;, &quot;@fullcalendar/core&quot;: &quot;^6.1.8&quot;, &quot;@fullcalendar/daygrid&quot;: &quot;^6.1.8&quot;, &quot;@fullcalendar/interaction&quot;: &quot;^6.1.8&quot;, &quot;@fullcalendar/list&quot;: &quot;^6.1.8&quot;, &quot;@fullcalendar/react&quot;: &quot;^6.1.8&quot;, &quot;@fullcalendar/timegrid&quot;: &quot;^6.1.8&quot;, &quot;@fullcalendar/timeline&quot;: &quot;^6.1.8&quot;, &quot;@hello-pangea/dnd&quot;: &quot;^16.2.0&quot;, &quot;@mui/base&quot;: &quot;^5.0.0-beta.2&quot;, &quot;@mui/lab&quot;: &quot;^5.0.0-alpha.131&quot;, &quot;@mui/material&quot;: &quot;^5.13.2&quot;, &quot;@mui/system&quot;: &quot;^5.13.2&quot;, &quot;@mui/x-date-pickers&quot;: &quot;^6.5.0&quot;, &quot;@mui/x-date-pickers-pro&quot;: &quot;^6.5.0&quot;, &quot;@nozbe/watermelondb&quot;: &quot;^0.26.0&quot;, &quot;@react-pdf/renderer&quot;: &quot;^3.1.9&quot;, &quot;@reduxjs/toolkit&quot;: &quot;^1.9.5&quot;, &quot;@svgr/webpack&quot;: &quot;8.0.1&quot;, &quot;@testing-library/react&quot;: &quot;^14.0.0&quot;, &quot;amazon-cognito-identity-js&quot;: &quot;^6.2.0&quot;, &quot;apexcharts&quot;: &quot;^3.40.0&quot;, &quot;autosuggest-highlight&quot;: &quot;^3.3.4&quot;, &quot;axios&quot;: &quot;^1.4.0&quot;, &quot;axios-mock-adapter&quot;: &quot;^1.21.4&quot;, &quot;buffer&quot;: &quot;^6.0.3&quot;, &quot;chance&quot;: &quot;^1.1.11&quot;, &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;, &quot;crypto-js&quot;: &quot;^4.1.1&quot;, &quot;currency.js&quot;: &quot;^2.0.4&quot;, &quot;date-fns&quot;: &quot;^2.30.0&quot;, &quot;draft-js&quot;: &quot;^0.11.7&quot;, &quot;emoji-picker-react&quot;: &quot;^4.4.9&quot;, &quot;firebase&quot;: &quot;^9.22.1&quot;, &quot;formik&quot;: &quot;^2.2.9&quot;, &quot;framer-motion&quot;: &quot;^10.12.16&quot;, &quot;history&quot;: &quot;^5.3.0&quot;, &quot;iconsax-react&quot;: &quot;^0.0.8&quot;, &quot;immutability-helper&quot;: &quot;^3.1.1&quot;, &quot;jwt-decode&quot;: &quot;^3.1.2&quot;, &quot;lodash&quot;: &quot;^4.17.21&quot;, &quot;match-sorter&quot;: &quot;^6.3.1&quot;, &quot;notistack&quot;: &quot;^3.0.1&quot;, &quot;process&quot;: &quot;^0.11.10&quot;, &quot;prop-types&quot;: &quot;^15.8.1&quot;, &quot;react&quot;: &quot;^18.2.0&quot;, &quot;react-apexcharts&quot;: &quot;^1.4.0&quot;, &quot;react-app-rewired&quot;: &quot;^2.2.1&quot;, &quot;react-compare-slider&quot;: &quot;^2.2.0&quot;, &quot;react-copy-to-clipboard&quot;: &quot;^5.1.0&quot;, &quot;react-csv&quot;: &quot;^2.2.2&quot;, &quot;react-device-detect&quot;: &quot;^2.2.3&quot;, &quot;react-dnd&quot;: &quot;^16.0.1&quot;, &quot;react-dnd-html5-backend&quot;: &quot;^16.0.1&quot;, &quot;react-dnd-scrolling&quot;: &quot;^1.3.3&quot;, &quot;react-dnd-touch-backend&quot;: &quot;^16.0.1&quot;, &quot;react-dom&quot;: &quot;^18.2.0&quot;, &quot;react-draft-wysiwyg&quot;: &quot;^1.15.0&quot;, &quot;react-draggable&quot;: &quot;^4.4.5&quot;, &quot;react-dropzone&quot;: &quot;^14.2.3&quot;, &quot;react-fast-marquee&quot;: &quot;^1.6.0&quot;, &quot;react-google-recaptcha&quot;: &quot;^2.1.0&quot;, &quot;react-intersection-observer&quot;: &quot;^9.4.3&quot;, &quot;react-intl&quot;: &quot;^6.4.2&quot;, &quot;react-number-format&quot;: &quot;^5.2.2&quot;, &quot;react-organizational-chart&quot;: &quot;^2.2.1&quot;, &quot;react-quill&quot;: &quot;^2.0.0&quot;, &quot;react-redux&quot;: &quot;^8.0.5&quot;, &quot;react-router&quot;: &quot;^6.11.2&quot;, &quot;react-router-dom&quot;: &quot;^6.11.2&quot;, &quot;react-scripts&quot;: &quot;^5.0.1&quot;, &quot;react-slick&quot;: &quot;^0.29.0&quot;, &quot;react-spring&quot;: &quot;9.7.1&quot;, &quot;react-syntax-highlighter&quot;: &quot;^15.5.0&quot;, &quot;react-table&quot;: &quot;^7.8.0&quot;, &quot;react-table-sticky&quot;: &quot;^1.1.3&quot;, &quot;react-timer-hook&quot;: &quot;^3.0.6&quot;, &quot;react-to-print&quot;: &quot;^2.14.12&quot;, &quot;react-window&quot;: &quot;^1.8.9&quot;, &quot;react-zoom-pan-pinch&quot;: &quot;^3.0.7&quot;, &quot;react18-input-otp&quot;: &quot;^1.1.3&quot;, &quot;redux-persist&quot;: &quot;^6.0.0&quot;, &quot;simplebar&quot;: &quot;^6.2.5&quot;, &quot;simplebar-react&quot;: &quot;^3.2.4&quot;, &quot;slick-carousel&quot;: &quot;^1.8.1&quot;, &quot;stream-browserify&quot;: &quot;^3.0.0&quot;, &quot;stylis-plugin-rtl&quot;: &quot;^2.1.1&quot;, &quot;use-places-autocomplete&quot;: &quot;^4.0.0&quot;, &quot;util&quot;: &quot;^0.12.5&quot;, &quot;uuid&quot;: &quot;^9.0.0&quot;, &quot;web-vitals&quot;: &quot;^3.3.1&quot;, &quot;yup&quot;: &quot;^1.2.0&quot; }, &quot;scripts&quot;: { &quot;start&quot;: &quot;react-app-rewired start&quot;, &quot;build-stage&quot;: &quot;env-cmd -f .env.qa react-app-rewired build&quot;, &quot;build&quot;: &quot;react-app-rewired build&quot;, &quot;test&quot;: &quot;react-app-rewired test&quot;, &quot;eject&quot;: &quot;react-scripts eject&quot; }, &quot;eslintConfig&quot;: { &quot;extends&quot;: [ &quot;react-app&quot;, &quot;react-app/jest&quot; ] }, &quot;babel&quot;: { &quot;presets&quot;: [ &quot;@babel/preset-react&quot; ], &quot;plugins&quot;: [ [ &quot;@babel/plugin-proposal-decorators&quot;, { &quot;legacy&quot;: true } ], [ &quot;@babel/plugin-proposal-class-properties&quot;, { &quot;loose&quot;: true } ], [ &quot;@babel/plugin-transform-runtime&quot;, { &quot;helpers&quot;: true, &quot;regenerator&quot;: true } ] ] }, &quot;browserslist&quot;: { &quot;production&quot;: [ &quot;>0.2%&quot;, &quot;not dead&quot;, &quot;not op_mini all&quot; ], &quot;development&quot;: [ &quot;last 1 chrome version&quot;, &quot;last 1 firefox version&quot;, &quot;last 1 safari version&quot; ] }, &quot;devDependencies&quot;: { &quot;@babel/core&quot;: &quot;^7.22.1&quot;, &quot;@babel/eslint-parser&quot;: &quot;^7.21.8&quot;, &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.18.6&quot;, &quot;@babel/plugin-proposal-decorators&quot;: &quot;^7.22.3&quot;, &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.22.4&quot;, &quot;env-cmd&quot;: &quot;^10.1.0&quot;, &quot;eslint&quot;: &quot;^8.41.0&quot;, &quot;eslint-config-prettier&quot;: &quot;^8.8.0&quot;, &quot;eslint-config-react-app&quot;: &quot;7.0.1&quot;, &quot;eslint-plugin-flowtype&quot;: &quot;^8.0.3&quot;, &quot;eslint-plugin-import&quot;: &quot;^2.27.5&quot;, &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.7.1&quot;, &quot;eslint-plugin-prettier&quot;: &quot;^4.2.1&quot;, &quot;eslint-plugin-react&quot;: &quot;^7.32.2&quot;, &quot;eslint-plugin-react-hooks&quot;: &quot;^4.6.0&quot;, &quot;immutable&quot;: &quot;^4.3.0&quot;, &quot;prettier&quot;: &quot;^2.8.8&quot;, &quot;react-error-overlay&quot;: &quot;6.0.11&quot; } }</pre> <p>请指导我哪里做错了</p>
P粉428986744
P粉428986744

reply all(1)
P粉166779363
P粉1667793632023-08-30 18:13:24 1 floor

Try this: Install customize-cra through the package manager, then create the config-overrides.js file in the root directory where package.json is located and put the following code in it: 

const { addBabelPlugins, override } = require("customize-cra");
module.exports = override(
  ...addBabelPlugins(
    [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
    ]
  )
);

And remove babel configuration from package.json. You can move your configuration into config-overrides.js as suggested by customize-cra documentation. (https://github.com/arackaf/customize-cra/blob /HEAD/api.md)

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template