I am currently trying to convert our existing vue.js project into nuxt.js. I am unable to add flowtype support in nuxt.js. when i run the flow server it says no errors!! but running npm run dev, its throwing error on the flow syntax.
.flowconfig
[include]
pages/**/.*
components/**/.*
layouts/**/.*
apiRoutes/.*
store/.*
utils/.*
[ignore]
.*/build/.*
.*/config/.*
.*/dist/.*
.*/node_modules/.*
.*/static/.*
.*/test/.*
.*/ssl/.*
.*/.nuxt/.*
[libs]
./flow/
[options]
emoji=true
module.file_ext=.vue
module.file_ext=.js
server.max_workers=3
log.file=./flow.log
suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
unsafe.enable_getters_and_setters=true
module.system.node.resolve_dirname=node_modules
module.name_mapper='^.*\.css$' -> 'empty/object'
module.name_mapper='^.*\.js$' -> 'empty/object'
module.name_mapper='^#/\(.*\)$' -> '<PROJECT_ROOT>/\1'
i've added all the neccessary babel and eslint packages.
.babelrc
{
"presets": [
["env", { "modules": false }],
"stage-2",
["es2015", {"modules": false }],
"flow-vue"
],
"plugins": [
"transform-runtime",
"transform-class-properties",
"syntax-flow",
"transform-flow-strip-types"
],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
.eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
jquery: true
},
extends: [
'standard',
'plugin:flowtype/recommended'
// 'plugin:vue/recommended'
],
// required to lint *.vue files
plugins: [
'html',
'flowtype-errors',
'flowtype'
],
// add your custom rules here
rules: {
'flowtype-errors/show-errors': 2,
// allow paren-less arrow functions
'arrow-parens': 0,
'semi': ["error", "always"],
// allow async-await
'generator-star-spacing': 0
},
globals: {}
}
On running npm run dev, it doesnt parse flowtype syntax
I suggest following the instructions on the flow website to set up Babel. In particular there is a preset, so you shouldn't need to configure individual rules. Then you'll actually need to run Babel (again, instructions are on the website). Once you have run Babel, you should be able to run the code it outputs in Node.
Related
I have a react native application that doesn't follow the convention of having all files in src directory. It appears eslint looks for the src directory by default.
How can I tell eslint to look for ./components', ./screens' etc instead?
Passing in the path when running eslint works but that means those files only get checked when that command gets ran instead of allowing my text editor to detect issues.
"lint": "eslint ./**/*.tsx"
I have tried adding include paths to my eslint config too but that doesn't make any difference.
module.exports = {
env: {
browser: true,
es2021: true,
'react-native/react-native': true,
},
extends: [
'plugin:react/recommended',
'standard-with-typescript',
'plugin:react-native-a11y/android'
],
overrides: [
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json'
},
plugins: [
'react',
'react-native'
],
rules: {
indent: ['error', 2],
'linebreak-style': [
'error',
'unix'
],
semi: [
'error',
'always'
]
},
includePaths: ["./**/*.tsx"] // this doesn't seem to have any effect
};
I want to be able to run eslint and not have to pass in any optional args as it should be defined already within my eslint config.
DOCS:
https://material-ui.com/guides/minimizing-bundle-size/#development-environment
"Create a .babelrc.js file in the root directory of your project:
const plugins = [
[
'babel-plugin-transform-imports',
{
'#material-ui/core': {
// Use "transform: '#material-ui/core/${member}'," if your bundler does not support ES modules
'transform': '#material-ui/core/esm/${member}',
'preventFullImport': true
},
'#material-ui/icons': {
// Use "transform: '#material-ui/icons/${member}'," if your bundler does not support ES modules
'transform': '#material-ui/icons/esm/${member}',
'preventFullImport': true
}
}
]
];
module.exports = {plugins};"
https://nextjs.org/docs/advanced-features/customizing-babel-config
"To add presets/plugins with custom configuration, do it on the next/babel preset like so:
{
"presets": [
[
"next/babel",
{
"preset-env": {},
"transform-runtime": {},
"styled-jsx": {},
"class-properties": {}
}
]
],
"plugins": []
}"
QUESTION:
How to properly configure babel for material-ui in Next.js ? My implementation below is apparently incorrect as import { ConstructionOutlined } from '#material-ui/icons';is still causing very long load times in dev mode. I observed no error messages when trying the below implementation and variations.
CODE:
{
"presets": [
[
"next/babel",
{
"babel-plugin-transform-imports":
{
"#material-ui/core": {
// Use "transform: '#material-ui/core/${member}'," if your bundler does not support ES modules
"transform": "#material-ui/core/esm/${member}",
"preventFullImport": true
},
"#material-ui/icons": {
// Use "transform: '#material-ui/icons/${member}'," if your bundler does not support ES modules
"transform": "#material-ui/icons/esm/${member}",
"preventFullImport": true
}
}
}
]
],
"plugins": []
}
OR
module.exports = {
presets: [
["next/babel"]
],
plugins: [
[
'babel-plugin-import',
{
'libraryName': '#material-ui/core',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'core'
],
[
'babel-plugin-import',
{
'libraryName': '#material-ui/icons',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'icons'
],
]
}
OR ELSE ?
I could exactly understand your problem. Follow this.
npm install babel-plugin-import --save-dev
Create a .babelrc file in the root directory of your next.js project with the following content:
{
"presets": ["next/babel"],
"plugins": [
[
'babel-plugin-import',
{
libraryName: '#mui/material',
libraryDirectory: '',
camel2DashComponentName: false,
},
'core',
],
[
'babel-plugin-import',
{
libraryName: '#mui/icons-material',
libraryDirectory: '',
camel2DashComponentName: false,
},
'icons',
],
]
}
Restart your development server.
This above babel configuration will convert
// from
import { Button, TextField } from '#mui/material'; ( great developer experience)
// to
import Button from '#mui/material/Button'; (smaller bundle size means great user experience)
import TextField from '#mui/material/TextField';
As a result, you will notice
faster loading of development server.
smaller bundle size
also faster client navigation with next/link and fallback:true.
Source: Babel config docs
Mui
Next.js
Hope it works for you too!
Adding babel-plugin-transform-imports is what worked for me. My .babelrc file looks like this:
{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-transform-imports",
{
"#material-ui/core": {
"transform": "#material-ui/core/${member}",
"preventFullImport": true
},
"#material-ui/icons": {
"transform": "#material-ui/icons/${member}",
"preventFullImport": true
}
}
]
]
}
Try using the non-esm version that you have commented out in your implementation. After doing that the build time dropped significantly for me. I did have to update styles imports for Material UI like they recommend in their documentation as well.
How can I export my component's propTypes so when I include this package in my project, IDE can suggest them without affecting my bundle size ?
Or how the user may be able to get rid of them ?
Is it safe to mark prop-types as peeDependency since react includes it ?
I use rollup#1.27.13 and #babel/core#7.7.7 and few other plugins for each of them.
When I remove propTypes using the code bellow, my bundle size is 1.58kb gzipped
{
"presets": [
"#babel/preset-react",
["#babel/preset-env", {
"modules": false
}]
],
"plugins": [
["transform-react-remove-prop-types", {
"removeImport": true
}],
"#babel/plugin-proposal-optional-chaining"
]
}
But when I leave them (and then I can get suggestions by IDE) it jumps to 6.45kb gzipped.
rollup config:
{
input: 'src/index.js',
output: [
{
file: pkg.main,
format: 'cjs'
},
{
file: pkg.module,
format: 'es'
}
],
plugins: [
external(),
babel({
exclude: 'node_modules/**'
}),
resolve(),
commonjs(),
terser()
],
}
Thanks
I'm using the ESLint plugin for Jest to lint my Jest tests. The structure of my project is
my-project
|
|--tests
|
|--unit
|
|--e2e
I only want to use the Jest plugin when linting files in the tests/unit dir (because the files in tests/e2e are not Jest tests), but when I run the linting, this plugin is applied to all files under tests/unit, which results in spurious errors in the tests/e2e files.
I can disable individual rules in the tests/e2e dir by adding the following to eslintrc.js
module.exports = {
root: true,
env: {
node: true,
'jest/globals': true
},
extends: [
'eslint:recommended',
'plugin:jest/recommended',
],
parserOptions: {
parser: 'babel-eslint'
},
plugins: ['jest'],
"overrides": [
{
"files": ["tests/e2e/*.js"],
"rules": {
"jest/no-disabled-tests": "off",
"jest/expect-expect": "off",
"jest/valid-expect-in-promise": "off"
}
}
]
}
But rather than disabling individual rules in the tests/e2e dir, I would like to disable the Jest plugin completely.
From the eslint docs regarding overrides:
A glob specific configuration works almost the same as any other ESLint config. Override blocks can contain any configuration options that are valid in a regular config, with the exception of root and ignorePatterns.
Credit to the SO answer that helped me: Eslint allow multiple parsers based on glob patterns
The example in that answer also demonstrates overriding plugins.
My example uses two overrides sections, one for JavaScript files and one for TypeScript. This could easily be two different directories.
{
"overrides": [
{
"files": "**/*.ts",
"plugins": [
"prettier",
"#typescript-eslint"
],
"extends": [
"eslint-config-prettier",
"prettier",
"prettier/#typescript-eslint",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"plugin:prettier/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
}
},
{
// Disabling TypeScript lint rules for JS files.
"files": "**/*.js",
"plugins": [
"prettier"
],
"extends": [
"esnext",
"eslint-config-prettier",
"prettier",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:prettier/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
},
"env": {
"node": true
},
"rules": {
}
}
]
}
Encountered the same issue and haven't found a built in solution in eslint's config files, but you can try something that worked for me: ignore the E2E tests pattern in the main eslintrc.js and create another eslintrc.js file nested in the E2E directory.
as follows:
my-project
|-- eslintrc.js // this is your main eslint config
|--tests
|
|--unit
|
|--e2e
|
|-- eslintrc.js // nested eslintrc without the "jest" plugin
Note that you would have to tell the babel-eslint parser in the nested eslintrc where the babel config files is (usually as part of the parserOptions) since it is no longer in the same directory.
Main eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
'jest/globals': true
},
extends: [
'eslint:recommended',
'plugin:jest/recommended',
],
parser: 'babel-eslint'
plugins: ['jest'],
ignorePatterns: ["tests/e2e/*.js"]
}
Nested eslintrc.js file in tests/e2e/:
module.exports = {
root: true,
env: {
node: true
},
extends: ['eslint:recommended'],
parser: 'babel-eslint',
parserOptions: {
babelOptions: {
configFile: '../../babel.config.js' // assuming this is the name of your babel config file in the project root
}
}
}
You can use ignorePatterns in your config file or create a .eslintignore file.
See: https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
I've set up the grunt-eslint in my gruntfile.js, but when I run the "grunt eslint", nothing happends. The task looks like it would start but just stands still even after 15min.
All my other tasks works just fine, all except eslint wich shows no errors or anything.
gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
eslint: {
options: {
configFile: '.eslintrc.json'
},
target: ['src/js/*.js']
},
})
grunt.loadNpmTasks('grunt-eslint');
grunt.registerTask('eslint', [
'eslint',
]);
}
.eslintrc.json
{
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
}
Both the gruntfile and .eslintrc.json is in root
Does anyone know what it is that can cause this? Is my setup wrong?
I had the same problem.
If you add --verbose option when running:
grunt eslint --verbose
You'll see that your task is running repeatedly - because you named your task eslint(which is the same name as already registered eslint task) grunt falls into infinite loop.
Change
grunt.registerTask('eslint', [
'eslint',
]);
to:
grunt.registerTask('myeslinttask', [
'eslint',
]);
and run:
grunt myeslinttask
the problem of:
grunt.registerTask('eslint', [
'eslint',
]);
is that it will call it self forever, just delete this registerTask command
and run grunt eslint , that will be enough to