Develop Reference

ESLint CLI (global install) --fix does not working

I have tried it for a day. Nothing changed.
I installed ESLint globally, using: npm i -g eslint
I initialized ESLint using eslint --init
(when I trying to install eslint locally and running ./node_modules/bin/eslint --init, it says that didn't have that command)
When I run this command: eslint ./js/lesson_1.js, all works
When I run this command: eslint --fix ./js/lesson_1.js, eslint didn't fix my file.
What have I done wrong?
(sorry for my English _)

I'm on a Vue2 + Nuxt project
In order to make use of prettier + eslint the correct way, do the following:
First, install prettier:
npm install --global prettier
Secondly, install eslint/prettier integration:
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
Thirdly, make sure you add the settings to .eslintrc.js
...
extends: [
"#nuxtjs",
"plugin:nuxt/recommended",
"plugin:prettier/recommended",
"eslint:recommended",
],
...
At last, add the desired configuration in the file .prettiercr
{
"semi": false,
"singleQuote": false
}
Now you can run the following command to fix the entire project issues: (don't forget the dot at the end)
eslint --fix .

Migrating create-react-app from javascript to typescript

I started a react project using create-react-app few months ago and I'm interesting in migrating the project from Javascript to Typescript.
I saw that there is a way to create react app with typescript using the flag:
--scripts-version=react-scripts-ts
But I didn't find any explanation how can I migrate an existing JS project to TS.
I need it to be done incrementally so I can work with both .js and .ts files so I can do the transformation over time.
Does anyone has any experience with this migration? What are the required steps that should be done to make this work?

UPDATE: create-react-app version 2.1.0 support typescript so for those of you who are starting from scratch you can use it to create new application with typescript, and according to the documentation it should be done with the following command:
$ npx create-react-app my-app --typescript
For existing projects, after updating to version 2.1.0, add the following packages to your project's dependencies with the following command:
$ npm install --save typescript #types/node #types/react #types/react-dom #types/jest
and then you can simply rename .js to .ts files.
I found a solution to migrate create-react-app from javascript to typescript, this way doesn't require eject.
Create a temporary react project with typescript by running the command create-react-app --scripts-version=react-scripts-ts
(Note - requires create-react-app to be installed globally)
In your own project - under package.json file remove the react-scripts
Add react-scripts-ts to your project by running the command yarn add react-scripts-ts or if your are using npm then npm install react-scripts-ts. Or, add "react-scripts-ts": "2.8.0" to package.json.
From the project you created in step 1 copy the files: tsconfig.json, tsconfig.test.json tslint.json to your own project
Under your own project, in package.json, under scripts section, change react-scripts instances to react-scripts-ts (should be under start, build, test and eject
Install the typings for react by installing the following modules using yarn or npm: #types/node, #types/react and #types/react-dom. Put in devDependencies section if using package.json.
Change index.js file name to index.tsx
In your tsconfig.json file add the following configuration: "allowSyntheticDefaultImports": true - for more info
NOTE step 7 might require additional modification depends on what you have in your index.js file (if it depends on JS modules in the project).
Now you can run your project and it might work, for those of you who are getting error that contains You may need an appropriate loader to handle this file type regarding .js files, it happens because babel doesn't know how to load .js file from .tsx files. What we need to do is to change the project configuration. The way I found doing it without running eject is using react-app-rewired package. This package lets you configure external configuration which will be added/override the default project settings. What we'll do is using babel to load these type of files. Let's moved on:
Install the package react-app-rewired using yarn or npm
In your root folder (where package.json is located) create a new file with the name config-overrides.js
Put this code in config-overrides file:
var paths = require('react-scripts-ts/config/paths')
module.exports = function override(config) {
config.module.rules.push({
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
cacheDirectory: true,
},
})
return config
}
Edit package.json so the start/start-js, build, test, and eject scripts use react-app-rewired as shown in the project readme. E.g. "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom".
Now you can start you the project and the problem should be solved. You might need additional modifications depending on your project (additional types and so).
Hope it helps
As suggested here in the comments, it's possible to define: "compilerOptions": { "allowJs": true} in your tsconfig.json file, so you can mix JS and TS without react-app-rewired. Thanks for mention this!

Create React App v2.1.0 was released today with TypeScript support today. That means you no longer need to eject or use the react-scripts-ts fork; all you need to do if you have an existing Create React App project is install the required packages:
$ npm install --save typescript #types/node #types/react #types/react-dom #types/jest
$ # or
$ yarn add typescript #types/node #types/react #types/react-dom #types/jest
You can then simply rename .js files to .ts files to start using TypeScript.
(If you have an existing app using the create-react-app-typescript fork, here's a tutorial on how to port it to regular Create React App.)

You will need to eject a configuration in order to do that.
After ejecting you need to perform the following steps:
Add typescript extensions tsx and ts to the extensions table
in the webpack configs (dev and prod).
Add ts-loader. Here is an example
{
test: /\.(ts|tsx)$/,
include: paths.appSrc,
use: [
{
loader: require.resolve('ts-loader'),
},
],
},
Change eslint to tslint
Add source-map-loader to get a possibility to debug Typescript files.
{
test: /\.js$/,
loader: require.resolve('source-map-loader'),
enforce: 'pre',
include: paths.appSrc,
}
Create a Typescript config file and remember to set allowJs to
true.

1). run
npm install --save typescript #types/node #types/react #types/react-dom #types/jest
or
yarn add typescript #types/node #types/react #types/react-dom #types/jest
2). Add the tsconfig.json
run npx tsc --init
3). Add this to the tsconfig
"compilerOptions": {
"jsx": "react-jsx", // this line
Now you can integrate tsx into an existing project 😊

1). run
npm install --save typescript #types/node #types/react #types/react-dom #types/jest
or
yarn add typescript #types/node #types/react #types/react-dom #types/jest
2). Rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx)
3). run npm i #types/react-dom #types/react-redux #types/react-router-dom
4). Restart your development server!
enjoy :)

