vscode import 着色器glsll无法识别

vscode使用threejs引入外部的glsl文件

mport { useRef, useEffect, useCallback, useState } from 'react'
import * as THREE from 'three'
import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js'
import OrbitControls from 'three-orbitcontrols';
import './index.scss'

import basicVertexShader from '../shader/basic/vertex.glsl'
import basicFragmentShader from '../shader/basic/fragMent.glsl'

const View = () => {
  const page = useRef(); 
  console.log(basicVertexShader)

  const scence = useRef(new THREE.Scene()).current; //场景
  const camera = useRef(new THREE.PerspectiveCamera()).current; //摄像机（透视投影）
  const render = useRef(new THREE.WebGLRenderer()).current; //渲染器
  const controls = new OrbitControls(camera, render.domElement);//创建控件对象
  const timer = useRef(null) // 定义定时器

  const [objNum, setObjNum] = useState(1)

  useEffect(() => {
      page.current.appendChild(render.domElement);
      init();
      initLight();
      initGeometry();
      renderScene();
  }, [])

 

  // 初始化地板
  const initGeometry = () => {
    // 着色器材质
    const shaderMaterial = new THREE.ShaderMaterial({
      vertexShader: basicVertexShader,
      fragmentShader: basicFragmentShader
    })
    ······

错误截图：

语法和路径都没有问题，顶点着色器和片元着色器也都正常，直接把他们复制到js文件中是可以正常显示的
顶点着色器

void main() {
osition = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}

片元着色器

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

求指教!