I'm having trouble using Storybook with three.js.
I succeeded in loading glsl file in react by adjusting webpack config.
However, I don't know why glsl shader file cannot be loaded in storybook, even though I adjusted webpack config.
I tried this method, ./storybook/main.js
const path = require("path");
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app",
],
framework: "@storybook/react",
core: {
builder: "@storybook/builder-webpack5",
},
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.(glsl|vs|fs|vert|frag)$/,
use: ["raw-loader", "glslify-loader"],
exclude: /node_modules/,
include: path.resolve(__dirname, "../"),
});
return config;
},
};
no problem to open storybook, but there is an error which is