I have installed the npm package size-limit to monitor the size of my application. Following their documentation, I've written this in my package.json:
"scripts": {
"size": "size-limit"
},
"size-limit": [
{
"path": "./src/index.tsx",
"limit": "120 KB"
}
],
But when running yarn size I receive the following error:
/bin/sh: size-limit: command not found.
Weird. When directly running yarn size-limit I have:
error Command "size-limit" not found.
How to fix this?
Ran into the same error while trying to run yarn size for a React app. Solved it by installing size-limit and #size-limit/preset-app as dev dependencies:
yarn add size-limit #size-limit/preset-app --dev
Then:
add size-limit as a configuration in package.json
add the size script
(Just like you've done, but my path is build/static/**/*.{js,css,svg,woff,woff2,png,ttf,html})
{
...
"size-limit": [
{
"path": "..."
}
],
"scripts": {
...
"size": "yarn build && size-limit"
}
...
}
Reference:
https://www.npmjs.com/package/size-limit/v/0.19.3
https://medium.com/#eferhatg/create-react-app-continuous-integration-config-with-circleci-and-aws-2b0238cde169
Running yarn size now works:
You should try the following,
check if all dependencies, if not install yarn install
try with yarn run size (as #RobC pointed out)
delete node_modules folder and again install the dependencies
check if the package was installed correctly
Now yarn size should work.
Related
I am trying to create a npm package out of create-react-app typescript template. so far, the build is being generated but while testing it locally via npm install github_username/repo_name#branch_name it installs the package in other testing project, but I am getting this error while trying to run it.
These are the steps
Step 1 created a new react project using npx create-react-app project_name --template typescript
Step 2 Isolated components that I wanted to publish as npm package by creating lib/components inside src and lib/index.ts for exporting them.
Step 3 Installed Babel and build the dist in the root with some babel configuration.
{ "presets": [ [ "#babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" }, "useBuiltIns": "usage", "corejs": "3.6.5" } ], "#babel/preset-react" ] }
Step 4 In package.json, under scripts, replace the build script with the following:
"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files"
Step 6 npm run build
Step 7 Pushed to GitHub and install from github repo into diffrent react project and then the error came.
I am not really sure what exactly causing this error, but upon checking it seems like babel or webpack error, I tried changing some values inside tsconfig.json and webpack.config.ts (in the package repo) but it didn't solve it, also I am not very familiar with webpack.
Build of my project is failing - it is throwing the below mentioned error.
React version - 17.0.2
react-scripts - 4.0.3
app-frontend\App>yarn build
yarn run v1.22.17
$ react-app-rewired build
Creating an optimized production build...
Failed to compile.
./node_modules/tempa-xlsx/node_modules/pako/lib/zlib/trees.js 237:106
Module parse failed: Unexpected token (237:106)
File was processed with these loaders:
./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| * not null.
| */
function gen_bitlen(s, desc) /* deflate_state s;/ /* tree_desc desc; / the tree descriptor //{
| var tree = desc.dyn_tree;
| var max_code = desc.max_code;
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I've tried by upgrading react-scripts from 3.44 to 4.0.3
I've removed the node_modules and re-ran the yarn install and yarn build again.
Had the exact same problem. I had to downgrade some #Babel libraries. Found the solution from here.
Basically, add this to the dependencies in your package.json:
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin": "7.19.0",
"#babel/helper-module-transforms": "7.19.6",
Then run npm install again.
You need to add : above mentioned babel libraries (thatGuyDaki) in resolutions section instead of depedencies in package.json. so that it does not install any further updates of babel libraries, usually whenever your yarn-lock.json/package-lock.json files deleted, then more upto date babel version gets pulled In. that's why you are getting an error.
By adding babel libraries in resolutions : resolutions is simply a map of package names and the exact versions of those packages that should be kept in the dependency tree and also it will remove previous versions.
resolutions : {
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin": "7.19.0",
"#babel/helper-module-transforms": "7.19.6"
}
I have problem with my project on React and Sharepoint, after i called gulp clear
my serve.json
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://thisisprivatesite/sites/trainings-team/_layouts/workbench.aspx",
"api": {
"port": 5432,
"entryPath": "node_modules/#microsoft/sp-webpart-workbench/lib/api/"
}
}
also tried npm install, deleting my node_modules
my temp folder is empty
upd: i think typescript dosent create dist folder
Any help pls?
Try running npm install to restore the original state of the project, then start the project normally.
Hi everyone!
Recently I'm running into an error when trying to run my React app in Parcel that says I have an invalid config for the compressor, but I haven't changed anything from the default configurations. I've tried reinstalling but the same error occurs.
Here's the error I'm getting:
#parcel/core: Invalid Parcel Config
node_modules/#parcel/config-default/index.json:149:2
148 | },
> 149 | "compressors": {
> | ^^^^^^^^^^^^^ Possible values: "extends", "validators", "filePath", "resolveFrom"
150 | "*": [
151 | "#parcel/compressor-raw"
This is what is in the index.json for #parcel:
"compressors": {
"*": [
"#parcel/compressor-raw"
]
},
I've tried searching for this as a bug, but didn't find any results? Thanks for your help!
Here's what worked for me:
Remove this "#parcel/transformer-sass": "^2.0.0-rc.0" dev dependency from package.json file if it is there and delete the node_module folder.
Run this command to install dependencies: npm install
Run this command to install Parcel and Parcel/transformer-sass: npm install --save-dev parcel #parcel/transformer-sass
In package.json file, change the line "main": "src/index.html", to "source": "src/index.html". In the same file, add the following scripts in the scripts. "start": "parcel", "build": "parcel build"
In the index.html file, add this type="module" attribute to the script tag. e.g. <script type="module" src="index.jsx"></script>
After this, use the start script to start the app. e.g. npm run start
I'm using craco and craco-alias to implement aliases for imports in my Create React App project.
Followed instructions in https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation and https://github.com/risenforces/craco-alias#readme
I configured package.json to use craco instead of react-scripts for starting dev server, tests and production build
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"lint:css": "stylelint './src/**/*.css'",
"lint:js": "eslint 'src/**/*.js'",
"test:w": "craco test --watch",
"postinstall": "patch-package"
},
...
Then I created jsconfig.json file w aliases paths
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#components": ["components/*", "components"],
"#constants": ["constants/*", "constants"],
"#assets": ["assets/*", "assets"],
"#store": ["store/*", "store"],
"#utils": ["utils/*", "utils"]
},
"include": ["src"],
"exclude": ["node_modules", "build", "coverage"]
}
And craco.config.js file, which uses craco-alias plugin
/* craco.config.js */
const CracoAlias = require('craco-alias');
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
baseUrl: './src',
source: 'jsconfig',
}
}
]
}
Now I'm using aliases for imports in my app like this
// root index.js file
...
import Layout from '#components/Layout';
import store from '#store'; // this line causes error on CI build
function App() {
return (
<Layout>
/* inner components */
</Layout>
);
}
Everything works fine (aliased imports works on dev-server, in jest tests and even if I serve locally built project) until I push it to github repo. That repo has configured github actions to build and test project on remote server and it fails with error on build step, after installing all packages.
Run yarn build
yarn run v1.22.4
$ craco build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Failed to compile.
./src/index.js
Cannot find module: '#store'. Make sure this package is installed.
You can install this package by running: npm install #store.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
##[error]Process completed with exit code 1.
Could somebody help me understand what wrong with my code? Why craco or webpack expect '#store' to be external package instead of aliased import of internal module?
In my case problem wasn't in craco or webpack, but in my previous actions and OS filesystem differences. I'm using Windows 10 and WSL in VS Code terminal. So before I use '#' symbol for aliases I tried to use CamelCase for my folders and renamed it via windows explorer (because for me it was simpler to close VSCode and rename files via explorer than to open new bash terminal in new VSCode window after closing opened files).
Then I prefer to use '#' symbol and rename folders back to lowercase. I configured aliases and pushed changes to remote github repo, where CI actions were run. When CI was running actions it can't find 'store' folder (because previously I renamed it to 'Store' and it was last saved path to folder in git), so it tried to find external package named 'store'.
To fix this I change git config to stop ignoring namecasing for my folder by running command git config core.ignorecase false. Git history was updated, I push it to remote repo and CI actions succeeded.