Develop Reference

Published npm package does not apply styles

I'm currently working on creating an npm package. Which is basically a React component with added styles using SCSS. When I test it out, the class names are there, but no styles are being applied.
Here is the repo for the package. I use a separated webpack config for building the specific folder where the component is.
Here's the webpack configuration I'm using:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const EsLintFormatter = require('eslint-formatter-pretty');
const path = require('path');
const pkg = require('../../package.json');
const { SRC_PATH, BUILD_PATH } = require('./constants');
const setStyleLoaders = require('./style-loaders');
const alias = require('./alias');
const packageName = pkg.name;
module.exports = ({ NODE_ENV }) => ({
mode: 'production',
entry: `${SRC_PATH}/components/Carousel/Carousel.js`,
output: {
path: BUILD_PATH,
filename: 'index.js',
library: packageName,
libraryTarget: 'commonjs2',
umdNamedDefine: true,
publicPath: '/build/',
},
node: {
net: 'empty',
tls: 'empty',
dns: 'empty',
},
resolve: {
alias: {
...alias,
react: path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
},
},
externals: {
react: 'react',
reactDom: 'react-dom',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{ loader: 'babel-loader' },
{
loader: 'eslint-loader',
options: {
formatter: EsLintFormatter,
},
},
],
},
{
test: /\.(sa|sc|c)ss$/,
use: setStyleLoaders(NODE_ENV),
},
{
test: /\.(png|pje?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images',
},
},
],
},
{
test: /\.(woff|woff2|tff|otf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts',
},
},
],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({ filename: 'index.css' }),
],
});
...and here's my package.json
{
"name": "react-clear-carousel",
"version": "0.1.0-beta.1",
"description": "A test",
"main": "build/index.js",
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --env.NODE_ENV=development --config config/webpack/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --env.NODE_ENV=production --config config/webpack/webpack.config.publish.js",
"stylelint": "stylelint 'src/**/*.scss' --config stylelint.config.js; exit 0",
"eslint": "eslint 'src/**/*.js'; exit 0",
"es:fix": "eslint 'src/**/*.js' --fix",
"style:fix": "stylelint 'src/**/*.scss' --fix",
"lint": "npm run eslint && npm run stylelint",
"publish:beta": "npm publish --tag=beta",
"test": "jest"
},
"repository": {
"type": "git",
"url": "git+https://github.com/RobCC/web-playground.git"
},
"author": "robcc",
"license": "ISC",
"bugs": {
"url": "https://github.com/RobCC/web-playground/issues"
},
"files": [
"dist"
],
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/config/jest/setup.js"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
"\\.(css|less|scss)$": "identity-obj-proxy",
"^~/(.*)": "<rootDir>/$1",
"^#/(.*)": "<rootDir>/src/$1"
}
},
"homepage": "https://github.com/RobCC/web-playground#readme",
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"prop-types": "^15.7.2"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-proposal-export-namespace-from": "^7.8.3",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.9.1",
"#types/jest": "^25.1.4",
"#types/node": "^13.9.2",
"#types/react": "^16.9.25",
"#types/react-dom": "^16.9.5",
"#welldone-software/why-did-you-render": "^4.0.5",
"autoprefixer": "^9.7.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"chalk": "^3.0.0",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.6.4",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"cssnano": "^4.1.10",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-formatter-pretty": "^3.0.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.1.0",
"log-symbols": "^3.0.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"pr*op-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"regenerator-runtime": "^0.13.5",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"stylelint": "^13.2.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-formatter-pretty": "^2.0.0",
"stylelint-scss": "^3.16.0",
"stylelint-webpack-plugin": "^1.2.3",
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"weak-key": "^1.0.2"
}
}
This is the result when testing the published package:
Edit 1:
There are no errors on the Network and Console tab in devtools. I also can't find the file loaded, even though it's there in the package. It seems like the js file is not using it, but it should.
Edit 2:
Thanks for pointing me on the right direction!
I added import 'react-clear-carousel/build/index.css'; to include the CSS file from my package. I can see the file now (on devtools), but the styles are not being applied since css-loader is modularizing it and adding additional suffix and prefix (even though it already had them), thus having different class names that the ones my component has.
eg. My component is rendered as <div class="carousel_swimlane--kXSjh">, but the styles in the DOM are named as index_carousel_swimlane--kXSjh--2C.
I guess the question is now, how do I tell Webpack to pass this CSS as is? And if there's a way for me to deliver the CSS file without other people having to change their Webpack configuration.

Looking at your repo I see that you are importing your scss but attributing it's properties to classNames.
className should be the name of the class, and you can either attribute your imported styles to style or you can load your compiled css into the DOM using <link rel="stylesheet" type="text/css" href="styles.min.css">
The reason you're not seeing a stylesheet in the network tab is because you've simply forgotten to declare a stylesheet.

Compiling SASS files with Webpack

