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

Question

在那里我尝试导入 glsl（ import glsl from "babel-plugin-glsl/macro"; ），但我的问题是我得到一个“找不到模块：无法解析‘fs’”或者因为我配置了我的next.config.js - 文件

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

    return config;
  },
};

“未找到模块：无法解析‘路径’” - 错误。

我阅读了数十篇文章并了解 fs 文件只能在服务器端访问，并且使用它的唯一方法是在 getStaticProps 或 getServerSideProps 中，但是无论我做什么我都无法使用它并且真的不知道或不知道如何设置它以便我可以在这样的组件中使用它：

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;

我的问题是：我怎样才能或者你会从需要 fs 的“babel-plugin-glsl”（或任何其他模块）导入 glsl 吗？

Answer 1

我从自述文件中看到你可以使用 babel 插件babel-plugin-macro 。

在项目的根目录中创建以下.babelrc文件。

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

无需编辑next.config.js 。

注意：确保在devDependencies安装了@babel/core 。

这是一个工作示例。