We Keep Coding

Vue component library calls debug-js for node in browser

I have a problem in a vue project I have I´m in the process of breaking out components into a components library.
i get this error message when i consume components from my local components library.
Uncaught TypeError: Cannot read properties of undefined (reading 'fd')
at Function.useColors
looking where that is in the code i find this
/**
* Is stdout a TTY? Colored output is enabled when `true`.
*/
function useColors() {
return 'colors' in exports.inspectOpts
? Boolean(exports.inspectOpts.colors)
: tty__default["default"].isatty(process.stderr.fd);
}
and a litle googling later it is my understanding is that this code is debug-js for node and that other people have gotten the same error in the past. The solution in the old thread is something with babeland how to resolve modules but i do not seem to be able to find out how to do it for rollup.
Manipulating the bundled code manually so the function returns false makes the code run with no problem but i really do not want to do that
How can I fix this the right way. It seems like I miss something super basic that i for some reason cant find the answer to.
package.json
{
"name": "local-vue-components",
"version": "0.1.0",
"main": "lib/index.js",
"module": "lib/index.esm.js",
"scripts": {
"build": "rollup -c"
},
"peerDependencies": {
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2"
},
"dependencies": {
"local-library":"*"
},
"devDependencies": {
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"#rollup/plugin-commonjs": "^14.0.0",
"#rollup/plugin-node-resolve": "^8.4.0",
"#rollup/plugin-json":"^5.0.1",
"#vue/compiler-sfc": "^3.0.0-rc.5",
"rollup": "^2.23.1",
"rollup-plugin-peer-deps-external": "^2.2.3",
"rollup-plugin-typescript2": "^0.27.2",
"rollup-plugin-vue": "^5.1.6",
"typescript": "^3.9.7",
"vue-template-compiler": "^2.6.11"
}
}
rollup.config.js
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";
import json from "#rollup/plugin-json";
import packageJson from "./package.json";
export default {
input: "src/index.ts",
output: [
{
format: "cjs",
file: packageJson.main,
sourcemap: true
},
{
format: "esm",
file: packageJson.module,
sourcemap: true
}
],
plugins: [peerDepsExternal(), resolve(), commonjs(), typescript(),json(),vue()]
};
I realise it can also be a problem with the consuming project that uses babel and Webpack with the configs below.
babelrc.js
module.exports = function (api) {
const presets = [
'#babel/preset-env',
{
targets: {
chrome: "70"
}
}
];
return presets;
}
webpack.js
const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
require("#babel/register");
module.exports = {
entry: {
babelPollyfill: "#babel/polyfill",
jprApp: "./src/app/main.ts",
'
},
resolve: {
extensions: [".js", ".ts", ".json"],
mainFields: ["browser", "main"],
alias: {
vue$: "vue/dist/vue.esm.js"
}
},
module: {
rules: [
{
test: /\.(css)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].css',
}
}, {
loader: 'extract-loader'
}, {
loader: 'css-loader',
}, {
loader: 'postcss-loader',
}
]
},
{
enforce: "pre",
use: ["source-map-loader"],
test: /\.js$/
},
{
test: /\.ts$/,
use: 'ts-loader',
exclude: [/node_modules/,/__test__/]
},
{
test: /\.render\.js$/,
use: ["file-loader"]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
}
}
]
},
output: {
publicPath: "",
filename: "[name].js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new NodePolyfillPlugin(),
]
};

Configuring webpack and babel to transform rest arguments in a node_modules dependancy

