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.
Related
I have a nrwl Angular-Jest application setup via npx create-nx-workspace.
While working on this project, I had upgraded from:
"firebase": "9.1.3",
"firebase-admin": "9.12.0",
"firebase-functions": "3.15.7",
to
"firebase": "9.16.0",
"firebase-admin": "11.5.0",
"firebase-functions": "4.2.0",
to get the extension emulator working locally. Although it works, I now have issues running jest. It says that firebase now has es6 imports and wont work. Error Message Below:
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/Users/[justOnlyMe]/Desktop/[nrwlProject]/node_modules/firebase-admin/lib/esm/auth/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import mod from "../../auth/index.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (../../../node_modules/firebase-functions/lib/common/providers/identity.js:25:14)
I've also tried using transformIgnorePatterns to get a transformation just for firebase node_modules but now jest continues to run and seems unresponsive. (I believe this may be an issue with ts-jest in jest).
transform: {
'^.+\\.[tj]s$': 'ts-jest',
},
transformIgnorePatterns: [
'../../../node_modules/(?!#firebase.*/)',
'../../../node_modules/(?!firebase/)',
'../../../node_modules/(?!firebase-admin/)',
'../../../node_modules/(?!firebase-functions/)',
],
Question: Does anyone know how to get es6 node_modules to work with jest in a nrwl nest.js typescript project?
My jest config:
module.exports = {
displayName: '[projectName]',
preset: '../../../jest.preset.js',
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
},
},
transform: {
'^.+\\.[tj]s$': 'ts-jest',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
moduleFileExtensions: ['ts', 'js', 'html'],
coverageDirectory: '../../../coverage/apps/back/[projectName]',
testEnvironment: 'node',
}
In your jest config add in the transform object the babel-jest config:
"transform": {
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "ts-jest"
}
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.
I'm working on a project and when I try to run parcel dev or build command it outputs the following error:
× Build failed.
#parcel/core: Failed to resolve 'process' from './node_modules/#firebase/firestore/dist/index.esm2017.js'
D:\Workspace\Front-End\Apps\RISC-Aswan\node_modules\#firebase\firestore\dist\index.esm2017.js:5741:38
5740 | return t.store(e);
> 5741 | }
> | ^
5742 | // visible for testing
5743 | /** Parse User Agent to determine iOS version. Returns -1 if not found. */
It was working before and now I don't know the cause of the problem. I tried to delete node__modules folder and run npm install but nothing changes.
I have the following imports in the script file:
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc } from 'firebase/firestore';
the second line importing the firestore is what causing the problem, commenting it leads to everthing works fine.
Here's a photo with the terminal message and the esm2017.js file
My package.json dependecies:
"devDependencies": {
"autoprefixer": "^10.4.2",
"parcel": "^2.2.1",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.18"
},
"dependencies": {
"firebase": "^9.6.6",
"vanilla-hamburger": "^0.2.3"
}
for some reason modifying alias to the following worked in dev and build
"alias": {
"process": {
"global": "{}"
}
}
Here's the other suggested workaround i tried mentioned in this issue
used alias in my package.json file
"alias": {
"process": "false"
}
manually installed process package
"dependencies": {
"process": "^0.11.10",
},
updated node to v16.14.0 instead of v16.13.1.
used parcel build ./src/index.html and removed "source": "./src/index.html" in the package.json
In your package.json you are defining parcel to be the higher version compatible with 2.2.1:
"devDependencies": {
"autoprefixer": "^10.4.2",
"parcel": "^2.2.1"
// Rest of packages
Currently there is an issue in the GitHub repository for parcel regarding this problem with Firebase. While that issue shows your exact error message, the general issue to keep track of is this open issue, since this problem affects libraries other than Firebase. Something you could do is to avoid using an affected version of parcel (2.3.1 as far as I see on the issues), or keep track of the issue to update to a fixed version when it releases.
EDIT (2/23/2021):
It seems that both GitHub issues are now closed with the release of Parcel 2.3.2. I tested building a React project with Parcel and Firebase using version 2.3.1, and I encountered the exact same error as you. Updating to 2.3.2 solved the issue completely on my end without any other change of dependencies. Just in case anyone comes across this thread later on.
I was using yarn on netlify and had to do this to fix:
echo 'nodeLinker: node-modules' >> /opt/build/repo/.yarnrc.yml
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!