CODEWITHSUNDEEP
reactjsnpmbuild
Anne
Anne

Reputation: 131

npm run build - Failed to compile - Cannot read property 'toLowerCase' of undefined

When using npm run build in my react app (create-react-app), it fails to compile and gives me the message Cannot read property 'toLowerCase' of undefined.

I am not using toLowerCase in my app and figured the only place where this is used is in the script : node_modules/react-scripts/scripts/build.js in this piece of code: 

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')));
}

What seems strange to me is that even there, it should not even give me Cannot read property 'toLowerCase' of undefined because if processe.env.CI was undefined it should read the first conditional statement as false-y and not even read processe.env.CI.toLowerCase. Also I have tried deleting this whole section of code and I get the same error. I have another react-app and the npm run build command works just fine, so I am really at loss wondering where I should even look for the answer.

Upvotes: 5

Views: 3048

Answers (4)

Tony Rude
Tony Rude

Reputation: 31

I had the same problem because of "important" at border-width:

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

        &:after {
            display: block;
        }
    }
}

In my case error message was:

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

so i was able to find an exact file & row

Upvotes: 3

Dimitri Kopriwa
Dimitri Kopriwa

Reputation: 14353

I had the same issue cause with !important being used 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;
            }
        }
    }

It could be fixed with :


    .form-checkbox,
    .form-radio {

        input {

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

Or by settings the variable check-checked-inverse.

Upvotes: 1

Anne
Anne

Reputation: 131

Ok, this is very weird but here is what my problem was: 

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

I had a typo for my margin value, and this simple bug was what was blocking the wole thing and giving me a toLowerCase issue!!!!

I would have never guessed !

Upvotes: 6

jden
jden

Reputation: 2288

I am not using toLowerCase in my app

Well you clearly are when calling build.js.

Either way, in an if() statement, each individual statement will be tested. It won't "break out" if say the first fails. As you have not set the environment property 'CI' then this if statement will always fails as process.env.CI will always be undefined/null. .toLowerCase() is a method that will NOT work on nulls.

Upvotes: 0

Related Questions