[Next.js/ts] glsl 파일 importing + webpack rules exclude 설정

Next.js 에서.glsl 확장자 shader 파일을 import 해보기

 

next.config.js 에서 webpack loader 설정

---

next.config.js에서 webpack 로더 설정을 커스터마이징하려면 next에서 제공하는 webpack 함수 를 확장하여 사용할 수 있다.

next.config.js 파일 내에서 module.rules에 새로운 로더 설정을 추가하는 방식으로 원하는 파일 형식에 대해 로더를 설정 하면 된다.

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  webpack: (config, options) => {
    config.module.rules.push(
      // 로더 추가
    );
    return config;
  },
};

export default nextConfig;

 

 

 

여기서 loader 를 추가해 주면 되는데, 추가하려는 로더 객체의 프러퍼티는 다음과 같다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.glsl/,
      exclude: /node_modules/,
      type: "asset/source",
    });
    return config;
  },
};

export default nextConfig;

 

test 옵션 

\.glsl/

webpack의 test 옵션은 특정 파일 유형을 지정하기 위해 사용된다. test는 파일 경로와 확장자를 기준으로 로더가 적용될 파일을 필터링하는 역할을 한다. 주로 정규 표현식을 사용하여 특정 확장자나 파일 경로를 지정하는 경우가 많다.

type 옵션

asset/source

1. asset/source: 파일을 텍스트 콘텐츠로 가져오도록 설정
2. json: JSON 파일을 JSON 객체로 가져옴
3. asset/resource: 파일을 별도의 파일로 내보내고, URL로 반환
4. asset/inline: 파일을 Base64로 인코딩하여 URL로 인라인 처리

Exclude 옵션

/node_modules/

 

특정 파일이나 폴더를 번들링에서 제외하기 위해 사용 된다. 해당 옵션을 제대로 설정하지 않아서 에러가 발생했었다.

사용하던 라이브러리 (react-three-drei) 에서 glsl import 코드와 충돌이 난 것이었다. (Attempted import error:  bvh_struct_definitions' is not exported from './gpu/BVHShaderGLSL.js' (imported as 'BVHShaderGLSL').) 

 

불행히도 나와 같은 에러를 겪은 사람은 단 한사람도 없었고... 이를 해결하기 위해 열심히 추론하다 결국  node_modules 를 excluse 해주는 식으로 간단하게 해결하였다.

 

Typescript: Cannot find module 해결

---

ts 환경에서 .glsl 파일을 그대로 import 하면 Cannot find module '.glsl' 에러가 발생한다.

 

 

 

 

Shaders 경로에 Type declare 파일인 shader.d.ts 파일을 추가해주자.

 

 

shader.d.ts

declare module "*.glsl" {
  const value: string;
  export default value;
}

 

                                               

해결