We Keep Coding

You may need an appropriate loader to handle this file type, currently no loaders are configured import Counter from './components/counter.jsx'

Im trying to setup a new js/typescript environment to practice web dev while using react, yarn, and webpack but I keep getting this error when trying to get it set up. My current configs look like this. I am new to all of this so if you see anything I should change then please let me know.
webpack.config.js
const path = require('path')
module.exports = {
devServer: {
contentBase: path.resolve(__dirname, './public'),
historyApiFallback: true,
},
entry: path.resolve(__dirname, './src/index.js'),
resolve: {
extensions: ['*', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react'],
},
},
],
test: /\.(scss)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [require('precss'), require('autoprefixer')]
},
},
},
{
loader: 'saas-loader',
},
],
exclude: /node_modules/,
},
],
},
output: {
filename: 'bundle.js',
},
}
index.js
import React from 'react'
import {render} from 'react-dom'
import 'bootstrap/dist/css/bootstrap.css'
import Counter from './components/counter.jsx'
ReactDOM.render(<Counter />, document.getElementById('app'))
package.json
{
"name": "trend-dot-com",
"version": "1.0.0",
"main": "index.js",
"license": "TBA",
"devDependencies": {
"#babel/core": "^7.10.2",
"#babel/preset-env": "^7.10.2",
"#babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"bootstrap": "^4.5.0",
"postcss-loader": "^3.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass-loader": "^8.0.2"
},
"scripts": {
"watch": "webpack-dev-server --progress"
}
}
Thanks in advance!

On the first look everything looked Ok. But the problem seems to be in your webpack.config file.
Try below
const path = require('path')
module.exports = {
devServer: {
contentBase: path.resolve(__dirname, './public'),
historyApiFallback: true,
},
entry: path.resolve(__dirname, './src/index.js'),
resolve: {
extensions: ['*', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use:
{
loader: 'babel-loader',
options: {
presets:["#babel/preset-env","#babel/preset-react" ]
},
},
},
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [require('precss'), require('autoprefixer')]
},
},
},
{
loader: 'saas-loader',
},
],
exclude: /node_modules/,
},
],
},
output: {
filename: 'bundle.js',
},
}
Also after changing this there is a css-loader error which is not installed , so you can install and add that to your package.json. But since you already have Sass packages may be you want to refer the bootstrap sass version in your index.js - upto you. Hope this helps!.

Vue/Jest "Cannot read property 'components' of undefined"

