ShaderMaterial with shadows doesn't compile after threejs v0.118.0

Question

Followed this example but the vertex shader doesn't compile after threejs v0.118.0: https://codesandbox.io/s/shader-light-shadow-experiments-forked-5e14lh

You can test this in codesandbox by selecting different three versions in the dependencies section on the sidebar. Error msg in printed in console:

THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog Vertex shader is not compiled.
THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: 0:197: 'transformedNormal' : undeclared identifier
ERROR: 0:197: 'inverseTransformDirection' : no matching overloaded function found
ERROR: 0:197: '=' : dimension mismatch
ERROR: 0:197: '=' : cannot convert from 'const mediump float' to 'highp 3-component vector of float'

Checked the migration guide for r117 -> r118 but could not figure out how to fix it. https://github.com/mrdoob/three.js/wiki/Migration-Guide#r117--r118

Answer 1

Error is:

ERROR: 0:199: 'transformedNormal' : undeclared identifier
ERROR: 0:199: 'inverseTransformDirection' : no matching overloaded function found

To relsolve it, you need to add normal definition to your vertex shader. The following code fixes your case.

    #include <common>
    #include <fog_pars_vertex>
    #include <shadowmap_pars_vertex>
    void main() {
      #include <begin_vertex>
      #include <beginnormal_vertex>     // Defines objectNormal
      #include <project_vertex>
      #include <worldpos_vertex>
      #include <defaultnormal_vertex>   // Defines transformedNormal
      #include <shadowmap_vertex>
      #include <fog_vertex>
    }