I'm using webpack and babel to compile my JavaScript to ES5. It's working nicely on my own code, but my library started throwing errors in Internet Explorer browsers when I added debug as a dependency. The error points to a rest parameter (e.g. function(...t)) as the place parsing failed.
The main file in the debug module is ES6 (and that's not going to change) and unfortunately there doesn't seem to be any guidance there on babel configuration for node_modules dependencies.
The CLI output doesn't seem to include anything revealing. The output files are being created, as expected, and they work on modern browsers. It's just that rest parameter I can't get rid of.
Can anyone point me in the right direction? It looks like #babel/plugin-transform-parameters should fix the issue, but none of the configuration variations I've tried have had any effect on the debug code.
Edit: After a closer look, it seems that the problem may be that babel is doing too much transpiling, rather than not enough. It looks like this bit of code from node_modules/debug/dist/debug.js is being transformed into the problematic rest parameter.
IN:
function log() {
var _console;
// This hackery is required for IE8/9, where
// the `console.log` function doesn't have 'apply'
return (typeof console === "undefined" ? "undefined" : _typeof(console)) === 'object' && console.log && (_console = console).log.apply(_console, arguments);
}
OUT:
function(n){e.log=function(...A){return"object"==typeof console&&console.log&&console.log(...A)}
I've tried including both my source directory and the debug module as an array:
{
loader: 'babel-loader',
test: [path.resolve(__dirname, 'src'), /node_modules\/debug/]
},
I've tried including all .js files, but excluding most node_modules sub-directories...
{
loader: 'babel-loader',
test: /(\.jsx|\.js)$/,
exclude: /node_modules\/(?!debug)/
},
Even splitting into multiple rules:
{
loader: 'babel-loader',
test: /(\.jsx|\.js)$/,
exclude: /node_modules/
},
{
loader: 'babel-loader',
test: /node_modules\/debug/
},
Using a function had the same effect:
const shouldExclude = filename => {
if (/my-project[\\\/]src/.test(filename)) return false;
if (/my-project[\\\/]test/.test(filename)) return false;
if (/my-project[\\\/]node_modules[\\\/]debug/.test(filename)) return false;
return true;
};
...
module: {
rules: [{ test: /\.js$/, exclude: shouldExclude, use: ['babel-loader'] }],
},
Here are the mostly-complete config files, for reference
package.json
{
"name": "my-js-library",
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/plugin-transform-object-assign": "^7.8.3",
"#babel/plugin-transform-parameters": "^7.9.3",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/polyfill": "^7.8.7",
"#babel/preset-env": "^7.9.0",
"#babel/register": "^7.9.0",
"#babel/runtime": "^7.9.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^7.0.0-beta.3",
"classlist-polyfill": "^1.2.0",
"debug": "4.1.1",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-html": "^6.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"yargs": "^15.3.1"
},
"dependencies": {}
}
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
"babel-plugin-add-module-exports",
"transform-class-properties",
"#babel/plugin-transform-object-assign",
"#babel/plugin-transform-runtime",
"#babel/plugin-transform-parameters"
]
}
webpack.config.js
const config = {
mode: 'production,
entry: __dirname + '/src/index.js',
devtool: 'source-map',
output: {
path: __dirname + '/lib',
filename: my-js-library.min.js,
library: 'MyJsLibrary',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /node_modules\/debug/,
loader: 'babel-loader',
},
{
test: /(\.jsx|\.js)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
},
],
},
stats: 'minimal',
resolve: {
modules: [path.resolve('./node_modules'), path.resolve('./src')],
extensions: ['.json', '.js'],
},
};
module.exports = config;

WebPack hot reload with Vue.js and .NET MVC

