У меня есть рабочий проект React + машинописный текст, который работает с Babel и Webpack. Когда я написал код, внезапно возникла эта ошибка:
«Неверный объект конфигурации. Веб-пакет был инициализирован с использованием объекта конфигурации, который не соответствует схеме API». ."
Эта ошибка возникла при попытке интегрировать файл .css. Я установил загрузчик стилей и CSS и поместил их в свой файл webpack.config.js.
Я не знаю, что делаю неправильно. Как мне заставить свой стиль работать?
webpack.config.js file:
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: path.resolve(__dirname, "..", "./src/index.tsx"),
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: ["babel-loader", "ts-loader"]
}
]
},
{
test: /\.(css|scss)$/,
use: ["style-loader", "css-loader"]
}
]
},
output: {
path: path.resolve(__dirname, "..", "./dist"),
filename: "bundle.js"
},
mode: "development",
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "..", "./src/index.html")
})
]
}
Мои devDependities также говорят, что установлены css-loader и style-loader.
package.json:
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template-typescript": "1.2.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1"
},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.26.3",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.26",
"babel-loader": "^9.2.1",
"css-loader": "^7.1.2",
"style-loader": "^4.0.0",
"typescript": "^4.0.0",
"webpack": "^5.97.1",
"webpack-cli": "^6.0.1"
},
"scripts": {
"start": "webpack serve --config webpack/webpack.config.js --open",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
И здесь я импортирую файл
App.tsx file:
import "./styles.css"
export const App: React.FC = () => {
return (
React typescript webpack starter
Hier word uiteindelijk de cursus pagina gemaakt!
)
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... ed-using-a
Как решить: Неверный объект конфигурации. Webpack был инициализирован с использованием объекта конфигурации, который не ⇐ Javascript
Форум по Javascript
1737274253
Anonymous
У меня есть рабочий проект React + машинописный текст, который работает с Babel и Webpack. Когда я написал код, внезапно возникла эта ошибка:
[b] «Неверный объект конфигурации. Веб-пакет был инициализирован с использованием объекта конфигурации, который не соответствует схеме API». ."[/b]
Эта ошибка возникла при попытке интегрировать файл .css. Я установил загрузчик стилей и CSS и поместил их в свой файл webpack.config.js.
Я не знаю, что делаю неправильно. Как мне заставить свой стиль работать?
webpack.config.js file:
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: path.resolve(__dirname, "..", "./src/index.tsx"),
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: ["babel-loader", "ts-loader"]
}
]
},
{
test: /\.(css|scss)$/,
use: ["style-loader", "css-loader"]
}
]
},
output: {
path: path.resolve(__dirname, "..", "./dist"),
filename: "bundle.js"
},
mode: "development",
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "..", "./src/index.html")
})
]
}
Мои devDependities также говорят, что установлены css-loader и style-loader.
package.json:
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template-typescript": "1.2.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1"
},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.26.3",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.26",
"babel-loader": "^9.2.1",
"css-loader": "^7.1.2",
"style-loader": "^4.0.0",
"typescript": "^4.0.0",
"webpack": "^5.97.1",
"webpack-cli": "^6.0.1"
},
"scripts": {
"start": "webpack serve --config webpack/webpack.config.js --open",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
И здесь я импортирую файл
App.tsx file:
import "./styles.css"
export const App: React.FC = () => {
return (
React typescript webpack starter
Hier word uiteindelijk de cursus pagina gemaakt!
)
}
Подробнее здесь: [url]https://stackoverflow.com/questions/79368607/how-to-solve-invalid-configuration-object-webpack-has-been-initialized-using-a[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия