Error: Cannot find module 'babel-preset-env'

[klodoma]

Describe the bug

I have a laravel application with vuejs.

I tried to install vuejs fontawesome but I don't get it working:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest

I've added this in app.js:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

Vue.component('font-awesome-icon', FontAwesomeIcon)

npm run dev fails:

  Compiled with some errors in 12.08s

[BABEL] Note: The code generator has deoptimised the styling of /home/admin/repos/laravel-bcat1/node_modules/@fortawesome/free-solid-svg-icons/index.es.js as it exceeds the max of 500KB.

● Mix █████████████████████████ done (99%)  
 plugins

ERROR in ./node_modules/@fortawesome/vue-fontawesome/index.es.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-env'
Require stack:
- /home/admin/repos/laravel-bcat1/node_modules/@babel/core/lib/config/files/plugins.js
- /home/admin/repos/laravel-bcat1/node_modules/@babel/core/lib/config/files/index.js
- /home/admin/repos/laravel-bcat1/node_modules/@babel/core/lib/index.js
- /home/admin/repos/laravel-bcat1/node_modules/laravel-mix/src/FileCollection.js
- /home/admin/repos/laravel-bcat1/node_modules/laravel-mix/src/tasks/Task.js
- /home/admin/repos/laravel-bcat1/node_modules/laravel-mix/src/tasks/ConcatenateFilesTask.js
- /home/admin/repos/laravel-bcat1/node_modules/laravel-mix/src/components/Combine.js
- /home/admin/repos/laravel-bcat1/node_modules/laravel-mix/src/components/ComponentRegistrar.js
- /home/admin/repos/laravel-bcat1/node_modules/laravel-mix/src/Mix.js
- /home/admin/repos/laravel-bcat1/node_modules/laravel-mix/setup/webpack.config.js
- /home/admin/repos/laravel-bcat1/node_modules/webpack-cli/lib/webpack-cli.js
- /home/admin/repos/laravel-bcat1/node_modules/webpack-cli/lib/bootstrap.js
- /home/admin/repos/laravel-bcat1/node_modules/webpack-cli/bin/cli.js
- /home/admin/repos/laravel-bcat1/node_modules/webpack/bin/webpack.js
- Did you mean "@babel/env"?
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at resolve (node:internal/modules/cjs/helpers:108:19)
    at resolveStandardizedName (/home/admin/repos/laravel-bcat1/node_modules/@babel/core/lib/config/files/plugins.js:111:7)
    at resolvePreset (/home/admin/repos/laravel-bcat1/node_modules/@babel/core/lib/config/files/plugins.js:59:10)
    at loadPreset (/home/admin/repos/laravel-bcat1/node_modules/@babel/core/lib/config/files/plugins.js:78:20)
    at loadPreset.next (<anonymous>)
    at createDescriptor (/home/admin/repos/laravel-bcat1/node_modules/@babel/core/lib/config/config-descriptors.js:187:16)
    at createDescriptor.next (<anonymous>)
    at step (/home/admin/repos/laravel-bcat1/node_modules/gensync/index.js:261:32)
    at evaluateAsync (/home/admin/repos/laravel-bcat1/node_modules/gensync/index.js:291:5)
    at /home/admin/repos/laravel-bcat1/node_modules/gensync/index.js:44:11
    at Array.forEach (<anonymous>)
    at Function.async (/home/admin/repos/laravel-bcat1/node_modules/gensync/index.js:43:15)
    at Function.all (/home/admin/repos/laravel-bcat1/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at createDescriptors (/home/admin/repos/laravel-bcat1/node_modules/@babel/core/lib/config/config-descriptors.js:142:41)

webpack compiled with 1 error
admin@osboxes:~/repos/laravel-bcat1$ 

Reproducible test case
It's in the description

Expected behavior
Build succeeds.

Desktop (please complete the following information):

admin@osboxes:~/repos/laravel-bcat1$ npm --version
8.1.2
admin@osboxes:~/repos/laravel-bcat1$ node --version
v16.13.1
admin@osboxes:~/repos/laravel-bcat1$ 

Additional context
A very strange thing is that his happens on all linux machines I've tried(dev, pipeline).
On a windows machine it seems to work.

I tried installing all required packages that build says it's missing: babel-preset-env still without success.

Any ideas?

[robmadole]

Very strange. We don't use babel env for our packages.

@klodoma can you provide us with a reproducible test case? I don't think this something caused by @fortawesome/vue-fontawesome but it could be.

[klodoma]

After digging deep enough, I found out the following:

Our webpack.mix.js looks is like the following:

const mix = require('laravel-mix');
require('laravel-mix-transpile-node-modules');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .transpileNodeModules()
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .browserSync({
        proxy: 'http://127.0.0.1:3621/',
        open: false,
        port: 3600,
        ui: {
            port: 3601,
        },
    })
    .disableSuccessNotifications()
    .version();

Disabling require('laravel-mix-transpile-node-modules'); and .transpileNodeModules() (removing it) fixes the build but we still have to investigate, we have that in for a reason.

As I see it now it's either laravel-mix-transpile-node-modules or @fortawesome/vue-fontawesome (or together) that causes the issue, it definitely happens once we added fortawesome like described in the first post.

Please leave this open, I'll try to provide a repo to reproduce it...

[jasonlundien]

Hey @klodoma ---

You still having issues with this ?

[jasonlundien]

@klodoma ---

Going to go ahead and close this issue ... if you get us a reproducible repo we can re-open.