PROBLEM FOUND, READ BELOW
Currently, after days and days of configurations, I'm getting close to the end of config. Hopefully.
The issues that are prevalent are "Cannot read property 'components' of undefined" and [Vue warn]: Failed to mount component: template or render function not defined.
Even the most basic of basic tests, as shown below, are tossing out Vue errors.
//import { mount } from "#vue/test-utils";
mount = require('#vue/test-utils').mount;
var pma = require('../components/profile-licenses').default;
let nacho;
beforeEach(() => {
nacho = mount(pma)
});
afterEach(() => {
nacho.destroy()
});
describe('ccp', () => {
test('is a Vue instance', () => {
expect(nacho.isVueInstance).toBeTruthy();
});
});
The above solution is used to solve a [Vue warn]: Failed to mount component: template or render function not defined. However it's not ideal. It brings in more errors and acts like it can't see vue-test-utils at all.
I'm getting the following errors:
TypeError: Cannot read property 'components' of undefined
TypeError: Cannot read property 'isVueInstance' of undefined
TypeError: Cannot read property 'destroy' of undefined
Here is my setup.
package.json
{
"scripts": {
"dev": "cross-env NUXT_PORT=8080 nuxt-ts",
"build": "nuxt-ts build",
"test": "jest"
},
"dependencies": {
"#babel/runtime": "^7.7.7",
"#nuxt/typescript-runtime": "^0.3.6",
"#nuxtjs/axios": "^5.9.2",
"#nuxtjs/pwa": "^3.0.0-beta.19",
"#vue/cli": "^3.11.0",
"body-parser": "^1.19.0",
"cross-env": "^6.0.3",
"mem": "^6.0.1",
"nuxt": "^2.11.0"
},
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/preset-react": "^7.8.3",
"#babel/preset-stage-0": "^7.8.3",
"#babel/preset-typescript": "^7.8.3",
"#nuxt/typescript-build": "^0.5.5",
"#types/jest": "^24.9.1",
"#vue/server-test-utils": "^1.0.0-beta.31",
"#vue/test-utils": "^1.0.0-beta.30",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"jest": "^25.1.0",
"nuxt-start": "^2.11.0",
"ts-jest": "^24.3.0",
"vue-jest": "^3.0.5",
"vue-loader": "^15.8.3",
"vue-template-compiler": "^2.6.11",
"webpack-dev-server": "^3.10.1"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
],
"plugins": [
"#babel/plugin-transform-runtime"
]
},
"jest": {
"moduleFileExtensions": [
"ts",
"js",
"json",
"vue"
],
"transform": {
"^.*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.ts$": "<rootDir>/node_modules/ts-jest"
},
"transformIgnorePatterns": [
"/node_modules/(?!(#babel/preset-typescript)/)"
],
"moduleNameMapper": {
"#/(.*)$": "<rootDir>/$1",
"vue$": "vue/dist/vue",
"^vue$": "vue/dist/vue.common.js"
},
"moduleDirectories": [
".",
"node_modules",
"client"
]
}
webpack.config
var path = require('path').default;
const VueLoaderPlugin = require('node_modules/vue-loader/lib/plugin').default;
module.exports = {
module: {
loaders: [
{exclude: ['node_modules'], loader: 'babel', test: /\.jsx?$/},
{loader: 'style-loader!css-loader', test: /\.css$/},
{loader: 'url-loader', test: /\.gif$/},
{loader: 'file-loader', test: /\.(ttf|eot|svg)$/},
{loader: 'vue-loader', test: /\.vue$/},
{options: {
loaders: {
},
esModule: false
}}
],
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['es2015']
}
}
]
}, {
test: /\.vue$/,
exclude: /node_modules/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.js$/,
include: [
path.resolve(process.cwd(), 'node_modules/')
],
use: [
{
loader: 'babel-loader',
options: {
plugins: ['transform-es2015-block-scoping'],
cacheDirectory: true
}
}
],
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: [ '.vue', '.ts', '.js'],
modules: [
'node_modules'
],
plugins: [ new VueLoaderPlugin() ]
}
};
I wouldn't be surprised if this was a config error. I've been in endless config for days now. All the solutions I've tried so far aren't working. I'm trying to set up testing on a project that has lots of components and isn't a SPA.
EDIT:
This, actually, is not a config issue! At least not in this current case.
I tried setting up testing on a couple other files, and found several that were able to run without encountering any Vue errors at all.
The mounting issue that I was having was due to there being a weird parent-child dynamic that I hadn't realized was there. We had the Vue file as its own component and there was a popup component as well.
Looking closer at the vue template, we were slotting the popup component with data from the original component. Thus the "Failed to mount component" error! Because I never told the test to mount the popup component!
Neat! (and frustrating)
Leaving this question otherwise as-is for historical reasons, especially since I've found an appreciation for those people who post solutions to their obscure problems.

How to bundle Nunjucks files via Webpack

I have a complete site that I want to design a build tool for it.In fact, I chose Webpack for doing that. The project structure is like this:
I have nunjucks, html, css, sass and js files. I must bundle them via webpack. My webpack config file is here:
var HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
const NunjucksWebpackPlugin = require('nunjucks-webpack-plugin')
module.exports = {
entry: ['./src/index.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
writeToDisk: true
},
plugins: [
new CopyPlugin([
{ from: 'public/images', to: 'images' },
{ from: 'public/fonts', to: 'fonts' },
{ from: 'src/pages/about', to: '.' }
]),
new CleanWebpackPlugin(),
// new HtmlWebpackPlugin()
new HtmlWebpackPlugin({
title: 'Asset Management' //title of file.html
})
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
},
{
test: /\.(njk|nunjucks)$/,
loader: 'nunjucks-loader'
},
{
// to auto refresh index.html and other html
test: /\.html$/,
loader: 'raw-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
interpolate: true
}
}
]
}
]
}
}
The "index.js" file also is like this:
import _ from 'lodash'
import './pages/about/about_moon.scss'
import './pages/about/about_moon.html'
var tpl = require('./pages/home/index_moon.njk')
var html = tpl.render({ message: 'Foo that!' })
function component() {
return element
}
document.body.appendChild(component())
I configured the "package.json" file and defined scripts to run webpack:
"start": "webpack-dev-server --open",
"build": "webpack"
The problem is when I run npm run build, the dist folder was made and it had a html file but there is nothing to show. I have already had some html files and wanted to bundle all of them to "bundle.js", but I have not known how. Would you please tell me how I can bundle this project?
Thank you in advance.

