I'm trying to add this plugin, which is uses this webpack plugin to my craco config file, followed the guide but it's not working.
const CracoAlias = require('craco-alias');
const imageOptimizer = require('craco-image-optimizer-plugin');
module.exports = function ({ env }) {
return {
reactScriptsVersion: 'react-scripts',
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('postcss-focus-visible'),
require('autoprefixer'),
],
},
},
plugins: [
{
plugin: imageOptimizer,
// image-webpack-plugin options
options: {
mozjpeg: {
progressive: true,
quality: 65,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.9],
speed: 4,
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75,
},
},
},
{
plugin: CracoAlias,
options: {
//CracoAlias options
},
},
],
};
};
The plugin is supposed to optimize the images, but it's not happening. Any ideas? Is it something wrong with my config file? Thanks.
Seems like it was a problem with react-scripts. Had to add the plugin manually like this:
const { getLoaders, loaderByName } = require('#craco/craco');
module.exports = {
overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions }) => {
const config = { ...webpackConfig };
const urlLoaderCandidates = getLoaders(config, loaderByName('url-loader'));
const urlLoader = urlLoaderCandidates.matches.find(
m =>
m.loader &&
m.loader.test &&
(Array.isArray(m.loader.test)
? m.loader.test.some(r => r.toString().indexOf('jpe?g') >= 0)
: m.loader.test.toString().indexOf('jpe?g') >= 0)
);
if (!urlLoader) {
throw Error(
'could not find correct url-loader. did you change react-scripts version?'
);
}
const loader = urlLoader.loader;
loader.use = [
{
loader: loader.loader,
options: Object.assign({}, loader.options),
},
{
/**
* #see https://github.com/tcoopman/image-webpack-loader
*/
loader: 'image-webpack-loader',
options: pluginOptions,
},
];
delete loader.loader;
delete loader.options;
return config;
},
};
And then import the file instead of the package.
Related
I have configured chromatic for my stories:
When I pushed my chromatic build it always shows images are missing(but actually on baseline images are there but in chromatic build it shows images are missing): please check screenshot below:
Below is my story code:
export const WideExample = () => {
stubMetadata();
stubMainMenu();
stubFooterMenu();
stubFooterMetaMenu();
let views = [];
let args = {
pageContext: {
slug: "test",
id: "1",
language: "en-US",
views: [],
settings: {
productSelector: dynamicProductSelector
}
},
...productNode,
};
return (
<LocationProvider>
<Product {...args} />;
</LocationProvider>
);
};
WideExample .parameters = {
storyshots: { disable: true },
};
and my .storybook/main.js file:
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
'storybook-css-modules-preset',
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-postcss",
// 'storybook-addon-mock/register',
'storybook-addon-fetch-mock',
],
core: {
builder: "webpack5",
},
staticDirs: ['../public', '../static', '../storybook-assets', ],
my webpack.config.js file:
const path = require('path');
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.module\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
sourceMap: true,
postcssOptions: {
config: './.storybook/',
},
},
},
],
include: path.resolve(__dirname, '../storybook/'),
});
return config;
};
Can anyone look where I am wrong and need fix?
#apply utility is being compiled to normal CSS and is flagged as invalid syntax in storybook
Here's my main.js
// .storybook/main.js
const path = require("path");
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.#(js|jsx|ts|tsx)"],
staticDirs: ["../public"],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-scss",
{
name: "#storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
webpackFinal: async (config) => {
const rules = config.module.rules;
const fileLoaderRule = rules.find((rule) => {
return rule.test && rule.test.test(".svg");
});
fileLoaderRule.exclude = /\.svg$/;
rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"],
});
return config;
},
core: {
builder: "#storybook/builder-webpack5",
},
framework: "#storybook/react",
};
Here's my preview.js
import * as NextImage from "next/image";
import "../src/styles/globals.scss";
const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, "default", {
configurable: true,
value: (props) => <OriginalNextImage {...props} unoptimized />,
});
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
previewTabs: {
"storybook/docs/panel": { index: -1 },
},
};
Here's my postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
I'm using nextjs. I'm using sass For style layout. All styles are named with *.module.scss, and they are placed in the components folder and its subfolders and not in the styles folder mentioned by the nextjs document. I don't know how to config this situation in next.config.js. Content of my next.config.js is now:
const withPlugins = require("next-compose-plugins");
const nextTranslate = require("next-translate");
const withPWA = require("next-pwa");
const withBundleAnalyzer = require("#next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
// next.js configuration
const nextConfig = {
images: {
domains: ['ibexcdn.com'],
},
};
module.exports = withPlugins(
[
[
nextTranslate,
{
webpack: (config, { isServer, webpack }) => {
return config;
},
},
],
withBundleAnalyzer,
[
withPWA,
{
pwa: {
disable: process.env.NODE_ENV === "development",
dest: 'public',
runtimeCaching: [
{
urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-font-assets',
expiration: {
maxEntries: 4,
maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
}
}
}
]
},
},
],
],
nextConfig,
);
I have a project using ReactJS, Webpack, TailwindCSS, and when I run the build command, the CSS file built is TOO BIG:
Here is my postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss,
require("autoprefixer"),
require("cssnano")({
preset: "default",
}),
],
};
And here is my tailwind.config.js:
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
greenLight: "#1db954",
greyDark: "#121212",
greyLight: "#282828",
greyLighter: "#282828",
backgroundLight: "rgba(40,40,40,0.4)",
},
fontFamily: {
custom: ["Circular Spotify Tx T Black"],
},
container: {
screens: {
mobile: "23rem",
},
},
},
},
variants: {
extend: {},
},
plugins: [],
};
And this is ```webpack.config.js
I have searched a lot, but can not figure it out! Thanks.
I am trying to figure out how to use CRACO (https://github.com/gsoft-inc/craco) to disable file chunking in create react app.
I have created the following craco.config.js:
// craco.config.js
module.exports = {
output: {
fileName: 'static/js/bundle.js',
},
}
But it doesn't have any effect. What should the config look like to disable file chunking in CRA with CRACO?
EDIT: To disable chunking completely I believe this might do it.
Source: https://github.com/facebook/create-react-app/issues/5306#issuecomment-650737697
// craco.config.js
module.exports = {
webpack: {
configure: {
optimization: {
runtimeChunk: false,
splitChunks: {
chunks(chunk) {
return false
},
},
},
},
},
}
ORIGNIAL:
Maybe this could help?
module.exports = {
webpack: {
configure: {
output: {
filename: 'static/js/bundle.js',
},
optimization: {
runtimeChunk: false,
splitChunks: {
chunks: 'all',
cacheGroups: {
default: false,
vendors: false,
// vendor chunk
},
},
},
},
},
plugins: [
{
plugin: require('craco-plugin-scoped-css'),
},
],
}