Я схожу с ума от конфигурации моего приложения React-Typescript-Webpack. Он создан с нуля - нет create-react-app - и должен работать с UI-библиотекой antd и storybook.
Спустя бесчисленное количество часов я получаю следующую ошибку:
ERROR in ./node_modules/antd/lib/button/style/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
... что говорит о том, что webpack не распознает настройки для less в webpack.config.js, верно?
Я просто не понимаю почему, потому что я думал, что добавил все необходимое ... Не могли бы вы помочь и сказать мне, что я здесь делаю не так?
Вот webpack.config.js:
const path = require("path");
const fs = require("fs");
const lessToJs = require("less-vars-to-js");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "none",
entry: {
app: path.join(__dirname, "src", "index.tsx"),
},
target: "web",
resolve: {
extensions: [".ts", ".tsx", ".js", ".less"],
},
module: {
rules: [
{
loader: "babel-loader",
exclude: /node_modules/,
test: /\.js$/,
options: {
plugins: [["import", { libraryName: "antd", style: true }]],
},
},
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{loader: "less-loader"},
],
},
{
use: ["style-loader", "css-loader"],
test: /\.css$/,
},
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: "/node_modules/",
},
],
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
};
И файл babel.rc:
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
["import",
{
"libraryName": "antd",
"style": true // or 'css'
}]
]
}
И зависимости от package.json:
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"antd": "^4.4.1",
"babel-plugin-import": "^1.13.0",
"css-loader": "^3.6.0",
"less": "2.7.2",
"less-vars-to-js": "^1.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"style-loader": "^1.2.1"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/react": "^5.3.19",
"@types/antd": "latest",
"@types/react": "^16.8.24",
"@types/react-dom": "^16.0.5",
"@types/webpack": "4.1.4",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.3.0",
"less-loader": "^6.2.0",
"ts-loader": "^6.2.1",
"typescript": "^3.4.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.11.0"
}
Например, я использую antd в App.tsx вот так:
import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';
import 'antd/dist/antd.css';
const App: FC = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
Когда я запускаю npm run build / npm start, все нормально работает. Ошибка появляется при запуске npm run storybook, как указано в документах сборника рассказов .
Полный стек ошибок:
ERROR in ./node_modules/antd/lib/button/style/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import '../../style/themes/index';
| @import '../../style/mixins/index';
| @import './mixin';
@ ./node_modules/antd/lib/button/style/index.js 5:0-23
@ ./stories/2-Button.stories.js
@ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.js[\\/]?)$
@ ./.storybook/generated-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
ERROR in ./node_modules/antd/lib/style/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import './themes/index';
| @import './core/index';
|
@ ./node_modules/antd/lib/button/style/index.js 3:0-33
@ ./stories/2-Button.stories.js
@ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.js[\\/]?)$
@ ./.storybook/generated-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Помощь будет очень признательна!