I'm trying to integrate Vue.js (which I'm also new to) with an existing .NET MVC project. This is so that I can give Vue a try in certain Areas of the application where I think it would be appropriate.
I have followed a couple of guides for doing this:
https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626
https://medium.com/#hyounoosung/integrating-vue-js-2-0-to-net-mvc5-project-f97eb5a5b3ad
It seems that everything has gone alright so far but I've noticed that the hot reloading is not working. When I run the webpack server, I can see that it's detecting the changes and recompiling the file(s) but nothing happens in the browser. Infact, nothing happens even when I manually refresh or hard-refresh the page. If I stop the application and then run it again, only then does it update.
Here's is the simple setup I have so far...
I have a new MVC Area with a single view in it with the following folder structure:
WebpackTest/Views/index.html:
<div id="app">
<h3>#ViewBag.Message</h3>
{{ vueMessage }}
</div>
#section Scripts {
<script src="~/bundle/webpacktest.js"></script>
}
I then have a scripts folder which contains my Vue code:
scripts/webpacktest/main.js
import Vue from 'vue'
new Vue({
el: '#app',
data() {
return {
vueMessage: 'Message from Vue'
}
}
})
Here is my package.json:
{
"name": "test",
"description": "test",
"version": "1.0.0",
"author": "Andy Furniss",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"eslint": "^5.9.0",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"eslint-plugin-vue": "^4.7.1"
}
}
...and my webpack.config.js:
var path = require('path')
var webpack = require('webpack')
var fs = require('fs')
var appBasePath = './Scripts/app/'
var jsEntries = {}
// We search for index.js files inside basePath folder and make those as entries
fs.readdirSync(appBasePath).forEach(function (name) {
var indexFile = appBasePath + name + '/main.js'
if (fs.existsSync(indexFile)) {
jsEntries[name] = indexFile
}
})
module.exports = {
entry: jsEntries,
output: {
path: path.resolve(__dirname, './wwwroot/bundle/'),
publicPath: '/wwwroot/bundle/',
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
proxy: {
'*': {
target: 'https://localhost:44369/',
changeOrigin: true,
secure: false
},
port: 8080,
host: '0.0.0.0',
hot: true,
inline: true
}
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
When I change the message in main.js, nothing happens, even if I refresh even though the webpack server is telling me things are happening.

Hot reload cannot work if you physically write files to the disk.
I created this template that combines .NET MVC with Vue.js. You can use the entire Vue ecosystem but if you don't want it on any page you can just opt out.
GitHub: https://github.com/danijelh/aspnetcore-vue-typescript-template
Medium: https://medium.com/#danijelhdev/multi-page-net-core-with-vue-js-typescript-vuex-vue-router-bulma-sass-and-webpack-4-efc7de83fea4
You can use it as an example or starting point.

add this line to startup.cs
app.Run(async (context) =>
{
context.Response.ContentType = "text/html";
await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
});

"Unknown word" error showing after adding postcss-loader

I am trying to add postcss loader in my webpack but after adding postcss loader showing Unknown word error.
I also attached error screenshot. please find attachment.
Not sure what error is....
I also added postcss-loader, sass-loader ,css-loader ,style-loader. If i am doing anything wrong please tell me guys.
Below is my loaders in config file and package.json file.
module: {
rules: [
{
test: /\.tsx?$/,
use: ["babel-loader", "ts-loader", "tslint-loader"]
},
{
test: /\.css$/,
include: __dirname + "./src/css",
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1
}
},
'postcss-loader',
]
},
{
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: isDevMode
}
},
{
loader: "sass-loader",
options: {
sourceMap: isDevMode
}
}
]
},
{
test: /\.(sa|sc|c)ss$/,
use: [
isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
loader: "postcss-loader",
}
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
use: [
{
loader: "file-loader",
options: {
outputPath: "assets/"
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
}
]
},
package.json
"dependencies": {
"cssnano": "4.0.5",
"postcss-cssnext": "3.1.0",
"postcss-import": "12.0.0",
"prop-types": "15.6.0",
"react": "15.6.2",
"react-dom": "15.4.2",
"react-redux": "4.4.9",
"react-router": "3.0.2",
"react-router-dom": "4.2.2",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-react-session": "2.2.0",
"redux-thunk": "2.3.0",
"sugarss": "2.0.0",
"superagent": "3.8.1"
},
"devDependencies": {
"autoprefixer": "^9.0.2",
"babel-loader": "^7.1.4",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"eslint": "3.15.0",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.1.0",
"mini-css-extract-plugin": "0.4.2",
"open": "0.0.5",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.20.3",
"webpack": "4.17.1",
"webpack-dev-middleware": "1.6.1",
"webpack-dev-server": "3.1.5",
"webpack-hot-middleware": "2.12.2",
"webpack-md5-hash": "0.0.5"
},

I kept getting "unknown word" error as well. It was a result that css cannot read comments with // but scss can... So I had to add the postcss-scss to the options after installing it with:
npm --save install postcss-scss
or (if you use Yarn)
yarn add --dev postcss-scss
(webpack.config.js)
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
ident: 'postcss-scss',
syntax: 'postcss-scss',
plugins: () => [require('postcss-flexbugs-fixes')()]
}
}
]
},
plugins: [
new WebpackNotifierPlugin({
alwaysNotify: true,
title: 'Enterprise',
contentImage: path.join(__dirname, 'image.png')
})
]
};

