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.
Related
Background
For a very simple ReactJS project, I wanted to
add ESLint capabilities :
npm install --save-dev eslint-config-react-app eslint#^8.0.0
package.json after installing ESLint :
{
"name": "reactjs-app",
"scripts": {
"dev": "next dev"
},
"dependencies": {
"next": "^12.1.4",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"eslint": "^8.12.0",
"eslint-config-react-app": "7.0.0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
}
In the above package.json, none of the three dependencies next,
react, react-dom, depends on any ESLint package – neither
directly nor indirectly.
So all installed ESLint packages are dependencies of
eslint-config-react-app.
All the files needed for the project are in a zip file
available for download.
To try it out, just download, unpack and run npm install.
1
index.js :
// index.js
import { useState } from 'react';
function HomePage() {
const [showParagraph, setShowParagraph] = useState(true);
const showParagraphHandler = useCallback(() => {
setShowParagraph((prevToggle) => !prevToggle);
}, []);
console.log('App RUNNING');
console.log(showParagraph);
return (
<div className='app'>
<h1>Hi there!</h1>
<button onClick={showParagraphHandler}>A button</button>
</div>
);
}
export default HomePage;
The question
An observant reader will notice that the import for useCallback is
missing.
But autocompletion (in VS Code Ctrl + space)
wrongly suggests to import from
react/cjs/react.development, or from
react/cjs/react.production.min,
instead of from react which would have been more correct.
Why does this happen? – Is there a bug fix?
^ click to enlarge
References
README for eslint-config-react-app
All the project files in a zip file
Suggested solutions for the bug in this question
1
For me, the npm install command took about 5 minutes to complete.
The npm install command downloads and installs all packages in
package.json – including indirect packages.
Running npm run dev from the command line should start the
application in your default web browser.
Why does this happen? – Is there a bug fix?
It seems the reason is that #types/react is a missing dependency in
eslint-config-react-app so the obvious bug fix is to add
#types/react manually to your project by running :
npm install #types/react --save-dev
VS Code's autocompletion through Ctrl + space
now correctly suggests react.
1
Installing #types/react adds "#types/react": "^18.0.0", in your
package.json under "dependencies" :
{
"name": "reactjs-app",
"scripts": {
"dev": "next dev"
},
"dependencies": {
"#types/react": "^18.0.0",
"next": "^12.1.4",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"eslint": "^8.12.0",
"eslint-config-react-app": "7.0.0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
}
1
If it doesn't work, try restarting VS Code.
I'm using sveltekit and I can't use the files api to import html templates. So I decided to import by writing a module that imports the content of the document as a string (described here).
// src/global.d.ts
/// <reference types="#sveltejs/kit" />
declare module '*.html' {
const content: string
export default content
}
So far so good, but now I need to test the code and jest can't interpret the code.
● 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:
/home/developer/workspace/src/assets/html/confirm_email.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<!DOCTYPE html>
^
SyntaxError: Unexpected token '<'
I don't understand how jest understands the .d.ts files... How do I get to test the code?
Do you install #babel/plugin-transform-runtime"?
I share my config for jest/svelte-jester..
I have:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"]
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"],
}
svelte.config.js
import vercel from '#sveltejs/adapter-vercel'
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: vercel(),
vite: {
define: {
'process.env': process.env,
},
},
},
transform: {
"^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
}
};
export default config;
babel.config.json
{
"presets": [
["#babel/preset-env", { "modules": "auto" }]
],
"plugins": ["babel-plugin-transform-vite-meta-env","#babel/plugin-transform-runtime"]
}
jest.config.js
export default {
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.svelte$": "svelte-jester",
},
"moduleFileExtensions": ["svelte", "js"],
"testEnvironment": "jsdom",
"setupFilesAfterEnv": ["#testing-library/jest-dom/extend-expect"]
}
and whole package.json
{
"name": "sveltekit",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"package": "svelte-kit package",
"preview": "svelte-kit preview",
"test": "jest src",
"test:watch": "npm run test -- --watch"
},
"devDependencies": {
"#babel/core": "^7.16.12",
"#babel/plugin-transform-modules-commonjs": "^7.16.8",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "^7.16.11",
"#supabase/supabase-js": "^1.29.1",
"#sveltejs/adapter-auto": "^1.0.0-next.7",
"#sveltejs/kit": "^1.0.0-next.215",
"#sveltejs/svelte-virtual-list": "^3.0.1",
"#testing-library/svelte": "^3.0.3",
"autoprefixer": "^10.4.1",
"babel-jest": "^27.4.6",
"babel-plugin-transform-vite-meta-env": "^1.0.3",
"jest": "^27.4.7",
"postcss-load-config": "^3.1.1",
"prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.5.1",
"svelte": "^3.44.0",
"svelte-jester": "^2.1.5",
"svelte-lazy": "^1.0.12",
"tailwindcss": "^3.0.8",
"ts-jest": "^27.1.3"
},
"type": "module",
"dependencies": {
"#fontsource/fira-mono": "^4.5.0",
"#lukeed/uuid": "^2.0.0",
"#testing-library/jest-dom": "^5.16.1",
"cookie": "^0.4.1",
"svelte-lazy-image": "^0.2.0",
"swiper": "^8.0.3"
},
"testEnvironment": "jsdom"
}
I hope it will help you.I had a lot of troubles too with setting up jest..
1.Import html as string
I solved the problem using another approach...
I'm using a resource of vite to import the html file as an asset, as can be seen here in the documentation
import confirm_email_template from '../../../assets/html/confirm_email.html?raw'
2.Test using Jest
For production it works perfectly, but for unit testing the code breaks because Jest can't import the asset as a module.
So the second part of the problem was fixed (I don't know if this is the best practice) using asset mocks.
// jest.config.cjs
{
⋮
moduleNameMapper: {
⋮
'([a-zA-Z_ ]+\\.html)\\?raw$': '<rootDir>/__mocks/$1.cjs'
}
⋮
}
To make it work, I created the following folder structure:
__mocks
|
confirm_email.html.cjs
another_asset_mocked.html.cjs
The confirm_email.html.cjs looks like this:
// __mocks/confirm_email.html.cjs
module.exports = '<html>content<html>'
Im about to go from webpack to Parcel, but some problems has come to my attention with how to put everything together. Especially since my project structure is a bit different than the one proposed in the documentation.
Here's my project structure
root
- package.json
- js
-- app.js
-- shim.js
- scss
-- main.scss
public
And I want to put the 'js' files into public/ and then the scss-file (main.scss) into public/css, but I can't figure out how this is supposed to work with 'targets' and 'source' in my package.json.
Here's how I want it to look after the servings;
root
- package.json
- js
-- app.js
-- shim.js
- scss
-- main.scss
public
- css
-- main.css
- app.js
- shim.js
package.json
{
"name": "embed",
"scripts": {
"start": "parcel serve ./src/index.html",
"build": "parcel build ./src/index.html",
"dev": "parcel serve ./js/app.js ./js/shim.js --dist-dir ./public"
},
"source": ["./scss/main.scss"],
"css": "./scss/main.scss",
"targets": {
"css": { "distDir": "./public/css" }
},
"browserslist": "> 0.2%",
"devDependencies": {
"#babel/core": "^7.13.1",
"#babel/preset-env": "^7.13.5",
"parcel": "next",
"sass": "^1.32.8"
},
"dependencies": {
"#popperjs/core": "^2.8.3",
"bootstrap": "^5.0.0-beta2"
}
}
The above configuration doesnt create any css-file at all. But if I add:
"dev": "parcel serve ./js/app.js ./js/shim.js ./scss/main.scss -out --dist-dir ./public"
It generates a css file into public/scss/. And not public/css which I actually want. Is there any way to achieve this?
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 have a Nuxt.js project to which I added just a few components for now. It runs flawlessly if build local. I wanted to test it on Heroku, however I get some webpack related build errors, in which I bury already 3 days.
remote: ERROR in ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue
remote: Module not found: Error: Can't resolve '../components/Sidebar/_Sidebar.vue' in '/tmp/build_fe4d2e874dff634cf8c7db3886460988/layouts'
remote: # ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue 30:0-57
remote: # ./layouts/default.vue
remote: # ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"],"cacheDirectory":false}!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue
remote: # ./.nuxt/App.vue
remote: # ./.nuxt/index.js
remote: # ./.nuxt/server.js
I've also installed a fresh copy the nuxtjs.org starter theme but there is no error. It builds like charm.
This is my package.json
{
"name": "some-nuxt",
"version": "0.3.0",
"description": "nuxt-sandbox ",
"private": true,
"dependencies": {
"axios": "^0.15.3",
"nuxt": "^0.9.9",
"vue-touch": "^2.0.0-beta.4"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"heroku-postbuild": "npm run build"
},
"devDependencies": {
"ava": "^0.18.2",
"babel-eslint": "^7.1.1",
"eslint": "^3.16.0",
"eslint-config-standard": "^6.2.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-promise": "^3.4.2",
"eslint-plugin-standard": "^2.0.1",
"jsdom": "^9.11.0",
"node-sass": "^4.5.0",
"sass-lint": "^1.10.2",
"sass-loader": "^6.0.2"
}
}
This is some customisations from my nuxt.config.js file.
css: [
// '~assets/css/main.css',
{ src: '~assets/scss/app.scss', lang: 'sass' } // scss instead of sass
],
...
alias: {
'hammerjs$': 'vue-touch/dist/hammer-ssr.js'
},
build: {
/*
** Run ESLINT on save
*/
vendor: ['axios', 'vue-touch'],
extend (config, { isClient }) {
if (isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
plugins: ['~plugins/vue-touch']
}
I found the reason that the case sensitive file system Linux of server of Heroku and insensitive system of mine are collided. When I renamed my sub components to uppercase, Github did not push the change to repo.
Neither npm run dev, nor npm run build has given any error in my computer. However when the Linux is looking for the exact names of the folder the problem occured.
This might be a precaution, working on a clean case sensitive formatted partition: https://coderwall.com/p/mgi8ja/case-sensitive-git-in-mac-os-x-like-a-pro
The title of the document explains the best. http://timnew.me/blog/2013/04/18/mac-os-x-case-insensitive-file-system-pitfall/
Adding up to what Gokhan Ozdemir's answer. I've faced a similar issue and realized I had changed a folder's name in a case-sensitive only way.
Example: from fonts to Fonts
It seems that it has to do with mac OS being a case insensitive environment.
I was able to solve it by following these steps:
git mv fonts fonts2
git mv fonts2 Fonts
git commit -m "changed case of dir"
Notice that I had to change to fonts2 initially so that the case-sensitive renaming takes place effectively.
Here's the SO answer explaining the solution to this problem.