Как правильно настроить babel в webpack?

Question

[Sviaznoi]

Не могу избавиться от одной ошибки при работе с babel. Как бы я не настраивал этот лоудер, он всё равно пир сборке выдаёт мне следующее:

./src/index.js 39 bytes [not cacheable] [built] [code generated] [1 error]
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'fs/promises'

Я прочитал руководство по babel и там не нашёл ответа. Я поискал в интернете везде вариации четырёх решений, как к примеру здесь: . Но ничего не помогло. Я обратился к официальному сайту babel то же, с тем же результатом. Там вообще везде речь идёт о седьмой версии.

Comments

[Михаил Р.]

Покажите код конфига

[Sviaznoi]

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name][contenthash].js',
        assetModuleFilename: '[name][ext]',
        clean: true
    },
    performance: {
        hints: false,
        maxAssetSize: 512000,
        maxEntrypointSize: 512000
    },
    devServer: {
        static: {
          directory: path.join(__dirname, 'src/index.js'),
        },
        compress: true,
        port: 9000,
      },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(svg|jpg|jpeg|gif|png)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.(?:js|mjs|cjs)$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: [
                      ['@babel/preset-env', { targets: "defaults" }]
                    ]
                  }
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin ({
            filename: "index.html",
            title: 'bubbel',
            template: 'src/index.html'
        })
    ],

    mode: 'production'
}

[Егор Живагин]

Насколько я помню, webpack при сборке не резолвит импотры fs, потому что это системная либа node.js, а webpack - бандлер, для фронтенда. Вы просто не можете использовать fs на фронте, никогда

[Sviaznoi]

Егор Живагин, Так что с этим делать то?

[Sviaznoi]

Егор Живагин, Мне не нужна библиотека ноды, как её исключить?

Answer 1

[Дмитрий Беляев]

Тут не в babel дело, ошибку выдает сам webpack, который по умолчанию собирает всё под браузер, где нет никакого fs/promises (как и любых других встроенных в среду модулей)

Если нужны модули из node, то нужно указать соответствующий target
https://webpack.js.org/configuration/target/

Comments

[Sviaznoi]

А не подскажете как решить эту проблему? Или ткните носом в гайд какой нибудь... Буду очень благодарен.

[Sviaznoi]

Простите, я опять с вопросом о target. Я выставляю target: ['web', 'es5'] и ошибка как была так и осталась. Не подскажите в чём дело более развёрнуто. Ведь как я понял инструкицию по ссылке выше, я всё делаю правильно...

[Sviaznoi]

Меня не интересуют node модули. Я просто хочу собрать шаблон, используя babel.

[Дмитрий Беляев]

Sviaznoi, но судя по ошибке у Вас где-то используется fs/promises

[Sviaznoi]

Дмитрий Беляев, А как узнать где?