Как исправить ошибки в сборке gulp + webpack (core-js/fn/function)
Браузер Chrome. Изначально сборка работала, теперь нет. Удаление dist и node-modules, перезапуск перепробовано. Буду рад вашему отклику о данной проблеме.
При запуске gulp в терминале выводятся такие ошибки:
Error in plugin "webpack-stream"
Message:
./src/js/modules/modals.js
Module not found: Error: Can't resolve 'core-js/fn/function' in 'D:\02-Source\src\js\modules'
resolve 'core-js/fn/function' in 'D:\02-Source\src\js\modules'
Parsed request is a module
using description file: D:\02-Source\package.json (relative path: ./src/js/modules)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
D:\02-Source\src\js\modules\node_modules doesn't exist or is not a directory
D:\02-Source\src\js\node_modules doesn't exist or is not a directory
D:\02-Source\src\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
looking for modules in D:\02-Source\node_modules
using description file: D:\02-Source\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: D:\02-Source\node_modules\core-js\package.json (relative path: ./fn/function)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\02-Source\node_modules\core-js\fn\function doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
D:\02-Source\node_modules\core-js\fn\function.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
D:\02-Source\node_modules\core-js\fn\function.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\02-Source\node_modules\core-js\fn\function.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\02-Source\node_modules\core-js\fn\function.json doesn't exist
as directory
D:\02-Source\node_modules\core-js\fn\function doesn't exist
[D:\02-Source\src\js\modules\node_modules]
[D:\02-Source\src\js\node_modules]
[D:\02-Source\src\node_modules]
[D:\node_modules]
[D:\02-Source\node_modules\core-js\fn\function]
[D:\02-Source\node_modules\core-js\fn\function.wasm]
[D:\02-Source\node_modules\core-js\fn\function.mjs]
[D:\02-Source\node_modules\core-js\fn\function.js]
[D:\02-Source\node_modules\core-js\fn\function.json]
@ ./src/js/modules/modals.js 2:0-43
@ ./src/js/main.js
Details:
domainThrown: true
Package.json
{
"name": "picture",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"browserslist": [
"> 1%",
"not dead"
],
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.7.4",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"core-js": "^3.4.2",
"gulp": "^4.0.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.12",
"webpack-stream": "^5.2.1"
}
}
gulpfile.js
"use strict";
const gulp = require("gulp");
const webpack = require("webpack-stream");
const browsersync = require("browser-sync");
const dist = "dist/";
gulp.task("copy-html", () => {
return gulp.src("./src/index.html")
.pipe(gulp.dest(dist))
.pipe(browsersync.stream());
});
gulp.task("build-js", () => {
return gulp.src("./src/js/main.js")
.pipe(webpack({
mode: 'development',
output: {
filename: 'script.js'
},
watch: false,
devtool: "source-map",
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', {
debug: true,
corejs: 3,
useBuiltIns: "usage"
}]]
}
}
}
]
}
}))
.pipe(gulp.dest(dist))
.on("end", browsersync.reload);
});
gulp.task("copy-assets", () => {
return gulp.src("./src/assets/**/*.*")
.pipe(gulp.dest(dist + "/assets"))
.on("end", browsersync.reload);
});
gulp.task("watch", () => {
browsersync.init({
server: dist,
port: 4000,
notify: true
});
gulp.watch("./src/index.html", gulp.parallel("copy-html"));
gulp.watch("./src/assets/**/*.*", gulp.parallel("copy-assets"));
gulp.watch("./src/js/**/*.js", gulp.parallel("build-js"));
});
gulp.task("build", gulp.parallel("copy-html", "copy-assets", "build-js"));
gulp.task("build-prod-js", () => {
return gulp.src("./src/js/main.js")
.pipe(webpack({
mode: 'production',
output: {
filename: 'script.js'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', {
corejs: 3,
useBuiltIns: "usage"
}]]
}
}
}
]
}
}))
.pipe(gulp.dest(dist));
});
gulp.task("default", gulp.parallel("watch", "build"));
Ответы (1 шт):
Автор решения: Никита
→ Ссылка
Проблему решил, убрал строчку в файле js, где прописывал код в модуле. Не понял как она там оказалась (возможно из-за команды npm audit fix), сам эту строчку не прописывал, наткнулся чисто случайно. Оставлю ответ, если кому поможет: import { bind } from "core-js/fn/function";