Gradle $projectDir属性报错及React组件导入警告解决方案咨询

一、修复Gradle中$projectDir属性错误 #

你当前的build.gradle写法有误，Groovy中无法直接以[$projectDir/src/main/resources]的形式引用projectDir属性，正确写法有以下几种：

写法1：双引号插值 + file()方法 #

sourceSets {
   main {
      resources { 
          srcDirs = [file("${projectDir}/src/main/resources")]
      }
   }
}

写法2：调用projectDir的dir方法 #

sourceSets {
   main {
      resources { 
          srcDirs = projectDir.dir('src/main/resources')
      }
   }
}

写法3：简化的srcDir语法 #

sourceSets {
   main {
      resources { 
          srcDir "${projectDir}/src/main/resources"
      }
   }
}

原因说明：projectDir是Gradle内置的Project对象属性，无需加$前缀；若要拼接路径，需在双引号字符串中用${}插值，再通过file()转换为Gradle可识别的文件对象。

二、修复React项目“import component outside src/ directory”警告 #

Create React App默认通过ModuleScopePlugin限制仅能从src/目录导入文件，可通过以下方式解除限制：

方案1：使用react-app-rewired修改配置 #

1. 安装依赖：

npm install react-app-rewired --save-dev

2. 在项目根目录创建config-overrides.js文件：

module.exports = function override(config) {
  // 移除限制导入范围的插件
  config.resolve.plugins = config.resolve.plugins.filter(
    plugin => plugin.constructor.name !== 'ModuleScopePlugin'
  );
  return config;
};

3. 修改package.json中的scripts命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

方案2：使用craco（推荐，更灵活） #

1. 安装craco：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js文件：

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 移除ModuleScopePlugin
      webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
        plugin => plugin.constructor.name !== 'ModuleScopePlugin'
      );
      // 可选：添加别名简化导入路径
      webpackConfig.resolve.alias = {
        ...webpackConfig.resolve.alias,
        '@pages': path.resolve(__dirname, 'frontend/pages')
      };
      return webpackConfig;
    }
  }
};

3. 修改package.json中的scripts命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

方案3：eject项目（不推荐） #

运行npm run eject暴露所有配置文件，然后找到config/webpack.config.js中的ModuleScopePlugin并移除。此操作不可逆，会增加后续维护成本，谨慎使用。

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