I'm using #babel/node package in my project
and when I run my project as:
npm run dev
I'm getting this message in cmd window:
> Using external babel configuration
> Location: "...(project folder path)\.babelrc"
And when I build my project jsx files, I received errors .
How to solve it?
Dev dependencies:
"devDependencies": {
"#babel/node": "^7.7.4",
"#babel/preset-env": "^7.7.6",
"babel-preset-env": "^1.7.0",
"nodemon": "^1.19.4"
}
.babelrc file:
{
"presets": ["next/babel", "#babel/preset-env"]
}
Had the same issue, removed "#babel/preset-env" in .babelrc file. Deleting this part solves the issue (worked for me).
My babel.rc for developing js apps using nodejs is like this:
{
"presets": [
["#babel/preset-env"],
],
"plugins": [
["#babel/transform-runtime"]
],
"env": {
"development": {
"sourceMaps": true,
"retainLines": true
}
}
}
And my dev script is like this:
"dev": "./node_modules/.bin/cross-env NODE_ENV=development ./node_modules/.bin/nodemon --exec ./node_modules/.bin/babel-node src/index.js | pino-pretty",
I use cross-env and pino, you can remove it.
I hope helpful.
Windows 10, VS Code, Node 10.16.2.
I have a small project that only contains a few files - index.js and a css file mainly.
npm start starts the project and a message says Server will reload automatically if you modify any file!
This works if I modify the css file for example. But if I modify the index.js file nothing happens.
My Node setup is default. I have not manually installed any modules to watch for file changes and I don't want to. Just trying to figure out why this doesn't work for the js file.
EDIT
Below is the contents of package.json. Something else interesting is that if I allow index.js to be linted I get a weird error about the equals sign after propTypes. Someone suggested might be an issue with webpack, which I know nothing about. But they said if the file won't build because of an error then a change in the file might not be detected. Note, though, that the project runs fine.
static propTypes = {
width: PropTypes.number,
height: PropTypes.number
};
Here is package.json:
{
"private": true,
"name": "some name",
"description": "some description",
"version": "0.1.0",
"scripts": {
"start": "nr1 package:serve",
"test": "exit 0"
},
"nr1": {
"uuid": "e13bf28f-8989-4a3a-832c-7c3f0eec6c3e",
"sdkVersion": 2
},
"dependencies": {
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3"
},
"browserslist": [
"last 2 versions",
"not ie < 11",
"not dead"
],
"devDependencies": {
"eslint": "^6.1.0",
"eslint-plugin-react": "^7.14.3"
}
}
I decided to delete the node modules folder, do a npm install then do a npm run serve it always gets stuck around 40% and stays there forever. When done from the UI it also gets stuck on a similar amount:
$ vue-cli-service serve --open --mode development --https --dashboard
INFO Starting development server...
40% building 118/134 modules 16 active
...tApp\node_modules\axios\lib\defaults.js
another time:
40% building 134/147 modules 13 active
...\node_modules\axios\lib\adapters\xhr.js
I notice Node.js process is constantly going at around 15%, but nothing happens if I wait and wait and wait.
Package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"#aspnet/signalr": "^1.1.4",
"axios": "^0.18.0",
"vue": "^2.6.10",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.6",
"vuex": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-e2e-cypress": "^3.7.0",
"#vue/cli-plugin-eslint": "^3.7.0",
"#vue/cli-plugin-unit-jest": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "always",
"asyncArrow": "always"
}
],
"keyword-spacing": [
"error",
{
"after": true
}
],
"semi": [
"error",
"always"
],
"indent": "off",
"vue/script-indent": [
"warn",
2,
{
"baseIndent": 1
}
]
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/"
}
}
$ node --version v10.15.3
How do I recover from this?
Update:
There is something magic about the number 40, I removed all mentions of Axios and now I still get stuck at 40% but with a different thing:
40% building 133/146 modules 13 active
...abel\runtime-corejs2\core-js\promise.js
In my case:
It was an error into the template.
Make sure there is a container tag just after
<template><container_tag> ... your code ...</container_tag></template> it could be as simple as a <div>
Try running npm run lint and see if you've got some errors in your code.
I had accidentally left an v-bind:attribute empty, e.g. <el :items=""></el>. Once resolved, I was able to build/serve.
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
}
}
Link: https://cli.vuejs.org/guide/troubleshooting.html#running-installation-enter code herewith-sudo-or-as-root
In my case:
git conflicts left >>>>>> master in the component, which stopped it from compiling
I my case there was:
git conflict
a tag was not completely closed it was like <div> ..... </div but vs code was not showing this error. when I opened every component, it highlighted the error
Check all your components for merge conflicts.
If you're using vscode, try to search for the string >>>>> on your project folder.
This seems to be caused by an error in one of your project files which prevents compilation and also compresses any error message.
I was personally bothered by this today, and spent a lot of time unnecessarily debugging WSL before finding the error in one of my components.
Try to comment out or remove any components, in templates, component registrations and imports, until it starts loading again.
I ran a linter as a step before serve and noticed that it corrected one of the files. It still didn't run. But I decided to go through the file and noticed that there was one closing tag missing.
It will be tedious, but look through your components to see whether you have a missing closing tag.
I also found that checking the first place the numbers pause and using that as a way to narrow down the file with a problem helped me sort it out faster.
40% building 223/268 modules 45 active ...rders\List.vue?
In my case, one of the environment variables wasn't defined. After I defined it using Webpack DefinePlugin, it all started working again. It would be great to see an actual error in such a case instead of the build process hanging.
I solve this problem by add .eslintignore file. Because I use a big packed third-party module directly in project.
It is most likely due to an error in your source files. In my case I started by removing an import of a deleted component in the main.js, then I removed a few <style> tags from two components (vue prohibits tags that have side effects in template). It may also help to monitor the last files being processed to get a clue about where to look at.
I wasn't missing any tags, but I had copied from my data section in the script to a v-if tag (to ensure I spelled the data variable properly) and I accidentally left the : instead of changing it to an =.
If you are having this problem, it might be something else to check for. It was pretty hard to see! But by removing sections of the code a piece a a time I zeroed in on it.
Now that Node 9.2.0 has all the new features of the language, how do I go about creating a node module that is backwards compatible with older versions?
If I have a small module that Node 9 supports out of the box, like this.
const {map} = require('lodash')
async function test (...args) {
return map(args, (item) => {
return `${item} yeah`
})
}
module.exports = test
Are there any was to use babel to transpile this for the specific backward version that I would need to support using babel env? Is there any way I can conditionally load those babel development dependencies, say installing this via Node 4 using post-install scripts?
It seems like this is one solution one downside of which is it requires babel-runtime as a dep just in case, even if the current version of node doesn't need it. But in 9.2.0 the code above is the built code, it's simply moved by babel.
Here's an example package.json and on install it will build the src.
{
"name": "example",
"version": "1.0.0",
"main": "lib/index.js",
"scripts": {
"build": "babel src -d lib",
"postinstall": "npm run build"
},
"dependencies": {
"babel-runtime": "^6.26.0",
"lodash": "^4.17.4"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1"
},
"babel": {
"plugins": [
"transform-runtime"
],
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
I'm working on two Node packages at once, let's call them Library and Consumer. Library is responsible for rendering a bunch of stuff in the browser. All Consumer does is import Library from 'library' and call Library(someConfigHere) -- it's basically just a test to make sure Library is doing what I expect in the browser.
I've npm linked Library into Consumer and am trying to run Browserify on Consumer, but I get this error: ParseError: 'import' and 'export' may appear only with 'sourceType: module'. Library does indeed contain an ES6 export statement, so I'm guessing that Browserify is only running against Consumer and not Library.
So my question is: is there any way to force Browserify to transform dependencies as well?
This is my package.json:
{
"name": "consumer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "budo index.js --port $PORT",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"browserify-shim": "^3.8.12"
},
"browserify": {
"transform": [
"babelify"
]
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
This is Consumer's index.js:
import Library from 'library' // <= this is what isn't getting babelified
console.log(Library);
This is Library's index.js:
export default (config) => {
console.log('Testing testing')
}
Browserify transforms can be configured to be global, which means they will be applied to files within node_modules, too.
The configuration is per-transform. With babelify, you'd configure it like this:
browserify().transform("babelify", {
global: true
})
Or, if you are using the command line, like this:
browserify ... -t [ babelify --global ] ...
Or, to configure it in the package.json, it should be something like this (note the added square brackets):
"browserify": {
"transform": [
["babelify", { "global": true }]
]
}
Babelify also implements an ignore option, so it would be possible to configure it to transform only the files within node_modules that you want it to. There is more information here.
Another solution would be to include a similar browserify/babelify configuration in your library module's package.json. When processing dependencies, Browserify will check said dependency's pacakge.json files for transforms and will apply any that are configured.