Trying to run babel : “cannot find module @babel/core”

3
votes

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?

1
babeljs
please install @babel/babel-core and also @babel/preset-env. As far as I know, babel publishes the new packages under the prefix @babel – Josef Biehler
@JosefBiehler Is '@babel/babel-core' different from 'babel-core'? Is '@babel/preset-env' different from 'babel-preset-env'? I've installed the latter packages and attempts to install the former ones fail - they can't be found. If the packages you describe are different from the ones that I've installed, please let me know how to install them. – bob
@JosefBiehler without further guidance I have no way of telling if I have installed the packages you have directed me to (in which case they simply aren't working) or whether I've installed packages with near-identical names. – bob
of course the packages are different. Please have a look at e.g. npmjs.com/package/babel-core . This package was updated 2 years ago. The same holds for preset-env. I have tested npm install --save @babel/core @babel/preset-env successfully. Accidentally I have written the wrong package name. It must be @babel/core instead of @babel/babel-core – Josef Biehler
@JosefBiehler ok - First I deleted 'node_modules'. Then I ran 'npm install --save @babel/core @babel/preset-env'. I also reinstalled the gulp module. I then run this: './node_modules/.bin/babel src/js --out-dir js'. This works as expected and desired. However, when I run 'gulp' I get "Error: cannot find module 'babel-core'. So the issue must be related to the gulp side things. – bob

1 Answers

7
votes

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.