SyntaxError: src/types/active-pool-contract/ActivePoolContract.ts: TypeScript ‘declare’ fields must first be transformed by @babel/plugin-transform-typescript.
If you have already enabled that plugin (or ‘@babel/preset-typescript’), make sure that it runs before any plugin related to additional class features:
This is the package.json
{
“dependencies”: {
“@babel/core”: “^7.16.0”,
“@babel/plugin-proposal-private-property-in-object”: “^7.21.11”,
“babel-loader”: “^8.2.3”,
“babel-plugin-named-asset-import”: “^0.3.8”,
“babel-preset-react-app”: “^10.0.1”,
“@chakra-ui/icons”: “^2.0.18”,
“@chakra-ui/react”: “^2.5.3”,
“@emotion/react”: “^11.0.0”,
“@emotion/styled”: “^11.0.0”,
“@fuel-ui/css”: “^0.23.3”,
“@fuel-ui/react”: “^0.23.3”,
“@fuel-wallet/react”: “^0.16.1”,
“@fuel-wallet/sdk”: “^0.16.1”,
“@testing-library/jest-dom”: “^5.16.4”,
“@testing-library/react”: “^13.0.1”,
“@testing-library/user-event”: “^14.1.0”,
“@types/jest”: “^28.1.1”,
“@types/node”: “^12.0.0”,
“@types/react”: “^18.0.9”,
“@types/react-dom”: “^18.0.4”,
“framer-motion”: “^6.2.9”,
“fuels”: “0.94.6”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-icons”: “^3.0.0”,
“react-router-dom”: “^6.4.3”,
“react-scripts”: “5.0.1”,
“typescript”: “^4.6.3”,
“web-vitals”: “^2.1.4”
},
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},
“eslintConfig”: {
“extends”: “react-app”
},
“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
},
“devDependencies”: {
“@babel/core”: “^7.16.0”,
“babel-preset-react-app”: “^10.0.1”,
“@babel/plugin-proposal-class-properties”: “^7.18.6”,
“@babel/plugin-proposal-decorators”: “^7.24.7”,
“@babel/plugin-proposal-private-methods”: “^7.18.6”,
“@babel/plugin-transform-runtime”: “^7.25.4”,
“@babel/plugin-transform-typescript”: “^7.25.2”,
“@babel/preset-typescript”: “^7.24.7”,
“@types/react-router-dom”: “^5.3.3”
},
“plugins”: [
“@babel/plugin-transform-typescript”,
{
“allowDeclareFields”: true
},
“@babel/plugin-syntax-dynamic-import”
],
“babel”: {
“presets”: [
“react-app”
]
}
}
And this is the babel.config.js
module.exports = {
presets: [
‘@babel/preset-typescript’,
[‘@babel/preset-env’, { targets: { node: ‘current’ } }],
‘module:metro-react-native-babel-preset’,
],
plugins: [
[‘@babel/plugin-transform-typescript’, { allowDeclareFields: true }],
‘@babel/plugin-proposal-class-properties’,
‘@babel/plugin-proposal-private-methods’,
‘@babel/plugin-proposal-decorators’,
],
};
This issue start when bumping fuel packages
Can you share the output for the fuelup show?
forc : 0.49.3
- forc-client
- forc-deploy : 0.49.3
- forc-run : 0.49.3
- forc-crypto : 0.49.3
- forc-debug : Could not parse version (empty string, expected a semver version)
- forc-doc : 0.49.3
- forc-explore : 0.28.1
- forc-fmt : 0.49.3
- forc-lsp : 0.49.3
- forc-tx : 0.49.3
- forc-wallet : 0.4.3
fuel-core : 0.22.4
fuel-core-keygen : 0.22.4
forc : 0.54.0
forc-wallet : 0.54.0
@diyahir at face value it looks like you’ve got a lot of conflicting babel configuration, then a problem has been triggered by a dep upgrade. I’d firstly reccommend opting either for configuring via a babel config file (babel.config.js) or via your package.json. AFAIK you should only need @babel/preset-typescript, this ships with the transform plugin.
But do you have a minimal repro or a link to the repo and we can assist?
I think it’ll be unrelated to this problem, but your fuelup versions are very out of date. I’d highly reccomend upgrading to the latest toolchain.
This is actually just because the webapp repo doesn’t have a fueltoolchain but contract repo uses the latest fuelup, will update my default one for good measure
Here is a minimal repoduction of the error:
There isn’t good documentation on this babel error so I was throwing every suggestion at the wall
There’s a comment here about commenting out this portion to verify that the page actually builds without the fuel import
Hey @diyahir 
Looks like this is a known issue with react-scripts.
I’d recommend switching out the build tooling to Vite - you can use create-fuels to bootstrap a Vite project quickly.
If you wish to continue using react-scripts, then using CRACO to add the missing plugin to the build seems resolve this (see config below).
// craco.config.js
const {
loaderByName,
getLoader,
} = require("@craco/craco");
module.exports = {
webpack: {
configure: function (webpackConfig) {
const babelLoader = getLoader(
webpackConfig,
loaderByName("babel-loader")
).match.loader;
babelLoader.options.presets.push([
"@babel/preset-typescript",
{allowDeclareFields: true},
]);
return webpackConfig;
}
}
};
haha we’ve all been there