配置{"loose": true}仍无法解决classProperties实验语法未启用报错

Let's walk through targeted steps to resolve this issue—you already have the required plugin installed, so we'll focus on making sure it's being properly recognized and used by Babel.

Possible Causes & Step-by-Step Solutions #

1. Force Babel to load your .babelrc configuration #

Your current build command should pick up the root .babelrc by default, but sometimes ambiguity (like hidden config conflicts or directory structure quirks) can prevent this. Let's explicitly specify the config file in your build script to eliminate this variable:

Update the build script in your package.json:

"build": "./node_modules/.bin/babel src --out-file index.js --config-file ./.babelrc"

2. Sync Babel dependency versions #

Mismatched versions between @babel/core and related plugins often cause unexpected failures. Your @babel/core is v7.4.5, but @babel/plugin-proposal-class-properties is v7.4.4. Let's align them to the same version:

1. Uninstall the current plugin:

npm uninstall @babel/plugin-proposal-class-properties

2. Install the matching version:

npm install --save-dev @babel/plugin-proposal-class-properties@7.4.5

For full consistency, you can also update @babel/preset-react to v7.4.5 to match your core version.

3. Clean cached artifacts and reinstall dependencies #

Corrupted node modules or cached build files can block the plugin from working correctly. Run these commands to start fresh:

rm -rf node_modules
rm package-lock.json
npm install
npm run build

4. Validate your class property syntax #

Double-check that your code uses valid experimental class property syntax (the exact syntax Babel needs to transpile):

// Correct class property syntax
class FetchModule {
  baseURL = 'https://api.example.com'; // This is the experimental syntax requiring the plugin

  fetchData() {
    // Your axios fetch logic here
  }
}

Typos or invalid variations of this syntax might bypass the plugin's transpilation.

5. Confirm .babelrc placement and validity #

Ensure your .babelrc lives in your project's root directory (same level as package.json) and has valid JSON syntax (no missing commas or curly braces). Your current .babelrc structure looks correct, but a quick manual check can rule out hidden syntax errors.

After completing these steps, run your build command again. The error should be resolved once Babel properly loads the class properties plugin and transpiles the experimental syntax.

内容的提问来源于stack exchange，提问作者BARNOWL