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
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.
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.
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.
I'm installing stylelint-config-styled-components on a react project.
When I execute npm run lint:css (or use the stylelint command directly through the CLI) I don't get any results. I have intentionally put in extra spaces and duplicate style declarations, so there should definitely be some feedback from stylelint that I've broken rules. However, I'm getting nothing, not even an error message. Any ideas?
I have installed the following packages:
stylelint 9.1.3
stylelint-config-recommended 2.1.0
stylelint-config-styled-components 0.1.1
stylelint-processor-styled-components 1.3.1
I am using the following script in package.json:
"scripts": {
//other scripts
"lint:css": "stylelint './src/**/*.js'"
}
The contents of my .stylelintrc:
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
]
}
My project's file structure (I have tried running the command directly on files with the same result, so I don't think it's an issue with it not being able to find the .js files)
-root
-.stylelintrc
-src
-Components
-Directory
-ThingIWantLinted.js
-AnotherDirectory
-AnotherThingTolint.js
Also got this issue. After upgraded to stylelint 9.4.0 now lint result show as expect.
Reference issue. https://github.com/stylelint/stylelint/pull/3261
Except (')
"scripts": {
//other scripts
"lint:css": "stylelint ./src/**/*.js"
}
This question is related to this SO post. I'm using create-react-app CLI for my project. It is a small scale web app which I start (locally) by npm start and it appears on browser. Now I need to generate a bundle.js file of my entire web app so that it can be used with Adobe Phonegap. How do I do that with my existing app?
react-scripts build should do it. Add a build field to the scripts section of your package.json file and then run npm run build. Example:
{
"repository": {
...
},
...
"dependencies": {
...
}
"scripts" : {
...
"build" : "react-scripts build"
}
}