npm run build - 编译失败 - 无法读取未定义的属性“toLowerCase”

Posted 2023-02-22

【中文标题】npm run build - 编译失败 - 无法读取未定义的属性“toLowerCase”

【英文标题】：npm run build - Failed to compile - Cannot read property 'toLowerCase' of undefined

【发布时间】：2019-08-08 06:50:36

【问题描述】：

在我的 react 应用 (create-react-app) 中使用 npm run build 时， 它无法编译并给我消息Cannot read property 'toLowerCase' of undefined。

我没有在我的应用程序中使用toLowerCase，并认为唯一使用它的地方是在脚本中：node_modules/react-scripts/scripts/build.js 在这段代码中：

if (
  process.env.CI &&
  (typeof process.env.CI !== 'string' ||
    process.env.CI.toLowerCase() !== 'false') &&
  messages.warnings.length
) 
  console.log(
    chalk.yellow(
      '\nTreating warnings as errors because process.env.CI = true.\n' +
      'Most CI servers set it automatically.\n'
    )
  );
  return reject(new Error(messages.warnings.join('\n\n')));

对我来说奇怪的是，即使在那里，它也不应该给我Cannot read property 'toLowerCase' of undefined，因为如果processe.env.CI 未定义，它应该将第一个条件语句读取为false-y，甚至不读取processe.env.CI.toLowerCase。 我也试过删除这整个代码部分，我得到了同样的错误。 我有另一个 react-app 并且 npm run build 命令工作得很好，所以我真的很茫然想知道我应该在哪里寻找答案。

【问题讨论】：

有趣。这是您整个项目中唯一出现的toLowerCase？

是的！奇怪的是我没有更改这个 build.js 文件，因为它是用 create-react-app 构建的。而且我之前在其他时候使用过它，在部署我的应用程序时，它从来没有出现过问题

【参考方案1】：

好的， 这很奇怪，但这是我的问题：

.collage
margin: ;
display: flex;
flex-wrap:wrap;
justify-content: space-between;
align-items: stretch;

我的保证金值有一个错字，这个简单的错误是什么阻止了这件事并给了我一个toLowerCase 问题！！！！

我绝对猜不到！

【讨论】：

你是怎么找到那个bug的；你在日志中看到了什么或类似的东西吗？

【参考方案2】：

由于边框宽度处的“important”，我遇到了同样的问题：

&.checkbox-accent 
    > span 
        border-width: get($checkbox-config, types, accent, borderWidth) !important;
        border-style: solid !important;
        background-color: transparent !important;

        &:after 
            display: block;
        
    

在我的情况下，错误消息是：

Cannot read property 'toLowerCase' of undefined
CompileError: Begins at CSS selector .checkbox.checkbox-accent>span

所以我能够找到一个确切的文件和行

【讨论】：

当时你的解决方法是什么？

我已经删除了“！important”，仅此而已。幸运的是，那个地方实际上并不需要。

【参考方案3】：

我没有在我的应用中使用 toLowerCase

你显然是在调用 build.js 时。

无论哪种方式，在 if() 语句中，每个单独的语句都将被测试。如果说第一个失败，它不会“爆发”。 由于您尚未设置环境属性“CI”，因此此 if 语句将始终失败，因为 process.env.CI 将始终为 undefined/null。 .toLowerCase() 是一种不适用于 null 的方法。

【讨论】：

是的，如果第一个失败，它将“爆发”。如果没有设置CI，则process.env.CI为undefined，其他的不勾选。

很公平。也许是我更习惯 Java。对不起。

【参考方案4】：

!important 被使用 where variable where undefined:

    .form-checkbox,
    .form-radio 

        input 

            &:checked 
                background-color: color-bg(check-checked-inverse) !important;
                border-color: color-bg(check-checked-inverse) !important;
            
        
    

可以用 :

解决

    .form-checkbox,
    .form-radio 

        input 

            &:checked 
                background-color: color-bg(check-checked-inverse);
                border-color: color-bg(check-checked-inverse);
            
        
    

或者通过设置变量check-checked-inverse。