#reactjs #npm #build
#reactjs #npm #сборка
Вопрос:
При использовании npm run build в моем приложении react (create-react-app) не удается скомпилировать и выдает мне сообщение Cannot read property 'toLowerCase' of undefined .
Я не использую toLowerCase в своем приложении и понял, что единственное место, где это используется, — в скрипте: node_modules/react-scripts/scripts/build.js в этом фрагменте кода:
if (
process.env.CI amp;amp;
(typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') amp;amp;
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('nn')));
}
Что мне кажется странным, так это то, что даже там оно не должно даже выдавать мне, Cannot read property 'toLowerCase' of undefined потому что, если processe.env.CI значение не определено, оно должно считывать первый условный оператор как false-y и даже не читать processe.env.CI.toLowerCase .
Также я попытался удалить весь этот раздел кода и получаю ту же ошибку.
У меня есть другое react-приложение, и npm run build команда работает просто отлично, поэтому я действительно в недоумении, где мне вообще искать ответ.
Комментарии:
1. Интересно. Я это единственное появление
toLowerCaseво всем вашем проекте?2. Да, это так! Что также странно, так это то, что я не изменил это build.js файл в том виде, в каком он создан с помощью create-react-app. И я использовал его раньше, при развертывании моего приложения, и с ним никогда не возникало проблем
Ответ №1:
Хорошо, это очень странно, но вот в чем заключалась моя проблема:
.collage{
margin: ;
display: flex;
flex-wrap:wrap;
justify-content: space-between;
align-items: stretch;}
У меня была опечатка для моего значения margin, и эта простая ошибка была тем, что блокировало работу wole и вызывало у меня toLowerCase проблему!!!!
Я бы никогда не догадался!
Комментарии:
1. Как вы обнаружили эту ошибку; вы видели что-нибудь в журналах или что-то в этом роде?
Ответ №2:
У меня была такая же проблема из-за «важно» на ширине границы:
amp;.checkbox-accent {
> span {
border-width: get($checkbox-config, types, accent, borderWidth) !important;
border-style: solid !important;
background-color: transparent !important;
amp;:after {
display: block;
}
}
}
В моем случае сообщение об ошибке было:
Cannot read property 'toLowerCase' of undefined
CompileError: Begins at CSS selector .checkbox.checkbox-accent>span
итак, я смог найти точный файл и строку
Комментарии:
1. В чем именно тогда заключалось ваше исправление?
2. Я удалил «!важно», и все. К счастью, в этом месте это было на самом деле необязательно.
Ответ №3:
У меня была та же проблема, что и при !important использовании переменной where, где undefined :
.form-checkbox,
.form-radio {
input {
amp;:checked {
background-color: color-bg(check-checked-inverse) !important;
border-color: color-bg(check-checked-inverse) !important;
}
}
}
Это можно исправить с помощью :
.form-checkbox,
.form-radio {
input {
amp;:checked {
background-color: color-bg(check-checked-inverse);
border-color: color-bg(check-checked-inverse);
}
}
}
Или путем настройки переменной check-checked-inverse .
Ответ №4:
Я не использую toLowerCase в своем приложении
Ну, вы явно при вызове build.js.
В любом случае, в инструкции if () будет проверяться каждая отдельная инструкция. Это не «вырвется», если, скажем, первый сбой. Поскольку вы не установили свойство среды ‘CI’, то этот оператор if всегда будет завершаться ошибкой как process.env.CI всегда будет неопределенным / нулевым. .toLowerCase() — это метод, который не будет работать с нулевыми значениями.
Комментарии:
1. Да, оно «разорвется», если произойдет сбой первого. Если
CIне установлено, тоprocess.env.CIбудетundefined, а другие не будут проверены.2. Достаточно справедливо. Возможно, это я больше привык к Java. Извините.