Next.js | 具有 Fs 依赖项的导入模块

Question

There I try to import glsl ( import glsl from "babel-plugin-glsl/macro"; ), but my problem with it is that I get an "Module not found: Can't resolve 'fs'" or since I configured my next.config.js - file with

module.exports = {
  future: { webpack5: false },
  webpack: (config) => {
    config.resolve.fallback = { fs: false, module: false };

    return config;
  },
};

an "Module not found: Can't resolve 'path'" - error.

I read dozens of articles and understand that the fs file is only accessible server-side and the only way to use it is in getStaticProps or getServerSideProps, but whatever I do I can't use it and really don't know or understand how to set it up so I can use it inside a component like this:

import { Canvas, extend } from "@react-three/fiber";
import { shaderMaterial } from "@react-three/drei";
import glsl from "babel-plugin-glsl/macro"; // <--- Module to import

const WaveShaderMaterial = shaderMaterial(
  // Uniforms
  {},              

  // Vertexshader
  glsl`            // <--- Here in Use

  `,
  // Fragmentshader
  glsl`            // <--- Here in Use
  
  `
);

extend({ WaveShaderMaterial });

const Plane = () => {
  return (
    <mesh>
      <planeBufferGeometry args={[2, 2, 16, 16]} />
      <waveShaderMaterial color="red" />
    </mesh>
  );
};

const Scene = () => {
  return (
    <Canvas>
      <ambientLight intensity={1.0} />
      <Plane />
    </Canvas>
  );
};

export default Scene;

My question is: How can I would or would you import glsl from "babel-plugin-glsl"(or any other module) which needs fs?

Answer 1

I saw from the ReadMe that you can use the babel plugin babel-plugin-macro .

Create the following .babelrc file in the root of your project.

// .babelrc
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "babel-plugin-macros"
  ]
}

No need to edit next.config.js .

Note: Make sure you have @babel/core installed in your devDependencies .

Here's a working example.