如何在Expo Snack Dev中正确配置绝对路径导入？

问题分析 #

你遇到的module://src/src/libraries/storage.js路径重复错误，本质是Expo Snack的模块解析逻辑与本地React Native项目不同，加上Babel插件冲突、配置不当导致的。以下是具体解决步骤：

1. 清理冲突的Babel插件 #

同时使用babel-plugin-root-import和module-resolver会导致路径解析冲突，保留module-resolver即可（兼容性更好）。修改babel.config.js如下：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@': './src',
            libraries: './src/libraries',
            components: './src/components',
            assets: './assets'
          },
        },
      ],
    ],
  };
};

2. 在Snack中添加依赖 #

Expo Snack默认不包含babel-plugin-module-resolver，需要手动添加：

• 打开Snack项目的「Dependencies」面板
• 搜索babel-plugin-module-resolver并添加到项目中

3. 使用正确的导入方式 #

根据配置的别名，选择以下任一导入格式：

// 方式1：使用@别名指向src根目录
import {saveData, getData} from '@/libraries/storage';

// 方式2：直接使用配置的libraries别名
import {saveData, getData} from 'libraries/storage';

4. 关键注意事项 #

• 不要使用以/开头的导入：Expo Snack的模块根目录就是你项目的文件根，/src/...会被解析为模块根/src/...，导致路径重复。
• 重启预览：修改babel.config.js后，刷新Snack页面或重启预览，确保配置生效。
• 检查文件路径：确认src/libraries/storage.js文件存在，文件名大小写与导入语句一致（Snack文件系统区分大小写）。

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