I want to use webpack so that it will automatically compile any and all .scss files in my /src/app folder into a single .css file without me having to explicity point to all of the .scss files / import them.
I am trying to use ExtractTextPlugin to do this but it does not seem to be working. Do I need to provide a more specific entry point? Are my loaders not configured correctly? Or is there something else wrong? Thanks!
webpack.config.js:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
const config = {
devtool: 'inline-source-map',
entry: [
"babel-polyfill",
SRC_DIR + "/app/index.js"
SRC_DIR + "/app/"
],
target: 'web',
output: {
path: DIST_DIR + "/app/",
filename: "bundle.js",
publicPath: "/app/"
},
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
}
},
plugins: [
new ExtractTextPlugin({filename: "foo.css", allChunks: true})
],
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
]
},
};
module.exports = config;
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"watch": "webpack --progress --watch",
"start": "yarn build",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --inline --hot --history-api-fallback",
"build:dev": "webpack && cp src/index.html dist/index.html",
"build:prod": "webpack -p && cp src/index.html dist/index.html"
},
"author": "",
"license": "UNLICENSED",
"devDependencies": {
"babel-cli": "7.0.0-beta.3",
"babel-eslint": "7",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"eslint": "3.x",
"eslint-config-airbnb": "^15.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"extract-text-webpack-plugin": "^3.0.0",
"fetch-mock": "^6.0.0-beta.7",
"file-loader": "^0.11.2",
"image-webpack-loader": "^3.4.2",
"jest": "^23.1.0",
"jest-enzyme": "^4.0.0",
"jest-fetch-mock": "^1.6.4",
"node-sass": "^4.9.0",
"redux-mock-store": "^1.5.3",
"sass-loader": "^6.0.6",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"#trendmicro/react-toggle-switch": "^0.5.7",
"babel-polyfill": "^6.26.0",
"cross-fetch": "^1.1.1",
"font-awesome": "^4.7.0",
"highcharts": "^6.0.4",
"history": "^4.7.2",
"js-cookie": "^2.2.0",
"less-loader": "^4.0.5",
"libphonenumber-js": "^0.4.42",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"prop-types": "^15.6.0",
"query-string": "^5.0.1",
"rc-time-picker": "^3.1.0",
"react": "^16.0.0",
"react-animations": "^1.0.0",
"react-autosuggest": "^9.3.4",
"react-circular-progressbar": "^0.8.0",
"react-datepicker": "^0.59.0",
"react-dom": "^16.0.0",
"react-highcharts": "^15.0.0",
"react-list": "^0.8.8",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.6",
"react-select": "^1.0.0-rc.10",
"react-transition-group": "^1.2.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"styled-components": "3.2.3",
"twilio-client": "^1.4.33"
},
"jest": {
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
}
}

without me having to explicity point to all of the .scss files /
import them.
You can't do that, webpack is not like gulp or other task runner that you can just point patterns and it will apply transformations to them.
Webpack works with dependency graphs, and these graphs are going to start from your entry points. On each entrypoint it reads the dependencies and apply those loaders specified for each file extension. Webpack only knows the existence of that file, if it is imported in any file that is part of the dependency graph.
If you want to transform css the way that you described, i suggest you moving towards a more task runner library such as gulp.

webpack cannot find module "fs"

I have a project that's using webpack and electron. I updated my app to use the latest version of electron as it was using electron-prebuilt. Since updating to the latest version I am now unable to compile my app due to this error. I've tried some suggestions from other SO posts which suggest editing webpack.config and added
node: {
fs: 'empty'
},
I still get the same fs not found error. I also tried to set the target to electron, however when I do that I get a string of errors and none of my modules load, is there a workaround available for this issue? I'm not sure if this is a webpack related issue or an electron issue.
Here's my webpack.config
var webpack = require('webpack');
//Loaders & Webpack config
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './app/app.js'],
},
output: {
path: './app/dist',
filename: 'bundle.js',
publicPath: 'http://localhost:8080/dist/'
},
devServer: {
contentBase: './app',
publicPath: 'http://localhost:8080/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: "file-loader"
},
{
test: /\.jpg$/,
loader: "file-loader"
}
]
},
node: {
fs: 'empty'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$"))
],
}
package.json
{
"name": "factory",
"productName": "Factory",
"description": "",
"author": ,
"version": "0.1.0",
"main": "main.js",
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^4.0.0-alpha.4",
"bootstrap-css": "^4.0.0-alpha.5",
"bootstrap-sass": "^3.3.7",
"css-loader": "^0.23.1",
"electron-packager": "^5.2.1",
"electron-rebuild": "^1.1.3",
"exports-loader": "^0.6.4",
"file-loader": "^0.8.5",
"imports-loader": "^0.7.1",
"node-libs-browser": "^1.0.0",
"node-sass": "^4.5.2",
"resolve-url-loader": "^2.0.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"start": "./node_modules/.bin/electron .",
"watch": "./node_modules/.bin/webpack-dev-server",
"build": "electron-packager ./ --platform=darwin,win32 --arch=x64 --prune --overwrite"
},
"dependencies": {
"dragula": "^3.7.2",
"electron-prebuilt": "^0.37.2",
"electron-tabs": "^0.6.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-onclickout": "^2.0.4",
"react-router": "^2.4.0",
"redux": "^3.6.0"
}
}

