I've installed the npm package @yaireo/tagify v4.16.4 however when I try to start my react app I get the following error:
./node_modules/@yaireo/tagify/dist/tagify.js 594:33
Module parse failed: Unexpected token (594:33)
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.
| headerRef = this.dropdown.getHeaderRef(),
| footerRef = this.dropdown.getFooterRef();
> newHeaderElem && headerRef?.parentNode.replaceChild(newHeaderElem, headerRef);
| newFooterElem && footerRef?.parentNode.replaceChild(newFooterElem, footerRef);
| },
My package.json looks like this:
{
"name": "portal_service",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"@ant-design/compatible": "1.1.0",
"@ant-design/icons": "4.7.0",
"@babel/plugin-proposal-decorators": "7.16.5",
"@casl/ability": "3.4.0",
"@casl/react": "1.0.4",
"@craco/craco": "6.4.3",
"@fortawesome/fontawesome-svg-core": "1.2.29",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/pro-duotone-svg-icons": "5.13",
"@fortawesome/pro-light-svg-icons": "5.13",
"@fortawesome/pro-regular-svg-icons": "5.13",
"@fortawesome/pro-solid-svg-icons": "5.13",
"@fortawesome/react-fontawesome": "0.1.11",
"@okta/okta-react": "3.0.1",
"@react-hook/resize-observer": "1.2.5",
"@tisoap/react-flow-smart-edge": "1.0.1",
"@yaireo/tagify": "4.13.1",
"ant-design-pro": "2.3.2",
"antd": "4.16.13",
"antd-img-crop": "3.16.0",
"bootstrap": "4.6.1",
"chart.js": "2.8.0",
"chartjs-plugin-zoom": "0.7.0",
"firebase": "9.6.1",
"google-map-react": "1.1.7",
"jsoneditor": "9.7.4",
"jsoneditor-react": "3.1.2",
"jsonwebtoken": "8.5.1",
"lodash": "4.17.21",
"mobx": "5.15.7",
"mobx-react": "5.4.4",
"mobx-react-lite": "1.5.2",
"moment": "2.24.0",
"moment-timezone": "0.5.34",
"papaparse": "5.3.1",
"prop-types": "15.7.2",
"rc-progress": "2.3.0",
"react": "16.14.0",
"react-beautiful-dnd": "13.0.0",
"react-chartjs-2": "2.7.4",
"react-circle-flags": "^0.0.17",
"react-click-outside": "3.0.1",
"react-cropper": "2.1.8",
"react-dom": "16.14.0",
"react-flow-renderer": "10.0.4",
"react-google-login": "5.1.20",
"react-intl": "2.8.0",
"react-onclickoutside": "6.12.1",
"react-phone-number-input": "3.1.44",
"react-quill": "1.3.3",
"react-router-dom": "5.3.0",
"react-scripts": "4.0.3",
"react-select": "5.2.2",
"react-top-loading-bar": "1.2.0",
"reactstrap": "7.1.0",
"slugify": "1.4.0",
"styled-components": "5.3.3",
"superagent": "7.0.1",
"superagent-promise": "1.1.0",
"uuid": "8.3.2"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "craco start",
"start:withMockServer": "npx concurrently --kill-others 'yarn run mock-server' 'yarn start'",
"build": "craco build",
"test": "craco test --env=jsdom",
"test:withLiveCoverage": "npx concurrently --kill-others 'yarn test --coverage --watchAll' 'npx live-server coverage/lcov-report'",
"eject": "react-scripts eject",
"mock-server": "npx json-server src/utils/mockData.js --port 4000 --watch --delay 1500",
"lint": "eslint ./src",
"lint-fix": "eslint ./src --fix"
},
"devDependencies": {
"babel-plugin-styled-components": "2.0.2",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"enzyme-to-json": "3.6.2",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.3.0",
"faker": "4.1.0",
"husky": "1.3.1",
"jest-styled-components": "6.3.4",
"json-server": "0.14.2",
"lint-staged": "8.2.1",
"mobx-react-devtools": "6.1.1",
"react-error-overlay": "6.0.9",
"source-map-explorer": "1.8.0"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,json,css}": [
"git add"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"cracoConfig": "config/craco.config.js",
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
We are using craco to run our react app. The craco config looks like this:
module.exports = {
babel: {
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['babel-plugin-styled-components'],
],
},
// Disables react-scripts's own ESLint from running on every compilation. This prevents a very long compilation time.
// We don't need react-scripts to run its own ESLint every time, because we have our own ESLint configuration to use with "npm run lint"
eslint: {
enable: false,
},
};
Does anyone know what I can do to fix the error? We've tried different versions of the npm package but all of them throw a similar error. We really need this package for a feature I am working on so there is no option for an alternative.