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',
),
);
Related
In our project we're using Rollup to build/bundle our code with code-splitting via React lazy on our routes. With a development build, everything works fine; our button and dropdown event handlers fire. In a production build, none of the handlers fire. It gets more interesting. If we don't do code-splitting at the route level and just have a single bundle file with everything, both development and production builds work perfectly. I'm wondering if I'm missing an option for any of my Rollup plugins that is causing this behavior?
envVars.exclude = 'node_modules/**';
envVars.preventAssignment = true;
const minifier = isDebugBuild ? null : terser();
rollup({
preserveEntrySignatures: false,
input: paths.scripts.src,
plugins: [
replace(envVars), // Replace all env vars.
nodeResolve({ // Resolve any imported node modules.
browser: true // Ensure all node modules are ready for browser use.
}),
json(), // Convert imported json files as modules.
commonjs({
include: 'node_modules/**'
}),
babel({ // Have Babel transpile our scripts to es6.
babelHelpers: 'runtime', // Include Babel runtime helpers in our scripts.
exclude: 'node_modules/**' // Don't transpile any modules imported from node.,
}),
minifier
]
})
.then((bundle) => {
const entryFileOutputName = isDebugBuild ? paths.scripts.entryFile : paths.scripts.entryFileMinifiedName;
const chunkFileOutputName = isDebugBuild ? paths.scripts.chunkFile : paths.scripts.chunkFileMinifiedName;
return bundle.write({
dir: paths.scripts.build, // The final output directory.
entryFileNames: entryFileOutputName, // The main entry script.
chunkFileNames: chunkFileOutputName, // The chunk scripts that will be lazy loaded.
format: 'es', // The final format of the bundles scripts. Here we want ES6+ JS.
sourcemap: isDebugBuild // Generate source maps or not.
});
});
I am currently having trouble with my React TypeScript project.
I created my project with npx create-react-app my-app --template typescript.
I recently added tsyringe for dependency injection and was trying to implement it for an apiService. After following the readme(https://github.com/microsoft/tsyringe#injecting-primitive-values-named-injection) for adding primitive values I have hit a block. I already add experimentalDecorators and emitDecoratorMetadata to my tsconfig.json file with no success.
The error actual error I am encountering is:
./src/ts/utils/NetworkService.ts 9:14
Module parse failed: Unexpected character '#' (9:14)
File was processed with these loaders:
* ./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| let NetworkService = (_dec = singleton(), _dec(_class = (_temp = class NetworkService {
> constructor(#inject('SpecialString')
| value) {
| this.str = void 0;
I am fairly sure this problem is caused by Babel, however I created this with npm create react-app --template typescript and do not seem to have access to the Babel configuration.
NetworkService.ts
#singleton()
export default class NetworkService
{
private str: string;
constructor(#inject('SpecialString') value: string) {
this.str = value;
}
}
Invocation method
bob()
{
const inst = container.resolve(NetworkService);
}
Registering Class in index.ts
container.register('SpecialString', {useValue: 'https://myme.test'});
#registry([
{ token: NetworkService, useClass: NetworkService },
])
class RegisterService{}
React-Scripts manages many of the configs related to the project. For many cases, this is fine and actually a nice feature. However, because React-Scripts uses Babel for it's development environment and does not expose the config.
You have to run npm run eject to expose the configurations.
Please note, this is a one-way operation and can not be undone.
Personally, I prefer more control with my configuration.
After this you can edit the webpack.config.js in the newly created config folder.
Find the section related to the babel-loader in the dev-environment and add 'babel-plugin-transform-typescript-metadata' to the plugins array.
Expanding on Jordan Schnur's reply, here are some more pitfalls I encountered when adding TSyringe to my CRA app:
Use import type with #inject
If you get this error "TS1272: A type referenced in a decorated signature must be imported with 'import type' or a namespace import when 'isolatedModules' and 'emitDecoratorMetadata' are enabled." replace import with import type for the offending imports. You will encounter this when working with #inject
E.g. replace import { IConfig } from "iconfig" with import type { IConfig } from "iconfig"
Fixing Jest
Your Jest tests will also break with TSyringe, especially when using #inject. I got the error "Jest encountered an unexpected token" with details constructor(#((0, _tsyringe.inject)("")) ("#" marked as the offending token). I took the following steps to fix that in CRA:
Add the line import "reflect-metadata"; to the top of the file src/setupTests.ts
In config/jest/babelTransform.js replace line 18 and following:
From
module.exports = babelJest.createTransformer({
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
babelrc: false,
configFile: false,
});
to:
module.exports = babelJest.createTransformer({
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
plugins: [
require.resolve('babel-plugin-transform-typescript-metadata')
],
babelrc: false,
configFile: false,
});
Instead of eject, you may use a lib that "overrides" some of your params.
I used craco : https://www.npmjs.com/package/#craco/craco
I've created an simpler DI library that doesn't need decorators or polyfill. Works with CRA like a charm and has cool React bindings
iti
import { useContainer } from "./_containers/main-app"
function Profile() {
const [auth, authErr] = useContainer().auth
if (authErr) return <div>failed to load</div>
if (!auth) return <div>loading...</div>
return <div>hello {auth.profile.name}!</div>
}
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'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
I'm using ant design library for my react application.
And I've faced with huge imports, that hurts my bundle (currently 1.1 mb in minified version because of ant-design lib).
How can I differently import antd components through all my app?
UPDATE:
Seems antd has some huge or non optimized modules.
Here the thing - only difference is import Datepicker module, and.. boom! + almost 2MB (in dev bundle ofc.)
UPD: the underlying issue seems to be resolved for the new (4.0) version of antd.
Therefore, if you try to resolve this issue for the earlier versions, the recommended way is to migrate onto antd 4
Previous answer:
At the moment, a huge part of antd dist is SVG icons.
There is no official way to deal with it yet (check the issue on github).
But a workaround exists.
Adapt webpack to resolve icons differently. In your webpack config:
module.exports = {
//...
resolve: {
alias: {
"#ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
}
}
};
Create icons.js in the folder src/ or wherever you want it. Be sure it matches the alias path!
In this file, you define which icons antd should include.
export {
default as DownOutline
} from "#ant-design/icons/lib/outline/DownOutline";
It's also possible to do this with react-app-rewired (create-react-app modifications) within config-overrides.js
1) Prevent antd to load the all moment localization.
Add webpack plugin and configure it in webpack.config.js like the follow:
plugins: [
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/),
],
resolve: {
alias: {moment: `moment/moment.js`}
},
target: `web`
}
2) Use the same moment version as in antd library.
3) Use modularized antd
Use babel-plugin-import
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
// `style: true` for less
]
}
I use BundleAnalyzerPlugin to analyze the bundle.
plugins: [new BundleAnalyzerPlugin()]
Looking at the docs
https://ant.design/docs/react/getting-started#Import-on-Demand
there is a recommedation to import individual components on demand.
So, you can try and replace
import { Button} from 'antd'
with
import Button from 'antd/lib/button'
I reduced my bundle size by 500KB by editing config-override.js like so:
config-override.js
const { override, fixBabelImports } = require('customize-cra');
const path = require('path');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
}),
// used to minimise bundle size by 500KB
function(config, env) {
const alias = config.resolve.alias || {};
alias['#ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
config.resolve.alias = alias;
return config;
}
);
./src/icons.js
/**
* List all antd icons you want to use in your source code
*/
export {
default as SearchOutline
} from '#ant-design/icons/lib/outline/SearchOutline';
export {
default as CloseOutline
} from '#ant-design/icons/lib/outline/CloseOutline';
export {
default as QuestionCircleOutline
} from '#ant-design/icons/lib/outline/QuestionCircleOutline';
export {
default as PlayCircleOutline
} from '#ant-design/icons/lib/outline/PlayCircleOutline';
export {
default as PauseCircleOutline
} from '#ant-design/icons/lib/outline/PauseCircleOutline';
export {
default as LoadingOutline
} from '#ant-design/icons/lib/outline/LoadingOutline';
Before
After
Those few components are certainly not 1.2M together. Looks like you are importing the whole library when you only need a few components.
To get antd to load only the needed modules you should use babel-plugin-import. Check your console log for the "You are using a whole package of antd" warning described at that link.
Check out the docs for Create-React-App for how to implement it if you're using CRA.
Try using code splitting using webpack and react router. It will help you to load the modules asynchronously. This is the only solution helped me to improve the page load time when using ant framework.
Issue which caused large bundle size has been fixed in Ant Design 4.0.
Quoting from the release announcement.
Smaller size
In antd # 3.9.0, we introduced the svg icon ([Why use the svg icon?]
()). The icon API
using the string name cannot be loaded on demand, so the svg icon file
is fully introduced, which greatly increases the size of the packaged
product. In 4.0, we adjusted the icon usage API to support tree
shaking, reducing the default package size of Antant by about 150 KB
(Gzipped).
In order to install Ant Design 4 you have to do following
npm install antd#4.0.0-rc.1
// or in yarn
yarn add antd#4.0.0-rc.1