Problem solved. I changed the Webpack.config.js file to this:
const path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
entry: ['./src/index.js', './script.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
// HtmlWebpackPluginConfig
new HtmlWebpackPlugin({
filename: 'index.html',
inject: 'head',
template: './index.njk'
}),
new CleanWebpackPlugin(),
new CopyPlugin([
{ from: 'public/images', to: 'images' },
{ from: 'public/fonts', to: 'fonts' }
])
],
module: {
rules: [
{
test: /\.exec\.js$/,
use: ['script-loader']
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.(scss)$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `#import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
plugins: function() {
return [require('autoprefixer')]
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
}
]
},
{
// HTML LOADER
// Super important: We need to test for the html
// as well as the nunjucks files
test: /\.html$|njk|nunjucks/,
use: [
'html-loader',
{
loader: 'nunjucks-html-loader',
options: {
// Other super important. This will be the base
// directory in which webpack is going to find
// the layout and any other file index.njk is calling.
// searchPaths: [...returnEntries('./src/pages/**/')]
// Use the one below if you want to use a single path.
// searchPaths: ['./']
}
}
]
}
]
}
}
Also, I wrote the script.js file like this, since, function names were changed and they could not be run after bundling.
document.getElementById('body').onload = function() {
console.log('Document loaded')
var menu = localStorage.getItem('menu')
if (menu === 'opened')
document.getElementById('navigation').classList.add('opened')
}
document.getElementById('menu-button').onclick = function() {
// localstorage used to define global variable
var menu = localStorage.getItem('menu')
localStorage.setItem('menu', menu === 'closed' ? 'opened' : 'closed')
document.getElementById('navigation').classList.toggle('opened')
}
// Window.onLoad = onLoad // global variable in js
The index.js was used to import other files and it was like this:
import _ from 'lodash'
require('../index.njk')
require('../base.html')
require('../style.css')
This is the Json file:
{
"name": "menu_moon",
"version": "1.0.0",
"description": "",
"private": true,
"dependencies": {
"browser-sync": "^2.26.7",
"extract-text-webpack-plugin": "^3.0.2",
"fast-glob": "^3.1.1",
"fs-extra": "^8.1.0",
"g": "^2.0.1",
"html-loader": "^0.5.5",
"i": "^0.3.6",
"lodash": "^4.17.15",
"mkdirp": "^0.5.1",
"nunjucks": "^3.2.0",
"nunjucks-html-loader": "^1.1.0",
"nunjucks-isomorphic-loader": "^2.0.2",
"nunjucks-loader": "^3.0.0",
"raw-loader": "^4.0.0"
},
"devDependencies": {
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.5",
"css-loader": "^3.2.1",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"nunjucks-webpack-plugin": "^5.0.0",
"sass-loader": "^8.0.0",
"script-loader": "^0.7.2",
"style-loader": "^1.0.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"scripts": {
"moon-start": "browser-sync start --server --files './**/*.*'",
"moon-build": "node build_product_moon.js",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
I hope it was useful for others.

requires by babel not resolved by webpack

Babel-loader adds "require" statements due to "useBuiltIns: usage ", webpack transcribes them into import statements but doesn't resolve them.
Resulting in the following inside bundle.js and an error in the browser:
import "core-js/modules/es6.function.name"
I am using script-laoder to bundle them, which evals each file as string.
I just don't know how to tell webpack/script-loader to remove the import statements and include the modules in the bundle.
webpack.config.js:
module.exports = {
mode: "production",
resolve: {
modules: ['node_modules'],
extensions: ['.js']
},
entry: {
website: [
jsPath("babel-helpers.js"), // generated from babeL
jsPath('testfolder/test.js'),
]
},
module: {
rules: [ //executed bottom to top!
{
test: /\.js$/,
use: [ 'script-loader' ]
},
{
test: /\.ajs$/,
exclude: [/\.min\.js$/, /node_modules/],
use: {
loader: 'uglify-es-loader',
options: {
//parse: {},
//compress: {},
//mangle: true, // Note `mangle.properties` is `false` by default.
}
}
},
{
test: /\.js$/,
exclude: [/\.min\.js$/, /node_modules/, /babel-helpers/], // exclude babel-helpers or error.
loader: 'babel-loader',
// options: { //uses config from .babelrc file when not specified here.
// presets: ['#babel/preset-env']
// }
},
{
test: /\.js$/,
exclude: [/\.min\.js$/, /node_modules/, /babel-helpers/],
loader: 'string-replace-loader',
options: {
multiple: [
{ search: 'process.env.NODE_ENV', replace: JSON.stringify('production') },
]
}
}
]
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, jsFolder),
libraryTarget: 'umd',
library: 'add'
}
};
package.json
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/plugin-external-helpers": "^7.2.0",
"babel-loader": "^8.0.6",
"script-loader": "^0.7.2",
"string-replace-loader": "^2.2.0",
"uglify-es-loader": "^3.0.4",
"webpack": "^4.36.1",
"webpack-cli": "^3.3.6"
.babelrc
{
"presets": [
[
"#babel/env",
{
"useBuiltIns": "usage",
"targets":
{
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": "11"
}
}
]
],
"plugins": [
"#babel/plugin-external-helpers"
]
}

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"));
});