Error: Cannot resolve module 'babel-loader'

I'm trying to run webpack on my postinstall script in my package.json when I push to heroku but I am getting the following error.
ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /tmp/build_6cb4b10367d9382367ab72f2e2f33118
When I run the command locally I get no issues. Below is my webpack config - i have tried using resolveLoader to fix the resolving issue but to no avail?
var path = require('path');
var webpack = require('webpack');
var config = {
entry: path.resolve(__dirname, './app/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.less$/,
loader: 'style!css!less'
}]
},
resolve: {
extensions: ['', '.js', '.jsx', '.less'],
modulesDirectories: [
'node_modules'
]
},
resolveLoader: {
root: path.resolve(__dirname, 'node_modules')
},
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
]
};
module.exports = config;
Any suggestions? Thanks

I found out why. I didn't have babel or babel-core in my package.json. Add them fixed the error.
"devDependencies": {
"babel": "^5.8.23",
"babel-core": "^5.0.0",
"babel-loader": "^5.3.2"
}

In my case, I had mis-spelled the loader while installing it, so make sure you install
babel-loader
NOT
bable-loader

In my case, I tried the command:
$ npm install babel-loader --save
and continued to fix the rest based on the reminder from the console, and it fixed the issue:
"ERROR in Entry module not found: Error: Can't resolve 'babel-loader'"

I had a similar error when working on a Rails 6 application.
I think the issue was that the Babel-loader node package wasn't installed properly or the executable couldn't be located by the application.
All I had to do was to upgrade the node packages in the application by running:
yarn upgrade
Here's my devDependencies in my package.json file:
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0
Note: I didn't have to include Babel-loader node package in the list of devDependencies for it to work.

I'm using yarn and webpacker for a rails + react project.
I know not everyone can upgrade all their dependencies without breaking things, but for me, adding running yarn upgrade fixed this error.
That was with only #babel/core in my dependencies config, since babel-loader is included as a dependency of webpacker.

In some cases, when deploying to production (for example with Rails Webpacker), dev dependencies are not loaded. So having babel-loader in devDependencies will not work.
In fact, it makes sense that babel-loader would be placed in dependencies, not devDependencies, because it's used in the production code itself. The only packages that should be in devDependencies are those that are run in development, such as tests and linters.

I had mine in devDependencies and it didn't work, I switched it to dependencies and it finally worked!

I deleted the yarn.lock and node_modules folder then omit babel-loader in your devDependencies in package.json, then i rerun yarn, and it works.

When using yarn 2, webpack 4 is unable to resolve the loader. or update to webpack 5
I had to use PnPify to make it work.
yarn pnpify webpack

In my case react-scripts was importing babel-loader as dependency. It worked for a while because it was in package-lock.json. If you have react-scripts in your deps, try removing node_modules, package-lock.json and do npm install again.

gulp - do i have to install plugins for every project?

I have a question about gulp.
I understand that when i want to use gulp with my project I need to run "npm init" for package json, I need to install gulp locally (assuming globally is already installed) with "npm install --save-dev gulp" and i need to install all the plugins i want to use (--save-dev so locally?). Im using about 10 gulp plugins and thats about 300mb+ of download (i dont understand why) for every project. Also the download is taking way too much time.
My question is: do i have to install all plugins for every new project i want to run with gulp? Or can i just copy gulp file and run it without installing plugins all over again because it takes 30 minutes to install them...

No. You basically have these options:
npm install pkg // install package locally
npm install -g pkg // install globally
npm install pkg --save // install package locally and save to package.json
npm install -g pkg --save // install package globally and save to package.json

Install webpack to separate dependencies?

Im going through a tutorial on webpack (third day and still confused as anything!) and Im combing through the commands:
npm i webpack --save-dev
The above command installs the webpack as a node module to '--save-dev'? Im confused what '--save-dev' is. And is it a normal convention for webpacks to use?
Also where is this dependency being saved? I dont find any reference to it in webpack.config.js or package.json for that matter?
Many thanks

npm i webpack --save-dev is a shorthand for npm install webpack --save-dev. The --save-dev flag tells npm to save the dependency as a development dependency, i.e. it will be listed in devDependencies in package.json instead of the "normal" dependencies section.
What this means is that development dependencies are dependencies that are not required to run your application, but only for development purposes like running unit tests, bundling the application, etc. etc.
From the documentation for npm install:
-D, --save-dev: Package will appear in your devDependencies.
Here is another stackoverflow post on differences between "normal" dependencies and development dependencies.
Cheers, Alex