I'm trying to add customMedia option to my postcss-cssnext features config with importFrom file location, but that doesnt work and I dont have any errors on project build, only final Missing #custom-media definition for '--small-viewport'. The entire rule has been removed from the output. when I'm trying to use the media. How do I debug this?
module.exports = {
plugins: [
require('postcss-import')(),
require('postcss-nested')(),
require('postcss-simple-vars')({
variables: {
...require('./src/ui/variables')
}
}),
require('postcss-cssnext')({
features: {
customProperties: false,
browsers: ['> 0.5%, last 2 versions, Firefox ESR, not dead'],
customMedia: {
importFrom: require('path').join(__dirname, './src/ui/custom-media.css')
}
},
}),
require('cssnano')({
autoprefixer: false,
zindex: false,
reduceIdents: false,
discardComments: { removeAll: true },
discardUnused: { fontFace: false },
colormin: false,
}),
]
};
Okay so as per postcss-custom-media CHANGELOG importFrom was added only in 7.0.0 while my cssnext uses 6.0.0. As CSSNext is deprecated I will switch to postcss-preset-env
you know how to use custom media in postcss-preset-env, they work for me only if you create a custom media in the component and refer to it if I want to take custom media from index.css or vars.css they do not work , with variables everything is fine
Related
I have an old application and i have micro-frontend structure there. The application was using react-scripts#4 and this version had several vulnerabilities so i decided to upgrade it. While react-scripts#5 is not compatible with webpack#4, i needed to upgrade it too. However, I cannot use output.libraryTarget='system' or output.library.type='system' anymore. If i remove this part then app works but i cannot access micro-frontends. Here is my craco.config file;
import {
BabelOptions,
DevServerOptions,
EsLintOptions,
WebpackOptions,
} from '#craco/craco';
export default {
babel: {
plugins: [['#babel/plugin-proposal-decorators', { legacy: true }]],
} as BabelOptions,
eslint: {
enable: false,
} as EsLintOptions,
webpack: {
configure: (webpackConfig) => {
// use system
webpackConfig.output.libraryTarget = 'system';
delete webpackConfig.optimization;
// adding externals
webpackConfig.externals = [
'#test-app/mf-example',
];
return webpackConfig;
},
} as WebpackOptions,
// Adding Server
devServer: ((devServerConfig) => {
// devServerConfig.injectClient = false;
devServerConfig.proxy = {
...devServerConfig.proxy,
'/mf-example': {
target: process.env.MF_EXAMPLE,
secure: false,
changeOrigin: true,
}
};
return devServerConfig;
}) as DevServerOptions,
};
Btw, the problem is not related to other files or configs so i did not share them.
At the moment I'm using react-docgen-typescript-loader to automatically generate docs
Downloads last 30 days: 1.2m
But this plugin is no longer supported and archived: https://github.com/strothj/react-docgen-typescript-loader
Also doesn't work with typescript ^4.3 (https://github.com/styleguidist/react-docgen-typescript/issues/356), because the loader uses the old version of the react-docgen-typescript
Is there any other way to automatically generate docs from TS?
Actually, I didn't notice any difference after deleting react-docgen-typescript-loader and using react-docgen-typescript
https://storybook.js.org/docs/ember/configure/typescript#mainjs-configuration
// .storybook/main.js
module.exports = {
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
};
I’m implementing the Next.js Image component in my Headless project. The CMS that I’m using is WordPress. And since the image is coming from an external website, I need to specify the domain on next.config.js, as the documentation specifies:
https://nextjs.org/docs/basic-features/image-optimization
const nextConfig = {
image: {
domains: ['https://example.com'],
},
}
But in my next.config.js file I’ve already have this configuration:
const withStyles = require('#webdeb/next-styles');
module.exports = withStyles({
sass: true,
modules: true,
});
So my struggle is to combine this two on the config file.
Just for some context, without the image configuration, I have this error:
Error: Invalid src prop on next/image, hostname is not configured under images in your next.config.js
I've tried putting it together like the code bellow with the use of next-compose-plugins, but the error keeps showing:
const withStyles = require('#webdeb/next-styles');
const withPlugins = require('next-compose-plugins');
const nextConfig = {
image: {
domains: ['https://example.com'],
},
}
module.exports = withPlugins([
[withStyles({
sass: true,
modules: true,
})]
], nextConfig);
Without the nextConfig at the end of the module.exports, the code works without a problem.
A detail on the URL that I need to pass is that it's a subdomain and an homolog environment, but it doesn't need credentials to be accessed. I don't think it's the issue, tho.
Since I'm new with the Next.js, I just can't figure out how this configuration needs to work.
Your config object should be passed to the last plugin call. So in your case it would look like the following:
const withStyles = require('#webdeb/next-styles');
module.exports = withStyles({
sass: true,
modules: true,
images: {
domains: ['https://example.com'],
}
});
Also note that the correct entry for the next/image configuration is images and not image. Which is why it's probably not working when you tried with next-compose-plugins, as everything else seems to be correct in that code snippet.
For anyone whose above methods doesn't work, please remove the https:// or http:// in next.config.js;
module.exports = {
reactStrictMode: true,
images: {
domains: ['https://your-domain.com'], //make it 'your-domain.com'
},
};
I am trying to use babel standalone inside a react app to transpile Angular TypeScript.
The short version:
How can I use #babel/plugin-proposal-decorators and #babel/plugin-proposal-class-properties with babel standalone?
The long version:
This tutorial https://medium.com/#hubert.zub/using-babel-7-and-preset-typescript-to-compile-angular-6-app-448eb1880f2c says that "apparently #babel/plugin-syntax-decorators doesn’t do the work and causes transform errors.". He recommends using the following config in a babelrc file:
{
"presets": [
"#babel/preset-env",
"#babel/preset-typescript"
],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true,
}
],
"#babel/plugin-proposal-class-properties"
]
}
using syntax-decorators does "work" for me but then I get another error that it does not recognise a selector for an imported component.
Since I am using babel standalone I need to use Babel.transform like this:
const TS_OPTIONS = {
presets: [
'typescript',
['es2017', { 'modules': false }],
],
plugins: [
// the following two options "work" but with another error
// 'syntax-decorators',
// 'syntax-class-properties',
// none of these options work
["#babel/plugin-proposal-decorators"],
["#babel/plugin-proposal-class-properties"],
//['plugin-proposal-decorators', { 'legacy': true }],
//['plugin-proposal-class-properties', { 'loose': true }],
// 'plugin-proposal-decorators',
// 'plugin-proposal-class-properties',
// ['syntax-decorators', { 'legacy': true }],
'transform-es2015-modules-commonjs',
],
};
my transpile function (greatly simplified):
export default function transpile(myCode) {
const { code } = Babel.transform(myCode, TS_OPTIONS);
return myCode;
}
No matter how I write the plugins it does not work. I keep getting an error along the lines of
Error: Invalid plugin specified in Babel options: "proposal-decorators"
using the syntax-decorators plugin will transpile the code but I get the following error when importing a component and trying to use the components selector:
Uncaught Error: Template parse errors:
'search-bar' is not a known element:
1. If 'search-bar' is an Angular component, then verify that it is part of this module.
2. If 'search-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
I solved this by upgrading the version of Babel I was using which gave me access to more available plugins. I posted another question that I thought was a different issue but it turns out they were related. I will reference that question here if anyone is interested: Angular Uncaught Error: Template parse errors: is not a known element
with babel-standalone .babelrc wont work .you might need to use transform to apply plugins .i am wondering why you exactly need to use standalone babel ?. if its react or angular you can just use babel only and don't need to use transform
Is it possible to connect Create React App 2 with this plugin: https://www.npmjs.com/package/babel-plugin-jsx-remove-data-test-id without ejecting?
I've created .bablerc file, but it doesn't work.
I want to use custom attribute for bdd testing and remove this attribute on production.
Also, I don't want to create HOC to apply attribute - I have many components and wrap every component is very very difficult.
You can use react-app-rewired https://www.npmjs.com/package/react-app-rewired and override the configs through the config-override.js file:
const {
override,
addBabelPresets,
addBabelPlugins,
} = require('customize-cra');
module.exports = override(
...addBabelPresets([
'#babel/preset-env',
{
modules: false,
useBuiltIns: false,
debug: false,
},
]),
...addBabelPlugins(
'babel-plugin-styled-components',
'babel-plugin-jsx-remove-data-test-id',
),
);