Trying to run babel : "cannot find module @babel/core"

Question

I'm trying to set up a build environment to explore react. My build process uses gulp.

I installed packages like this:

npm install --save-dev gulp-babel@7 babel-core babel-preset-env

After discovering that I needed to install something related to babel and react I also ran:

npm install --save-dev @babel/preset-react

My .babelrc has this:

{ "presets": ["@babel/preset-react"] }

My gulpfile has this:

gulp.task('scripts', function() {
    return gulp.src(['./src/js/main.js' ])
        .pipe(babel({
            presets : ['@babel/preset/react']
        }))
        .pipe(concat('test.js'))
        .pipe(gulp.dest('./js'))
        .pipe(uglify())
        .pipe(rename('test.min.js'))
        .pipe(gulp.dest('./js')) ;
});

When I run 'gulp scripts' I get this:

[22:51:14] Using gulpfile ~/play/learning-react-2/gulpfile.js
[22:51:14] Starting 'scripts'...
[22:51:14] 'scripts' errored after 59 ms
[22:51:14] Error in plugin "gulp-babel"
Message:
    Cannot find module '@babel/core' (While processing preset: "/home/bob/play/learning-react-2/node_modules/@babel/preset-react/lib/index.js")

I deleted babel-core from node_modules, and reinstalled it using the command:

npm install --save-dev @babel/core

If I look at the contents of node_modules, I see these packages related to babel:

babel-code-frame/
babel-helper-builder-binary-assignment-operator-visitor/ babel-helper-call-delegate/
babel-helper-define-map/
babel-helper-explode-assignable-expression/
babel-helper-function-name/
babel-helper-get-function-arity/
babel-helper-hoist-variables/
babel-helper-optimise-call-expression/
babel-helper-regex/
babel-helper-remap-async-to-generator/
babel-helper-replace-supers/
babel-messages/
babel-plugin-check-es2015-constants/
babel-plugin-syntax-async-functions/
babel-plugin-syntax-exponentiation-operator/
babel-plugin-syntax-trailing-function-commas/
babel-plugin-transform-async-to-generator/
babel-plugin-transform-es2015-arrow-functions/
babel-plugin-transform-es2015-block-scoped-functions/
babel-plugin-transform-es2015-block-scoping/
babel-plugin-transform-es2015-classes/
babel-plugin-transform-es2015-computed-properties/
babel-plugin-transform-es2015-destructuring/
babel-plugin-transform-es2015-duplicate-keys/
babel-plugin-transform-es2015-for-of/
babel-plugin-transform-es2015-function-name/
babel-plugin-transform-es2015-literals/
babel-plugin-transform-es2015-modules-amd/
babel-plugin-transform-es2015-modules-commonjs/
babel-plugin-transform-es2015-modules-systemjs/
babel-plugin-transform-es2015-modules-umd/
babel-plugin-transform-es2015-object-super/
babel-plugin-transform-es2015-parameters/
babel-plugin-transform-es2015-shorthand-properties/
babel-plugin-transform-es2015-spread/
babel-plugin-transform-es2015-sticky-regex/
babel-plugin-transform-es2015-template-literals/
babel-plugin-transform-es2015-typeof-symbol/
babel-plugin-transform-es2015-unicode-regex/
babel-plugin-transform-exponentiation-operator/
babel-plugin-transform-regenerator/
babel-plugin-transform-strict-mode/
babel-preset-env/
babel-runtime/
babel-template/
babel-traverse/ babel-types/

I'm guessing that at least one of them is "babel core"

So... how do I actually run babel from gulp? How do I run it at all?

Answer 1

I had the same issue. I resolved it by removing node_modules and I reinstalled packages (with yarn OR npm install). The problem was fixed.

Answer 2

Run the command yarn add @babel/helper-environment-visitor if you are using yarn, will solve the problem.

Answer 3

In case Victor's answer doesn't help, it may be worth a try to clean your machine's package cache by running npm cache clean/yarn cache clean or removing the cache folder manually.