How to use babel babel-plugin-transform-optional-chaining package in Meteor?
I've created .babelrc file in the root directory with following code:
{
"plugins": ["transform-optional-chaining"]
}
But it's not working.
Run:
meteor update --release 1.6.1
meteor npm i #babel/core #babel/runtime #babel/preset-stage-1
Create .babelrc:
{ "presets": [ "#babel/preset-stage-1" ] }
And you are ready to go!
Related
everyone.
This is my first time here, and I apreciate your helps.
I'm new with Vuejs, student actually.
Overview:
I'm trying build a plugin component to show simple notifications.
Then I'm using Vue3 and vite. I created a demo and run npm link to test in local.
Problem:
In my demo project when I run npm run dev everything working correctly, but when I run npm build something stop working in my plugin componet. I found that v-for is not working inside of my plugin component, in my demo project it's working normal. I think could be some setup in my vite.config to render it correctly.
This is my vite config:
// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.js'),
name: 'Vue3SimpleNotification',
// the proper extensions will be added
fileName: (format) => `vue3-simple-notification.${format}.js`,
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue'
}
}
}
} ,
plugins: [vue()]
})
I am getting the error:
Unable to resolve path to module '#aws-amplify/ui-react/styles.css'
I am using the amplify authenticator component shown in the following link https://ui.docs.amplify.aws/components/authenticator#quick-start
I had already my backend configured as always and is fine and working.
npx create-react-app exampleapp
npm start
amplify init
amplify add api
amplify push
npm install aws-amplify #aws-amplify/ui-react
amplify add auth
amplify pus
The app.js is configured as follows
import { Amplify } from 'aws-amplify';
import { Authenticator } from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
export default function App() {
return (
<Authenticator>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
In general the application runs fine and is able to connect with the amplify backend. The problem is that it can not find the css style. It seems that is not in the'#aws-amplify/ui-react'. My Node version is 16.13.1. Also, I am using the last version of the packages at this moment in the package.json
"#aws-amplify/ui-react": "^2.1.5",
"aws-amplify": "^4.3.10"
When I initially saw #senju's answer (upvote it!) I thought, "that will just hide the problem". But no, in my case eslint was the cause of the problem.
Rather than #senju's solution of disabling warnings for all unresolved imports, I suggest just disabling it for the specific import with an eslint-specific comment:
// eslint-disable-next-line import/no-unresolved
import '#aws-amplify/ui-react/styles.css';
Try upgrading aws-amplify to 4.3.11 or above and upgrade to the latest version of #aws-amplify/ui-react. This version is compatible with the latest version of create-react-app which uses Webpack 5. This issue was fixed in aws-amplify here:
https://github.com/aws-amplify/amplify-js/pull/9358
I had the same issue. Changing my eslint setting worked for me.
Here is my .eslintrc
{
"extends": [
"next",
"next/core-web-vitals",
"prettier",
"plugin:testing-library/react",
"plugin:import/recommended",
"plugin:import/warnings",
"plugin:storybook/recommended"
],
"rules": {
"import/no-unresolved": "off", //add
"import/order": [
"error",
{
"alphabetize": {
"order": "asc"
}
}
]
},
"overrides": [
{
"files": ["*.stories.#(ts|tsx|js|jsx|mjs|cjs)"],
"rules": {
"storybook/hierarchy-separator": "error",
"storybook/default-exports": "off"
}
}
]
}
I used the latest version of aws-amplify and still got the error on build. Changing .eslintrc worked.
I want sass linter in Gatsby's project
plugins: [
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-source-contentful`,
options: {
},
},
{
resolve: "gatsby-plugin-eslint",
options: {
},
},
`gatsby-plugin-sass`
],
How to include it?
I want to detect incorrect CSS rules etc...
ESlint is a JavaScript linter, so it can't analyze nor lint your Sass code.
However, you can use Stylelint to parse SCSS, Saas, or CSS files.
You can follow the default configuration steps in their GitHub:
Install it by:
npm install --save --dev #primer/stylelint-config
Add a stylelintrc.json file in the root of your project (it can be a .yml or .js format too if needed)
Add your configuration rules. You can inherit from the default ones by using the extends rule as:
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": "tab",
"number-leading-zero": null
}
}
Customize your commands to trigger your lint rules (change the file extension accordingly):
npx stylelint "**/*.css"
Resources:
https://stylelint.io/user-guide/get-started
https://dev.to/stories_of_ren/switching-from-sass-lint-to-stylelint-5f8c
Has anyone managed to get Tailwind.css working with Gatsby.js?
Configuring postCSS plugins with Gatsby is a bit tricky... If anyone has managed to get Tailwind up and running with Gatsby, I'd love to know how!
I managed to get this working (including hot reloading) thanks to this post.
Basically I had to install postcss and autoprefixer additionally:
npm install autoprefixer postcss-cli
I added a postcss.config.js to the root of my Gatsby site folder with this content (tailwind.js is my Tailwind config - yours might be named differently):
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer'),
],
};
Then I added a CSS watch and build script to my package.json, and included these scripts in my default develop and build scripts:
"scripts": {
"build:css": "postcss src/layouts/index.css -o src/layouts/generated.css",
"watch:css": "postcss src/layouts/index.css -o src/layouts/generated.css -w",
"build": "npm run build:css && gatsby build",
"develop": "npm run watch:css & gatsby develop",
...
}
(Please note the input (index.css) and output (generated.css) filenames and locations for my css are specific to my project. Feel free to use your own convention.)
Let me know, if this works for you.
As a supplement to morgler's answer, here is a similar solution I ended up with (which includes Sass and PurgeCSS).
I went with a CLI solution because gatsby-plugin-postcss-sass currently runs PostCSS before Sass (which breaks Tailwind), and Gatsby's PostCSS plugins are a bit difficult to configure via Webpack at the moment.
I included Sass so I can break main.sass into more manageable partials, and added PurgeCSS so I can remove any unused Tailwinds classes in production. I've found that PurgeCSS is more effective than PurifyCSS, which is why I opted not to use gatsby-plugin-purify-css.
To begin, create a src/styles folder with the following structure (feel free to customize this for your project and adapt the settings below accordingly):
src/
styles/
builds/
after-postcss/
main.css
after-purgecss/
main.css
after-sass/
main.css
// other subfolders for sass partials...
main.sass
Install the necessary dependencies:
npm i node-sass-chokidar postcss-cli purgecss
Add the following to gatsby-node.js (to disable Gatsby's default PostCSS plugins):
const ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.modifyWebpackConfig = ({ config, stage }) => {
switch (stage) {
case 'develop':
// Remove postcss from Gatsby's dev process:
config.removeLoader(`css`)
config.loader(`css`, {
test: /\.css$/,
loaders: [`style`, `css`]
})
break
case 'build-css':
// Remove postcss from Gatsby's build process:
config.removeLoader(`css`)
config.loader(`css`, {
test: /after-purgecss\/main\.css/,
loader: ExtractTextPlugin.extract([`css?minimize`])
})
break
}
return config
}
Add a postcss.config.js file to the project root:
const tailwind = require('tailwindcss')
const cssnext = require('postcss-cssnext')
module.exports = {
plugins: [
// your file's name or path may differ:
tailwind('./src/styles/tailwind.config.js'),
cssnext()
// add any other postcss plugins you like...
]
}
Add the following scripts to package.json:
"scripts": {
"watch:sass": "node-sass-chokidar --source-map true src/styles/main.sass -o src/styles/builds/after-sass -w",
"watch:postcss": "postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css -w",
"watch:styles": "npm run watch:sass & npm run watch:postcss",
"build:sass": "node-sass-chokidar src/styles/main.sass -o src/styles/builds/after-sass",
"build:postcss": "postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css",
"build:purgecss":
"purgecss --css src/styles/builds/after-postcss/main.css --con public/index.html src/**/*.js -o src/styles/builds/after-purgecss",
"build:styles": "npm run build:sass && npm run build:postcss && npm run build:purgecss",
"develop": "gatsby develop & npm run watch:styles",
"build": "npm run build:styles && gatsby build"
// ...
},
In development, run npm run develop instead of gatsby develop. The watch: scripts will run Sass + PostCSS (in that order) whenever a change is made to main.sass or any of its imports.
To build the site, run npm run build instead of gatsby build. The build: scripts will run Sass + PostCSS (without the watch tasks) + PurgeCSS (in that order).
Add the following to layouts/index.js to import the after-postcss version of main.css during development and the after-purgecss version during production:
switch (process.env.NODE_ENV) {
case `development`:
require('../styles/builds/after-postcss/main.css')
break
case `production`:
require('../styles/builds/after-purgecss/main.css')
break
}
Hope that helps someone! If anyone knows how to convert this into a Webpack equivalent that works with Gatsby, please feel free to post it here.
I recently added it on top of the Gatsby starter default and wrote a detailed step by step guide.
https://www.michaelfasani.com/2020/installing-tailwind-css-on-top-of-the-gatsby-starter-default/
That's my setup and is working perfectly fine with Gatsby:
tailwind.config.js
module.exports = {
mode: "jit",
purge: [
"./src/pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
package.json
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean",
"tw:build": "tailwindcss build ./src/styles/global.css -o ./public/styles/global.css",
"tw:prod": "cross-env NODE_ENV=production postcss build ./src/styles/global.css -o ./public/styles/global.css",
"tw:watch": "onchange \"tailwind.config.js\" \"src/**/*.css\" -- npm run tw:build"
},
You can also use cssnano it's an awsome extension for purging tailwind css
postcss.config.js
const cssnano = require("cssnano");
module.exports = {
plugins: [
require("tailwindcss"),
cssnano({
preset: "default",
}),
require("autoprefixer"),
],
};
Also the devDependencies that are needed for the latest Tailwind version are these:
package.json devDependencies
"devDependencies": {
"autoprefixer": "^10.3.6",
"gatsby-plugin-postcss": "^4.14.0",
"postcss": "^8.3.9",
"postcss-cli": "^9.0.1",
"tailwindcss": "^2.2.17"
}
}
Also make sure to include these on top of the global.css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
I have to run tests against a JavaScript file using grunt framework.
Just needed any simple example to do this, the target file (/test/filename.js) has dependencies on one more file.
Basically you have to make use of grunt-execute command.
Here is the explaination:https://www.npmjs.org/package/grunt-execute
In simple words , this is what you should do for your specific requirement:
module.exports = function(grunt) {
grunt.initConfig({
execute: {
simple_target: {
// execute javascript files in a node child_process
src: ['filename.js']
}
}
})
grunt.loadNpmTasks('grunt-execute');
grunt.registerTask('default', ['execute']);
}
And also,
"grunt": "~0.4.4",
"grunt-execute": "~0.1.5"
should be present in package.json, then just do npm install