redallen
commented
3 years ago Hey @clsyan,
You might have a misconfigured css-loader. Do you mind sharing your repo or webpack config?
Closed clsyan0 closed 3 years ago
redallen
commented
3 years ago Hey @clsyan,
You might have a misconfigured css-loader. Do you mind sharing your repo or webpack config?
clsyan0
commented
3 years ago Hi @redallen,
Here is my webpack config:
webpack.dev
const path = require('path');
const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const HOST = process.env.HOST || "0.0.0.0";
const PORT = process.env.PORT || "9000";
module.exports = merge(common('development'), {
mode: "development",
devtool: "eval-source-map",
devServer: {
contentBase: "./dist",
host: HOST,
port: PORT,
compress: true,
inline: true,
historyApiFallback: true,
hot: true,
overlay: true,
open: true
},
module: {
rules: [
{
test: /\.css$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules/patternfly'),
path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
],
use: ["style-loader", "css-loader"]
}
]
}
});webpack.common
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const BG_IMAGES_DIRNAME = 'bgimages';
module.exports = env => {
return {
entry: {
app: path.resolve(__dirname, 'src', 'index.tsx')
},
module: {
rules: [
{
test: /\.(tsx|ts|jsx)?$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true,
}
}
]
},
{
test: /\.(svg|ttf|eot|woff|woff2)$/,
// only process modules with this loader
// if they live under a 'fonts' or 'pficon' directory
include: [
path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'),
path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'),
path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon')
],
use: {
loader: 'file-loader',
options: {
// Limit at 50k. larger files emited into separate files
limit: 5000,
outputPath: 'fonts',
name: '[name].[ext]',
}
}
},
{
test: /\.svg$/,
include: input => input.indexOf('background-filter.svg') > 1,
use: [
{
loader: 'url-loader',
options: {
limit: 5000,
outputPath: 'svgs',
name: '[name].[ext]',
}
}
]
},
{
test: /\.svg$/,
// only process SVG modules with this loader if they live under a 'bgimages' directory
// this is primarily useful when applying a CSS background using an SVG
include: input => input.indexOf(BG_IMAGES_DIRNAME) > -1,
use: {
loader: 'svg-url-loader',
options: {}
}
},
{
test: /\.svg$/,
// only process SVG modules with this loader when they don't live under a 'bgimages',
// 'fonts', or 'pficon' directory, those are handled with other loaders
include: input => (
(input.indexOf(BG_IMAGES_DIRNAME) === -1) &&
(input.indexOf('fonts') === -1) &&
(input.indexOf('background-filter') === -1) &&
(input.indexOf('pficon') === -1)
),
use: {
loader: 'raw-loader',
options: {}
}
},
{
test: /\.(jpg|jpeg|png|gif)$/i,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules/patternfly'),
path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'),
path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'),
path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images'),
path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images'),
path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images')
],
use: [
{
loader: 'url-loader',
options: {
limit: 5000,
outputPath: 'images',
name: '[name].[ext]',
}
}
]
}
]
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html')
}),
new Dotenv({
systemvars: true,
silent: true
})
],
resolve: {
extensions: ['.js', '.ts', '.tsx', '.jsx'],
plugins: [
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, './tsconfig.json')
})
],
symlinks: false,
cacheWithContext: false
}
}
};
package.json
{
"name": "patternfly-seed",
"version": "0.0.1",
"description": "An open source build scaffolding utility for web apps.",
"main": "server.js",
"repository": "https://github.com/patternfly/patternfly-react-seed.git",
"license": "MIT",
"private": true,
"scripts": {
"prebuild": "npm run clean",
"dr:surge": "node dr-surge.js",
"build": "webpack --config webpack.prod.js && npm run dr:surge",
"start": "node server.js",
"start:dev": "webpack-dev-server --hot --color --progress --info=true --config webpack.dev.js",
"test": "jest",
"eslint": "eslint --ext .tsx,.js ./src/",
"lint": "npm run eslint",
"format": "prettier --check --write ./src/**/*.{tsx,ts}",
"type-check": "tsc --noEmit",
"ci-checks": "npm run type-check && npm run lint && npm run test",
"build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
"bundle-profile:analyze": "npm run build:bundle-profile && webpack-bundle-analyzer ./stats.json",
"clean": "rimraf dist",
"storybook": "start-storybook -p 6006",
"build:storybook": "build-storybook"
},
"devDependencies": {
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-info": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/react": "^5.3.19",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "^25.2.3",
"@types/react-router-dom": "^5.1.5",
"@types/victory": "^33.1.4",
"@typescript-eslint/eslint-plugin": "^3.1.0",
"@typescript-eslint/parser": "^3.1.0",
"css-loader": "^3.5.3",
"dotenv-webpack": "^1.8.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.1.0",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"imagemin": "^7.0.0",
"jest": "^26.0.1",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^2.0.5",
"prop-types": "^15.6.1",
"raw-loader": "^4.0.1",
"react-axe": "^3.4.1",
"react-docgen-typescript-loader": "^3.7.2",
"react-router-dom": "^5.2.0",
"regenerator-runtime": "^0.13.5",
"rimraf": "^3.0.2",
"style-loader": "^1.2.1",
"svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^3.0.2",
"ts-jest": "^26.1.0",
"ts-loader": "^7.0.5",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"tslib": "^2.0.0",
"typescript": "^3.9.3",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.1.4"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@patternfly/react-core": "^4.32.1",
"@patternfly/react-icons": "^4.5.0",
"@patternfly/react-styles": "^4.5.0",
"@patternfly/react-topology": "^4.4.75",
"@react-hook/mouse-position": "^4.1.0",
"d3": "^5.5.0",
"express": "^4.17.1",
"react": "^16.13.1",
"react-d3-graph": "^2.5.0",
"react-dom": "^16.13.1",
"react-router-last-location": "^2.0.1"
}
}
Unfortunately, i can't share the repo. However, i did fix the problem by deleting all the "path.resolve" from the webpacks, but i still think that this is not the best way to fix it.
redallen
commented
3 years ago @clsyan Yes, removing the include: [] after test: /\.css$/, is the proper way to fix this. You might want to look into using MiniCSSExtractPlugin instead of style-loader as well.
Closing.
Describe the issue. What is the expected and unexpected behavior? I have an app with patternfly react-core 4.32.1 and react-topology 4.5.14. Yesterday i installed a package called react-spinners and it requires emotionJS. After installing it, i got this error:
And it triggers with a bunch of CSS files. The thing is, i just deleted the project and cloned from my repo again. My last commit on this repo was made weeks before, and it was working when I did it, even so, if I clone again, the error appears.
I tested it on another machine with a different OS, and I keep getting the error.
Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? It's a bug and there is no work-around that i know.
What is your product and what release version are you targeting? Here is my Package.json: