Почему webpack выдает You may need an appropriate loader to handle this file type?

Question

[Сергей]

Вопрос старый, как оказалось, но ни одно предложение решить его не проходит.


Изначально выдает You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Пробовал добавлять в конфиг

new webpack.ProvidePlugin({
	process: 'process/browser',
})

Все равно не работает

Пробовал на всякий случай и отдельно babel.config.json создать

{
	"presets": ["@babel/preset-react", "@babel/preset-env"],
	"plugins": ["@babel/plugin-transform-react-jsx", "@babel/plugin-transform-runtime"]
}

Сам конфиг такой

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

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.join(__dirname, '/dist'),
		filename: 'index-bundle.js',
	},
	module: {
		rules: [
			{
				test: /\.js$|jsx/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ["@babel/preset-react", "@babel/preset-env"],
						plugins: ["@babel/plugin-transform-react-jsx", "@babel/plugin-transform-runtime"]
					},
				}
			},
			{
				test: /\.(css|scss|sass)$/,
				use: ['style-loader', 'css-loader', 'sass-loader'],
			},
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
		}),
	],
};

package.josn

{
	"name": "test",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"start": "webpack --mode development --watch",
		"build": "webpack --mode production"
	},
	"dependencies": {
		"@babel/plugin-syntax-jsx": "^7.14.5",
		"@babel/plugin-transform-react-jsx": "^7.14.5",
		"@babel/runtime": "^7.14.6",
		"babel-plugin-transform-runtime": "^6.23.0",
		"process": "^0.11.10",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"sass": "^1.35.1",
		"sass-loader": "^12.1.0"
	},
	"devDependencies": {
		"@babel/core": "^7.14.6",
		"@babel/plugin-transform-runtime": "^7.14.5",
		"@babel/preset-env": "^7.14.7",
		"@babel/preset-react": "^7.14.5",
		"babel-loader": "^8.2.2",
		"babel-plugin-add-module-exports": "^1.0.4",
		"css-loader": "^5.2.6",
		"html-webpack-plugin": "^5.3.2",
		"style-loader": "^3.0.0",
		"transform-runtime": "0.0.0",
		"webpack": "^5.41.0",
		"webpack-cli": "^4.7.2",
		"webpack-dev-server": "^3.11.2"
	}
}

Comments

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

какого-то лоадера не хватает, на какой файл хоть ругается?

ну и вот тут еще регулярка кривая: test: /\.js$|jsx/,
лучше так: /\.jsx?$/

[Сергей]

Дмитрий Беляев, импортирую библиотеку компонентов React с репозитория, там js и scss файлы. И на каждый js файл такое выдает. Добавил скриншот

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

Сергей, а как Вы ее импортируете? точнее откуда
У Вас папка node_modules в exclude для babel-loader, да и сам babel туда не лезет

[Сергей]

Дмитрий Беляев, импортирую как обычный пакет. И да, exclude node_modules - это плохая получается идея) убрал. Выдает WARNING
export 'default' (imported as 'React') was not found in 'react' (possible exports: __esModule) по всем js файлам.
Попробовал добавить "@babel/plugin-proposal-class-properties" в babel.config.json . Результат тот же(

[Сергей]

Дмитрий Беляев, поменял babel.config.json на .babelrc , добавил ["@babel/plugin-proposal-class-properties",{"loose": true} ], выдает Support for the experimental syntax 'jsx' isn't currently enabled.

пробовал добавить @babel/plugin-syntax-jsx - ничего. Кажется уже всякое перепробовал... что ему надо...

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

Сергей, разбирайтесь с автором модуля, почему он в npm пакет положил нескомпилированный код

[Сергей]

Дмитрий Беляев, )) автор я и есть. Библиотека из React компонентов. В том же виде, в каком она была и вне npm пакета. Т е эти компоненты нужно прогнать через babel для последующего экспорта или подразумевается что-то иное?)

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

Сергей, нужно компилировать библиотеку прежде чем на npm выкладывать или в пакет паковать