This might help someone, or me later again.
I got this error because instead of
#import '../../common.scss';
In my SCSS, I had mistakenly written
#import url('../../common.scss');
Removing the url() function got rid of the error.

In my case, I had to enforce sugarss parser. In the modules configurations of webpack.config.ts. If You use an another parser, change accordingly.
...
{
loader: 'postcss-loader',
options: {
...
parser: 'sugarss', < ====
...
plugins: [
...
],
},
},
...

Crystal's comment worked for me thank you!. You can also hook up postcss-scss in postcss.config.js
// postcss.config.js
module.exports = {
syntax: 'postcss-scss',
plugins: {
…
}
}

Run this in a terminal to install this package
npm i postcss-loader

{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
loader: "postcss-loader",
}
},
Is declared without a test:, so it is being used always

webpack compile error on require(imagePath)

I'm trying to dymaically load an image in ReactJS. So far, what I've found on the internet has not worked.
My react component looks like this:
class ReadOnlyTableRow extends React.Component {
render() {
let optionImage = require('../assets/option.jpg');
return (
<tr>
<td>
<img src={optionImage} />
{this.props.data.type}
</td>
<td>{this.props.data.symbol}</td>
</tr>
);
}
}
and the webpack error I get is this:
ERROR in ./src/assets/option.jpg Module parse failed:
C:\Java\src\options\web\src\assets\option.jpg Unexpected character '?'
(1:0) You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
I tried adding a loader to my webpack, but that gave different errors. So I removed it from my webconfig file.
and my webpack.config file
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: [ 'es2015', 'react' ] }
}
]
}
};
What am I missing? or doing wrong?
Thnx,
Matt
Addendum:
When I include this in my webpack.config
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: [ 'es2015', 'react' ] }
},
{
test: /\.(png|jpg)$/,
loader: 'url?limit=25000'
}
]
}
I get another error:
WARNING in Loader
C:\Java\src\options\web\node_modules\url\url.js?limit=25000 didn't
return a function
The structure of my project is such:
src
|---Components
---ReadOnlyTableRow
|---assets
---option.jpb
here's the package.config file
{
"name": "engine",
"version": "1.0.0",
"description": "engine UI written in React",
"main": "index.js",
"private": true,
"scripts": {
"start": "webpack-dev-server --progress --inline --port 8112",
"build": "webpack"
},
"keywords": [],
"author": "mpr",
"license": "ISC",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"moment": "^2.18.1",
"react": "^0.14.6",
"react-bootstrap": "^0.30.5",
"react-currency-input": "^1.2.6",
"react-date-picker": "^5.3.28",
"react-dom": "^0.14.6",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"file-loader": "^1.1.5"
}
}
Thnx, Matt

To solve this problem, I used file-loader, per #Emad suggestion in the comments above. Additionally, I needed to use a different web.config which is different than the directions provided for file-loader. The web.config changes are as follows.
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: [ 'es2015', 'react' ] }
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
exclude: /node_modules/,
options: {}
}
]
}
};
I changed my javascript code to pull in the image via the import statement:
import reloadImage from './../assets/reload-sm.png';
Thnx
Matt