Set target: 'electron-main' in your Webpack configuration.

I had a similar issue when working on NWjs with webworkers. First, make sure you set the right target option to "node-webkit", "webworker", "node", etc. Then, annotate the module like this:
externals:{
"fs": "commonjs fs"
}
This will tell webpack to load it as a module, as opposed to assuming the dependency is already in the environment.
webpack nwjs

Webpack not detecting new modules

So I have a React app that I'm working on, I'm building the app with Visual Studio (ASP.NET Web API 2.0 for the backend). I had to make some pretty major changes to the app so I created a separate branch for it. I added a few JSX files to the project in the new branch and when I try to require them in a file like so:
const Reports = require("./Reports/Reports.jsx");
I get an error: "Uncaught Error: Cannot find Module ./Reports/Reports.jsx" in the web browser
It seems like webpack isn't detecting any of the newly added files on the branch, what could be the cause of this?
Here's my webpack config:
function getWebpackConfig(moreProps) {
var config = {
debug: true,
devtool: 'source-map',
entry: {
main: './src/start.jsx'
},
output: {
path: path.join(__dirname, './dist'),
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.jsx$|\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}]
},
resolve: {
alias: {
"~": path.resolve("./src")
},
extensions: ['', '.js', '.jsx']
}
};
config = Object.assign({}, config, moreProps);
return config;
}
Here's my package.json containing the node_modules installed in the directory of my project:
{
"name": "internal auditing site",
"version": "1.0.0",
"description": "Web Client for internal auditing site",
"repository": "~company name excluded for StackOverflow~",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.16.0",
"lodash": "^4.11.1",
"moment": "^2.12.0",
"node-uuid": "^1.4.7",
"path": "^0.12.7",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-redux": "^4.4.4",
"redux": "^3.4.0",
"redux-thunk": "^2.0.1",
"webpack": "^1.13.3",
"whatwg-fetch": "^0.11.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-runtime": "^6.6.1",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"extract-text-webpack-plugin": "^1.0.1",
"gulp": "^3.9.1",
"gulp-replace": "^0.5.4",
"gulp-util": "^3.0.7",
"history": "^2.0.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"object-assign": "^4.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
I'm also not entirely sure if this is an issue with Webpack or Team Foundation Server.

React.js Error: Invariant Violation: Minified React error #37

I've tried looking up in the internet, but I can't find the solution for this error.
Essentially, when I run my app in my localhost via npm start, it runs without a problem.
However, when I switch to git branch gh-pages to host in the gh-pages, I see the following error in my console.log
Uncaught Invariant Violation: Minified React error #37
_registerComponent(...): Target container is not a DOM element is what error #37 means.
Link to Git App Repository gh-pages branch
Here's my current setup:
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ghpages = require('gh-pages');
var WriteFilePlugin = require('write-file-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: [
'./src/index.js'
],
output: {
publicPath: '/',
filename: 'bundle.js',
sourceMapFilename: "./bundle.js.map",
path: path.join(__dirname, './static')
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},{
test: /\.s?css$/,
loaders: ['style','css','sass'],
include: path.join(__dirname, 'src')
}]
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
}
},
devServer: {
historyApiFallback: true,
contentBase: './',
outputPath: path.join(__dirname, './dist')
}
};
package.json
{
"name": "recipe-box",
"version": "1.0.0",
"description": "Portfolio",
"main": "index.js",
"repository": "",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"postinstall": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"file-loader": "^0.9.0",
"gh-pages": "^0.11.0",
"image-webpack-loader": "^2.0.0",
"jquery": "^3.1.0",
"jsdom": "^9.5.0",
"mocha": "^3.0.2",
"node-sass": "^3.8.0",
"react-addons-test-utils": "^15.3.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.0",
"write-file-webpack-plugin": "^3.3.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"css-loader": "^0.25.0",
"express": "^4.14.0",
"jquery": "^2.2.4",
"lodash": "^4.16.1",
"materialize-css": "^0.97.7",
"node-sass": "^3.8.0",
"react": "^15.3.1",
"react-bootstrap": "^0.30.3",
"react-dom": "^15.3.1 ",
"react-materialize": "^0.16.4",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.0.4",
"redux-logger": "^2.6.1",
"sass-loader": "^4.0.0",
"shortid": "^2.2.6",
"style-loader": "^0.13.1"
}
}

Answered my own question
It looked like I had to move bundle.js out from dist folder to the same directory where my index.html was.