I have #svgr/webpack#6.0.0 installed and webpack config as below
use: [
{
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
removeViewBox: false,
},
],
},
},
},
],
But I am getting an error as below:
Error: Plugin name should be specified
The latest SVGO documentation suggests that you need to assign each plugin object a name. Your configuration is out of date so it's most likely a version/update issue. Try changing the options object in your config to:
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
// disable plugins
removeViewBox: false,
},
},
},
],
},
The preset-default plugin allows you to customise the defaults and allows you to disable plugins that are enabled by default.
Related
When I try to set the property "files" in the ESLint Config file ".eslintrc.cjs" I get the following error from the EsLint VsCode Extension:
ESLint: ESLint configuration in client.eslintrc.cjs is invalid: - Unexpected top-level property "files". . Please see the 'ESLint' output channel for details.
Every time I ran npm run lint (I include this script in my package.json file "lint": "eslint ./**",), ESlint not only look for errors in .jsx files but also in files like .svg, .png, etc. So, I am trying to add the following property files: ['src/**/*.jsx'], to my ESLint Config File to avoid checking the files outside the src directory and the files that are not .jsx.
This is my .eslintrc.cjs file:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb',
'airbnb/hooks',
'plugin:react/recommended',
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'react',
],
files: ['src/**/*.jsx'],
rules: {
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'no-use-before-define': ['error', { functions: false }],
'no-param-reassign': ['error', { props: false }],
},
};
You should use overrides to include files, e.g.,
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['airbnb', 'airbnb/hooks', 'plugin:react/recommended'],
overrides: [
{
plugins: ['react'],
files: ['src/**/*.jsx'],
rules: {
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'import/no-extraneous-dependencies': [
'error',
{ devDependencies: true },
],
'no-use-before-define': ['error', { functions: false }],
'no-param-reassign': ['error', { props: false }],
},
},
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
}
See documentation here https://eslint.org/docs/latest/use/configure/configuration-files#how-do-overrides-work.
I am building a project with webpack module federation with the following setup:
React host (running on localhost:3000)
Angular Remote 1 (running on localhost:4201)
Angular Remote 2 (running on localhost:4202)
The goal is to get both remotes working. If I only run one of the and remove the other it is working perfectly.
The issue I am facing is that when the remotes are loaded, __webpack_require__.p is set by one of the remotes' script and therefore the other remote's chunk is loaded from the wrong url.
Here is the error I get:
My module federation config is the following:
React host:
.
.
.
new ModuleFederationPlugin({
name: "react_host",
filename: "remoteEntry.js",
remotes: {
angular_remote_1: "angular_remote_1#http://localhost:4201/angular_remote_1.js",
angular_remote_2: "angular_remote_2#http://localhost:4202/angular_remote_2.js"
},
exposes: {},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
.
.
.
Angular Remote 1
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_1",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_1",
library: { type: "var", name: "angular_remote_1" },
filename: "angular_remote_1.js",
exposes: {
'./angularRemote1': './src/loadAngularRemote1.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Angular Remote 2
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_2",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_2",
library: { type: "var", name: "angular_remote_2" },
filename: "angular_remote_2.js",
exposes: {
'./angularRemote2': './src/loadAngularRemote2.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Thins I have tried so far:
Playing around with public path (between auto and hardcoded)
Setting a custom chunkLoadingGlobal for both remotes (not the host)
The exact reproduction of this issue can be found here: https://github.com/BarniPro/react-host-angular-remotes-microfrontend
Any help is greatly appreciated.
The issue can be solved by setting the topLevelAwait experiment to true in the remotes's webpack.config.js:
experiments: {
topLevelAwait: true,
},
This results in the two remotes loading in sync which prevents the paths from overriding each other.
Another update I had to make was disabling the splitChunks option in the remotes' optimization settings (see SplitChunksPlugin):
optimization: {
runtimeChunk: false, // This is also needed, but was added in the original question as well
splitChunks: false,
}
The Github repo has been updated with the working solution.
(4:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin before Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
My postcss.config.js file:
plugins: [
"postcss-import",
"tailwindcss/nesting",
"tailwindcss",
"autoprefixer",
],
};
I tried to write it down like this:
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
};
and like this:
plugins: [
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss"),
require("autoprefixer"),
],
};
Github repo with this project: https://github.com/frkam/test-app
When I try to use nesting, i get this:enter image description here
As Ed Lucas mentioned above CRA5 does not allow to override postcss.config
But at the moment you can use something like craco
An Example you can find in Felipe Zavan comment
This works for me. So I hope it will be helpful :)
My craco.config
module.exports = {
style: {
postcss: {
loaderOptions: (postcssLoaderOptions) => {
postcssLoaderOptions.postcssOptions.plugins = [
require('tailwindcss/nesting'),
require('tailwindcss'),
require('postcss-mixins'),
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 0,
},
],
]
return postcssLoaderOptions
},
},
},
}
Trying to setup a react-app with all latest versions.
Github Repo Link
Trying to run storybook with sass file imported will result in below error. Trying to run without importing the styles, storybook works.
The same code works correctly when its run as npm start run with no warnings and errors.
I have configured css modules using #dr.pogodin/babel-plugin-react-css-modules with sass, webpack 5, react 17 and with latest packages.
ERROR in ./src/assets/stylesheets/app.scss 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #import "./base.scss";
| #import "./generics/font.scss";
| #import "./generics/spacing.scss";
# ./stories/index.js 5:0-44 8:2-10:4 8:58-10:3 9:4-49
# ./src/components/atoms/button/stories.js
babel.config.js
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: [
[
"#dr.pogodin/babel-plugin-react-css-modules",
{
webpackHotModuleReloading: true,
autoResolveMultipleImports: true,
filetypes: {
".scss": {
syntax: "postcss-scss",
},
},
generateScopedName: "[name]__[local]___[hash:base64:5]",
},
],
],
};
webpack.config.js for css (partial code inlcuded)
{
test: /\.(css|sass|scss)$/,
exclude: /node_modules/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
auto: (resourcePath) =>
resourcePath.indexOf("assets/stylesheets") === -1,
localIdentName:"[name]__[local]___[hash:base64:5]",
},
sourceMap: true,
},
},
"sass-loader",
],
}
storybook/webpack.config.js file
const custom = require('../webpack.config.js');
module.exports = {
// stories: ['../src/components/**/*.stories.js'],
webpackFinal: (config) => {
return {
...config,
module: {
rules: custom.module.rules,
},
resolve: {
...config.resolve,
...custom.resolve,
}
};
},
};
I don't know what you have done with your configuration but you would define the config things inside .storybook/main.js. And for global style css is supposed to be included in preview.js file.
In short, you have to do the few things:
Remove your .storybook/config.js and add .storybook/main.js with following content:
const custom = require('../webpack.config.js');
module.exports = {
stories: [
'../src/**/stories.js', // The name should have a prefix for component name like `button.stories.js` instead of `stories.js` like you've done. As you renamed, you can remove this pattern
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
webpackFinal: (config) => {
return {
...config,
module: {
rules: custom.module.rules,
},
resolve: {
...config.resolve,
...custom.resolve,
}
};
},
};
Create the .storybook/preview.js to import your global style:
import "../src/assets/stylesheets/app.scss";
Some people have been running into problems a some scss preset when using Storybook 6.2.0 with Webpack 5. Instead of using a preset, I recommend configuring the Webpack config in main.js as mentioned above. Here's the relevant portion of a working Storybook Webpack config for Sass:
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: function () {
return [require('precss'), require('autoprefixer')];
},
},
},
},
{
loader: require.resolve('sass-loader'),
options: {
implementation: require('sass'),
},
},
],
},
],
},
I've written more about getting Storybook off the ground with Webpack 5 (and modifying the Storybook Webpack config) over here.
Another reason this might happen: if you are adding new components to your app and the path defined for your sass-loader does not match anymore.
E.g. if you have this in your .storybook/main.js:
webpackFinal: async config => {
// Add SASS support
// https://storybook.js.org/docs/configurations/custom-webpack-config/#examples
config.module.rules.push({
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
compileType: "icss",
},
},
},
"sass-loader",
],
include: path.resolve(__dirname, "../"),
})
Update or completely remove the include path.
Build Errors on Netlify. Build exceeds maximum allowed runtime.
Can build locally running yarn build and inside the Netlify docker container, however when on Netlifys build it exceeds maximum allowed runtime.
Am getting some warnings like the below when running in the Netlify docker container
Warning: a promise was created in a handler at opt/buildhome/repo/node_modules/postcss/lib/lazy-result.js:213:17 but was not returned from it
Warning: a promise was created in a handler at /opt/buildhome/repo/node_modules/gatsby-transformer-remark/extend-node-type.js:179:19 but was not returned from it
Those two warnings are pointing to two Gatsby plugins I have configured. (Config below)
require('dotenv').config();
module.exports = {
siteMetadata: {
title: 'My Website',
},
proxy: {
prefix: '/.netlify/functions',
url: 'http://localhost:9000',
},
plugins: [
'gatsby-plugin-eslint',
'gatsby-plugin-react-helmet',
'gatsby-plugin-postcss',
{
resolve: 'gatsby-source-contentful',
options: {
spaceId: process.env.SPACE_ID,
accessToken: process.env.ACCESS_TOKEN,
},
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
exclude: /img/,
},
},
},
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images-contentful',
options: {
maxWidth: 590,
},
},
],
},
},
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
};
Have tried to debug all weekend but not sure what else to do. I couldn't find anyone else who has had similar issues.