使用styled-components报错及Spacing.js编译导入异常问题咨询

我来帮你梳理下遇到的这两个问题，大概率是版本兼容、配置冲突或者文件本身的小疏漏导致的，给你一步步排查的方案：

先明确你的问题 #

1. 使用styled-components时抛出错误：cannot read withConfig of undefined
2. Spacing.js文件编译时提示styled-components导入未定义，但其他文件以相同方式导入却正常；即使移除styled-components的Babel插件，类似错误依然存在

当前你的.babelrc配置（补全了未写完的插件部分，推测是transform-class-properties）：

{ 
  "presets": [["es2015", { "modules": false }], "react-native"], 
  "plugins": [ 
    ["styled-components", { "displayName": true }], 
    "react-hot-loader/babel", 
    "react-native-web", 
    "transform-decorators-legacy", 
    "transform-class-properties" 
  ] 
}

分步排查与解决 #

1. 先检查Spacing.js本身的问题 #

别小看细节，有时候小错误会引发奇怪的导入报错：

• 确认导入语句完全正确：是不是写的import styled from 'styled-components'？有没有拼写错误、误写成相对路径？
• 检查文件语法：有没有未闭合的括号、多余/缺失的逗号？这类语法问题会让模块解析失败，进而让styled看起来像未定义

2. 解决cannot read withConfig of undefined错误 #

这个错误几乎都是版本不兼容导致的：

• 核对styled-components和babel-plugin-styled-components的版本匹配度：
  • 如果你用的是styled-components v5及以上，babel插件得是v1.10.0+；如果是v4版本，插件对应v1.8.0+即可
  • 执行npm list styled-components babel-plugin-styled-components查看版本，不匹配的话直接升级到对应版本
• 排查多版本冲突：项目子依赖可能偷偷安装了另一个版本的styled-components，导致冲突。执行npm ls styled-components查看，如果有多个版本，清理后重装：

  npm uninstall styled-components
  rm -rf node_modules package-lock.json
  npm install styled-components
  

3. 调整Babel配置，解决跨平台冲突 #

你的配置里同时用了react-native和react-native-web，很可能存在预设/插件顺序冲突：

• 把react-native-web预设移到react-native前面，避免解析优先级问题，同时替换已废弃的es2015预设为@babel/preset-env：

  {
    "presets": [
      ["@babel/preset-env", { "modules": false }],
      "react-native-web",
      "react-native"
    ],
    "plugins": [
      ["styled-components", { "displayName": true }],
      "react-hot-loader/babel",
      "transform-decorators-legacy",
      "@babel/plugin-proposal-class-properties"
    ]
  }
  

• 如果你是跨平台开发，建议用环境变量区分原生和Web的Babel配置，避免两边的规则互相干扰

4. 检查React Native打包工具配置 #

如果是React Native项目，检查metro.config.js（旧版是rn-cli.config.js），确保styled-components没有被排除在打包之外，metro能正确解析它。

总结执行顺序 #

先查Spacing.js的语法和导入，再核对版本兼容性，接着调整Babel配置，最后检查打包工具，按这个顺序来大概率能解决问题。

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