I have a webcomponent project that I had setup from a very simple setup but I'd like to use open-wc. After scaffolding a project for webcomponent, I noticed my dependencies look like this:
"dependencies": {
"lit-html": "^1.1.2",
"lit-element": "^2.2.1"
},
"devDependencies": {
"es-dev-server": "^1.23.0",
"eslint": "^6.1.0",
"#open-wc/eslint-config": "^2.0.0",
"#open-wc/prettier-config": "^0.1.10",
"husky": "^1.0.0",
"lint-staged": "^8.0.0",
"#open-wc/testing-karma": "^3.0.0",
"deepmerge": "^3.2.0",
"#open-wc/testing-karma-bs": "^1.0.0",
"#open-wc/testing": "^2.0.0",
"#open-wc/demoing-storybook": "^1.0.1"
}
Instead of having a direct dependencies on various tools, it seems there's an additional layer of dependencies (i.e. #open-wc/eslint-config, #open-wc/prettier-config, #open-wc/demoing-storybook).
Why is that extra layer needed? Why wouldn't I want to have direct dependencies on those tools? For some there is a direct dependency (i.e. eslint), but for others they are coming through that additional layer (i.e. storybook, prettier, etc).
I'm having a little difficulty understanding the overall setup.
You'll have to ask open-wc for their specific reason but one reason is so they can build and test for a single dependency version. If they rely on peerDependencies there could be no telling what version would be installed.
Related
Background
I'm trying to setup a Remix app using Tailwind CSS for styling and Prettier for styling. Recently the Tailwind team released their official classes-sorting plugin but for some reason Prettier says it "can't find it".
The error looks like the following in the Prettier output:
["INFO" - 1:17:09 PM] Formatting file:///home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx
["ERROR" - 1:17:09 PM] Error resolving prettier configuration for /home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx
My file structure (files related to the problem) looks like this:
/prettier.config.js
/tailwind.config.js
/package.json
"devDependencies": {
"#remix-run/dev": "^1.1.3",
"#remix-run/serve": "^1.2.2",
"#types/node": "^17.0.21",
"#types/react": "^17.0.24",
"#types/react-dom": "^17.0.9",
"autoprefixer": "^10.4.2",
"concurrently": "^7.0.0",
"dotenv": "^16.0.0",
"postcss": "^8.4.6",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.8",
"prisma": "^3.10.0",
"tailwindcss": "^3.0.23",
"typescript": "^4.1.2"
},
"engines": {
"node": ">=14",
"yarn": "1.22.17"
},
Prettier config
`/prettier.config.js`
module.exports = {
plugins: [require('prettier-plugin-tailwindcss')],
};
> When hovering over that "require" I get an error that says:
module "/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index"
Could not find a declaration file for module 'prettier-plugin-tailwindcss'. '/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index.js' implicitly has an 'any' type.
Try `npm i --save-dev #types/prettier-plugin-tailwindcss` if it exists or add a new declaration (.d.ts) file containing `declare module 'prettier-plugin-tailwindcss';`ts(7016)```
I encountered this problem too before. Though I just tried adding the Tailwind Prettier plugin to a new Remix project and everything seems to be working. Here are the steps I performed:
Installed Tailwind npm install -D tailwindcss postcss autoprefixer concurrently
After finishing all the steps outlined in the link above, I ran npm install -D prettier prettier-plugin-tailwindcss
I don't have a prettier config file in place. I'm able to run Prettier through vscode and I can confirm that the Tailwind classes are automatically sorted.
This is the package.json
"peerDependencies": {
"react": "^16.8.3 || ^17",
"redux": "^2.0.0 || ^3.0.0 || ^4.0.0-0"
},
"devDependencies": {
"react": "^16.14.0",
"redux": "^4.0.5",
}
Generally if the package (usually the src directory) depends on 'react', which react-redux do, we should put the dependency to 'dependencies'. My understanding that react-redux doesn't do that is because they don't want to let npm install to install it, instead, they want to just let npm to throw a warning (npm v7 will install it again) based on 'peerDependencies' tag. With "react" in 'devDependencies' tag, the compile can still work.
First I hope someone can confirm my understanding, or let me know what it should be.
My question is, since 'react-redux' can work with redux#2, why in 'devDependencies' it doesn't use redux#2? The risk is that how can we make sure the code is safe with redux#2 while we work and test using redux#4?
Thanks.
edit - There is something strange: mongo appears in both package.json and in .meteor/packages files (should it appear in package.json at all?? it wasn't there before the update) but in different versions. here is my package.json:
{
"name": "something",
"version": "1.1.1",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.49",
"babel-runtime": "^6.26.0",
"bootstrap": "^3.3.7",
"google-protobuf": "^3.5.0",
"grpc": "^1.12.2",
"grpc-tools": "^1.6.6",
"meteor-node-stubs": "^0.3.3",
**"mongodb": "^3.1.0-beta4",**
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-progressbar.js": "^0.2.0",
"react-router": "^3.2.1",
"react-router-dom": "^4.2.2"
}
}
and here is my .meteor/packages:
meteor-base#1.3.0 # Packages every Meteor app needs to have
mobile-experience#1.0.5 # Packages for a great mobile UX
**mongo#1.4.2 # The database Meteor supports right now**
blaze-html-templates#1.0.4 # Compile .html files into Meteor Blaze views
reactive-var#1.0.11 # Reactive variable for tracker
tracker#1.1.3 # Meteor's client-side reactive programming library
standard-minifier-css#1.4.0 # CSS minifier run for production mode
standard-minifier-js#2.3.1 # JS minifier run for production mode
es5-shim#4.7.0 # ECMAScript 5 compatibility for older browsers
ecmascript#0.10.6 # Enable ECMAScript2015+ syntax in app code
shell-server#0.3.1 # Server-side component of the `meteor shell` command
session#1.1.7
tarang:ssl
After updating to 1.6.1.1, my app won’t run, crashing with message 'Error: Cannot find module “mongodb” '.
Tried to run meteor npm install, even took away the entire node_modules folder and built it again.
Tried to run meteor npm update.
Tried to run meteor npm install mongodb.
Tried to downgrade back to version 1.6.0.1.
Still can’t find mongodb.
Important - mongodb is there, all collections are there - I can access it through the terminal with "meteor mongo".
Any help?
If it helps - The data in the db can be erased if there is no other way.
(running on ubuntu 16.04)
Thanks
In the end, the problem was not in the project but in meteor globally, so I uninstalled and re-installed meteor globally, and everything got back to normal…
Thank you all!
I'm using Atom and the linter-eslint npm package. I have installed the following dev dependencies:
"devDependencies": {
"eslint": "^4.9.0",
"eslint-config-rallycoding": "^3.2.0",
"eslint-plugin-react": "^7.4.0"
}
This is my .eslintrc file in order to use the eslint-config-rallycoding eslint rules:
{
"extends": "rallycoding"
}
When I open a file, the first line shows this message:
The eslint-config-rallycoding eslint rules work great with the React/Redux starter set that the same author made, so I'm thinking something isn't set up right to use with create-react-app?
The error message is incredibly vague though and I am not seeing any errors in the specified file.
I would like to install grunt and grunt-cli to my OpenShift deployment (which is a Python 2.7 cartridge).
I have created a package.json file as follows:
{
"author": "--",
"name": "--",
"version": "0.3.0",
"homepage": "--",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-cli" : "~0.1.13",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-html2js": "^0.2.9",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-copy": "^0.7.0",
"grunt-index-html-template": "^0.2.5",
"grunt-contrib-watch": "^0.6.1"
}
}
However, after SSHing into the server post deployment, grunt is not installed. My questions are:
requirements.json is more of a Node thing. Therefore, is it that OpenShift ignores this file because I am not using Node (even though NPM is installed).
If 1 is correct, how do I go about installing grunt? (I've tried running 'npm install -g grunt' both via SSH and in an action hook script, but the fails due to lack or permissions).
This guy had the same issue (Can I run Grunt/Gulp on my PHP 5.4 cartridge?) but I couldn't find what I needed in the answer.
Any suggestions?
you'll need to run scl enable nodejs010 in your ./action-hook/start command to enable a specific software collection in your gear. Hopefully that helps!