Я установил пакет "reapop" npm в свое приложение.И похоже, что функциональность работает, но стили не применяются.При отладке я обнаружил, что «require» в некоторых файлах «reapop» не работает.
Вот пример кода:
'use strict';
var css = require('./lib/styles.css'); // file exists
//!!!!!!! css = undefined !!!!!!!!!!!
// media breakpoint - small screen min width
var smallScreenMin = 768;
// default className for NotificationsSystem component
var notificationsSystemClassName = css['notifications-system'];
// default className for NotificationsContainer component
debugger
var notificationsContainerClassName = {
main: css['notifications-container'],
position: function position(_position) {
return css['notifications-container--' + _position];
}
};
Вот мой конфиг веб-пакета:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const paths = require('./paths');
module.exports = {
mode: 'development',
entry: ['babel-polyfill', paths.entryPoint],
output: {
path: paths.outputPath,
publicPath: '/',
filename: path.join('js', '[name].js'),
},
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules', paths.src],
alias: {
config: paths.appConfig,
static: paths.publicFiles,
public: paths.publicFiles,
},
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.jsx|.js?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.svg$/,
options: {
includePaths: [`${paths.publicFiles}/assets`],
},
loader: 'svg-sprite-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]',
},
},
{
loader: 'sass-loader',
options: {
includePaths: [paths.scss],
},
},
],
},
{
include: [paths.publicFiles],
exclude: [path.join(paths.publicFiles, 'index.html')],
loader: 'file-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(paths.publicFiles, 'index.html'),
favicon: `${paths.publicFiles}/assets/favicon.png`,
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env.PROJECT_ENV': JSON.stringify(process.env.PROJECT_ENV),
'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL),
}),
],
devServer: {
historyApiFallback: true,
hot: true,
port: process.env.PORT || 3000,
},
};
браузер показывает мне следующее предупреждение:
Warning: Failed prop type: The prop `theme.notificationsContainer.className.main` is marked as required in `NotificationsContainer`, but its value is `undefined`.
Не представляю, почему это происходит.