Next.js | Fs依赖的导入模块
Next.js | Fs依赖的导入模块
提问于 2021-07-20 04:41:02
在那里我尝试导入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;
},
};“找不到模块:无法解析'path'”-错误。
我读了几十篇文章，了解到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？
回答 1
Stack Overflow用户
发布于 2021-11-21 20:04:04
我从ReadMe上看到你可以使用巴别塔插件babel-plugin-macro。
在项目的根目录中创建以下.babelrc文件。
// .babelrc
{
"presets": [
"next/babel"
],
"plugins": [
"babel-plugin-macros"
]
}无需编辑next.config.js。
注意:确保您的devDependencies中安装了@babel/core。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68446790
复制相关文章
相似问题
腾讯云开发者
