webgpu学习问题，遇到了create graphics pipeline state

在学习webgpu并渲染图像时发生create graphics pipeline state failed with E_INVALIDARG (0x80070057)错误，图像无法成功渲染。

html代码：

const pipeline = device.createRenderPipeline({
            // 管线布局配置
            layout: 'auto',
            // 顶点着色器配置
            vertex: {//顶点相关配置
                module: device.createShaderModule({code: vertex}),
                entryPoint: "main",
                buffers: [// 顶点所有的缓冲区模块设置
                    {//其中一个顶点缓冲区设置
                        arrayStride: 3*4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度
                        attributes: [{// 顶点缓冲区属性
                            shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
                            format: "float32x3",//格式：loat32x3表示一个顶点数据包含3个32位浮点数
                            offset: 0//arrayStride表示每组顶点数据间隔字节数，offset表示读取改组的偏差字节数，没特殊需要一般设置0
                        }]
                    }
                ]
            },
            // 片元着色器配置
            fragment: {
                module: device.createShaderModule({code: fragment}),
                entryPoint: "main",
                targets: [{
                    format: format
                }],
            },
            // 绘制图元配置
            primitive: {
                topology: "triangle-list",//三角形绘制顶点数据
            }
        });

wgsl代码：

//顶点着色器代码
const vertex = /*wgsl*/`
    @vertex
    fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32>{
        // var pos2 = vec4<f32>(pos,1.0);//pos转齐次坐标
        // pos2.x -= 0.2;//所有的顶点x坐标偏移0.2
        // return pos2;//返回顶点数据，渲染管线下个环节使用
        return vec4<f32>(pos,1.0);
    }
`;

问题：经过一系列测试发现一个不理解的错误。当管线shaderLocation: 0 ；顶点着色器@location(0)不能正常显示，会出现create graphics pipeline state failed with E_INVALIDARG (0x80070057)错误。但当我将这两个值修改为1，图像正常渲染。令人费解！有懂得大神指教一下