I've created a brand new project with npx create-nuxt-app my-cool-project but I do have some errors when running yarn dev.
Though the "loose" option was set to "false" in your #babel/preset-env config, it will not be used for #babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for #babel/plugin-proposal-private-methods.
The "loose" option must be the same for #babel/plugin-proposal-class-properties, #babel/plugin-proposal-private-methods and #babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["#babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Do you have any idea about this one? It reminds me of this other issue: Nuxt js - Fresh install of nuxt 2.14.6 contains babel "loose option" warnings
This issue is indeed back as shown in this Github issue
https://github.com/nuxt/nuxt.js/issues/9224#issuecomment-893263501
This happens if your Nuxt version is between 2.15.5 and 2.15.7 (I think).
A temporary solution could be adding this to your nuxt.config.js file, as suggested here
build: {
babel: {
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-private-methods',
// or with JUST the line below
['#babel/plugin-proposal-private-property-in-object', { loose: true }]
],
},
}
A definitive fix will probably be shipped shortly, feel free to subscribe to the Github issue to be notified of the latest updates.
EDIT: This will be fixed once this PR is merged and there's a new release: https://github.com/nuxt/nuxt.js/pull/9631
As for me helps this modification on answer above:
yarn add --dev #babel/plugin-proposal-class-properties #babel/plugin-proposal-private-methods #babel/plugin-proposal-private-property-in-object
Then change nuxt.config.js:
build: {
babel:{
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-private-methods', { loose: true }],
['#babel/plugin-proposal-private-property-in-object', { loose: true }]
]
}
},
Related
How do I create a Vue 2 project that uses ESLint + StandardJS + Prettier?
StandardJS's rules should naturally take precedence over Prettier's.
vue create only provides the following options:
ESLint + Standard
ESLint + Prettier
I tried 2 things:
I mixed the eslint configurations of both of the above options. It resulted in a dependency hell, and once that was solved it didn't really work as expected.
I added the prettier-standard package to my eslintrc.js, it didn't work as expected either. It's worth mentioning that prettier-standard works well when manually executing it from the command line.
I'm of course looking to set this up at the project config level and not at the IDE level.
Can you try this repo I've just created? Looks like it's working great from what I've tested.
https://github.com/kissu/so-eslint-standard-prettier-config
Notes
I created 2 projects and dumped the configuration of the standard one into the Prettier one, the changes can be seen in this commit
CLI's current version of #vue/eslint-config-standard is throwing an error (Environment key "es2021" is unknown) because it requires ESlint 7 to work, as shown in this changelog
bumping ESlint to the latest version 7.29.0, fixed the issue
to check your project's current version of ESlint, you can run npx eslint --version
of course, you need to have the ESlint extension enabled and Prettier one disabled (if using VScode), otherwise it may conflict
I've tried to remove #vue/prettier from
extends: ['plugin:vue/essential', 'eslint:recommended', '#vue/standard', '#vue/prettier']
and see if it's successfully removes any ; and it does!
The errors are indeed coming from ESlint (if we do remove #vue/prettier), and they're fixed by ESlint only upon save (after an ESlint server + VScode restart)!
Putting Prettier back works fine of course.
Luckly, I had a new PC, hence had the opportunity to try a whole fresh config with VScode.
I had to install ESlint only and have those settings into my settings.json
{
"editor.codeActionsOnSave": {
"source.organizeImports": false,
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}
}
The formatting works perfectly and nothing more is required.
I have eslint 7.8.1 with Vue Prettier on and i don't have any problem, maybe the version of eslint that you have is not compatible with Prettier or maybe your eslint have some errors?
In each way i will put my eslint configuration and maybe it will help you!
module.exports = {
env: {
'browser': true,
'es6': true,
'node': true
},
parserOptions: {
'parser': 'babel-eslint'
},
extends: [
'#vue/standard',
'plugin:vue/recommended'
],
rules: {
"vue/html-indent": ["error", 4, {
"attribute": 1,
"closeBracket": 0,
"switchCase": 0,
"ignores": []
}],
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
'indent': ['error', 4],
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'vue/script-indent': [
'error',
4,
{ 'baseIndent': 1 }
],
'space-before-function-paren': ['error', 'never'],
'semi': [2, "never"],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off'
},
overrides: [
{
'files': ['*.vue'],
'rules': {
'indent': 'off'
}
}
]
}
Also maybe you have forgot some of the devDependecies on package.json, those are mine
"eslint": "^7.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"
Hope that those will help you !
I'm not sure what I'm doing wrong here. I have VueJs 3 with Vuetify. Works great with Chrome and Firefox, but it is not loading in IE and Edge. I am attempting to load polyfills with Babel and forcing Vue CLI to transpile dependencies for Vuetify.
package.json
"babel": {
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
vue.config.js
module.exports: {
transpileDependencies: ['vuetify']
}
main.ts
import 'core-js/es6';
import 'regenerator-runtime/runtime';
The imports are included at the top of my main.ts file. I have been using the official documentation to set this up.
What am I missing here?
If you created the project using vue-cli and added vuetify using vue add vuetify, then the solution to make it work in Edge should be to add transpileDependencies: ['vuetify'] to the vue.config.js file.
But in my case I added vue/vuetify to an already existing project and did not use vue-cli. So to make it work I installed core-js npm install core-js#2 --save and added this to the rules in my webpack.config.js
{
test: /\.js$/,
exclude: /node_modules\\(?!(vuetify)).*/,
use: [
{
loader: 'babel-loader',
options: {
configFile: './babel.config.js',
}
}
]
}
Then I added the babel.config.js file to the root of the project.
module.exports = {
presets: [
['#babel/preset-env', {
debug: true,
useBuiltIns: 'usage',
corejs: { "version": 2, "proposals": true }
}],
],
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-transform-spread',
]
}
A little late reply, but I couldn't find this solution anywhere else and this was one of the first posts showing up when I was searching for it myself. So I figured I'll post what worked for me here.
I ended up just removing Vuetify (I was only using one feature from it which was easily replaced) and using the babel polyfill cdn. Probably not the best solution but got it working for now.
Running grunt - I get this error message:
Running "sass:all" (sass) task
Fatal error: The implementation option must be passed to the Sass task
I've tried re-installing grunt, node, npm, dependencies - but I always come back to this error I can't get past.
Should I post my Gruntfile.js? Frankly, this was set up by a third-party and we don't use it often - I'm thinking maybe we should start from the ground up because it is from about 4 years ago originally... but wondering if anyone has seen this error before and knows of a fix/workaround.
With the update to grunt-sass 3, you have to choose whether you want to use node-sass or dart-sass to compile
For node-sass you need to install the module with:
$ npm install --save-dev node-sass
In you gruntfile, you than need to add node-sass as requirement and add the define constant as implementation option:
const sass = require('node-sass');
require('load-grunt-tasks')(grunt);
grunt.initConfig({
sass: {
options: {
implementation: sass,
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
See also official page for more details: https://www.npmjs.com/package/grunt-sass
use this
**const sass = require("node-sass");**
**grunt.initConfig({
sass: {
options: {
implementation: sass,
sourceMap: true,
},
dist: {
files: {
"css/styles.css": "css/styles.css",
},
},
},
});
This will help you solve the problem
UPDATE: Only works for grunt-sass 2.x
I had this problem when upgrading from grunt-sass 1.x to 2.x. This solved it for me:
Add implementation: 'sass' to your sass.options object in Gruntfile.js like so:
options: {
implementation: 'sass',
outputStyle: 'expanded',
sourceMap: true,
quiet: true // stop depreciation errors
},
I am working on a play scala project that uses webpack and react. I did copy my webpack.config.js used for development and renamed it to webpack.prod.config.js. Using this new file, I want to be able to turn off the console.log and warnings. I used:
plugins: [
new ExtractTextPlugin("styles.css"),
new webpack.NormalModuleReplacementPlugin(/debug/, process.cwd() + './emptyDebug.js')
],
performance: {
hints: false
}
but I can still see those messages. Any solutions?
Thx
You could set the stats option to 'none':
stats: 'none'
Or you could use webpack-dev-middleware and set noInfo to true. If you're using webpack-dev-server you can set noInfo to true in the config:
devServer: {
noInfo: true
}
When I'm launching my project using React-Native default packager, I have this error: Unexpected token on this line:
static propTypes = {
/// ...
};
I took a look on React-Native issues on GitHub, but I didn't find a solution.
Any suggestion?
React-Native packager use Babel for transfer ES6 and ES7, but NOT ALL features. The enable list is here. In your case, class-props is not enabled by default in RN packager. You can use Babel to compiler your code before packager, or just enable it in the packager setting. See this official doc for more information.
Try appending your propTypes to your class:
var MyClass extends React.Component {
....
}
MyClass.propTypes = {
.... /* enter proptypes here */
}
After #Fomahaut answer, I keep looking on Facebook's GitHub repository and found this issue: https://github.com/facebook/react-native/issues/2182
Create a .babelrc file at the project's root directory
Add more rules to Babel
Example:
{
"retainLines": true,
"compact": true,
"comments": false,
"whitelist": [
"es6.arrowFunctions",
"es6.blockScoping",
"es6.classes",
"es6.constants",
"es6.destructuring",
"es6.forOf",
"es6.modules",
"es6.parameters",
"es6.properties.computed",
"es6.properties.shorthand",
"es6.spread",
"es6.tailCall",
"es6.templateLiterals",
"es6.regex.unicode",
"es6.regex.sticky",
"es7.asyncFunctions",
"es7.classProperties",
"es7.comprehensions",
"es7.decorators",
"es7.exponentiationOperator",
"es7.exportExtensions",
"es7.functionBind",
"es7.objectRestSpread",
"es7.trailingFunctionCommas",
"regenerator",
"flow",
"react",
"react.displayName"
],
"sourceMaps": false
}
According to this answer, you need to install a plugin for class properties as of Babel 6.
As of Babel 6, you now need the transform-class-properties plugin to
support class properties.
Steps:
Run this: npm install babel-plugin-transform-class-properties
Add this to your .babelrc: "plugins": ["transform-class-properties"]
(Note, it's a plugin, not a transform; so don't put it in the "presets" list.)
Worked for me.
Install the stage-0 Babel preset (npm i --save-dev babel-preset-stage-0) and add it to .babelrc file's presets section, e.g.:
{ "presets": ["react", "es2015", "babel-preset-stage-0"] }
See if that helps:
$ npm install babel-plugin-transform-decorators
navigate to /<your project root>/node_modules/react-native/packager/react-packager/.babelrc
Add "transform-decorators" to this list:
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [
"syntax-async-functions",
"syntax-class-properties",
"syntax-trailing-function-commas",
"transform-class-properties",
"transform-es2015-arrow-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-computed-properties",
"transform-es2015-constants",
"transform-es2015-destructuring",
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}],
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-template-literals",
"transform-flow-strip-types",
"transform-object-assign",
"transform-object-rest-spread",
"transform-react-display-name",
"transform-react-jsx",
"transform-regenerator",
"transform-es2015-for-of",
-->"**transform-decorators**"<--
],
"sourceMaps": false
}