I am trying to make unit tests with jest and bootstrap-vue but got errors on Bootstrap-vue tags like :
[Vue warn]: Unknown custom element: b-navbar - did you register the
component correctly?...
[Vue warn]: Unknown custom element:
b-navbar-nav - did you register the component correctly? …
[Vue warn]: Unknown custom element: b-button - did you register the
component correctly? …
Please find below the source code that could help you to have an idea to solve my issue... ;-)
Thanks
//Package.json
{
"name": "theappname",
"version": "1.0.0",
"repository": {
"type": "git",
"url": ""
},
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --open",
"dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
"staging": "cross-env NODE_ENV=staging webpack",
"build": "cross-env NODE_ENV=production webpack",
"test": "jest",
"test:debug": "node --inspect node_modules/.bin/jest --runInBand",
"test:debugw": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.11.2",
"babel-jest": "^24.9.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.2",
"file-loader": "^4.2.0",
"jquery": "^1.9.1",
"postcss-loader": "^3.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"vee-validate": "^2.2.8",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue": "^2.0.2",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"sass": "^1.22.12",
"sass-loader": "^8.0.0",
"vue-jest": "^3.0.5",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"jest": {
"moduleFileExtensions": [
"jsx",
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules"
],
"testMatch": [
"**/test/unit/**/*.spec.(js|jsx|ts|tsx)|**/test/*.(js|jsx|ts|tsx)"
]
}
}
`//Webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.vue']
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.vue?$/,
exclude: /(node_modules)/,
use: 'vue-loader'
},
{
test: /\.js?$/,
exclude: /(node_modules)/,
use: 'babel-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
outputPath: './public',
}
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
fallback: 'file-loader'
}
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
fallback: 'file-loader'
}
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/image/svg+xml',
fallback: 'file-loader'
}
},{
// Apply rule for .sass or .scss files
test: /\.(sa|sc)ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
]
}
]
},
entry: {
index: './src/index.js'//,
//adminApp: './src/index.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: 'build.js'
},
plugins: [new HtmlWebpackPlugin({
favicon: './src/public/favicon.png',
template: './src/index.html',
filename: "./index.html"/*,
publicPath: '/public/'*/
})],
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:3001/api/v1'
})
}
}
//components.Navbar.spec.js
import BootstrapVue, { BNavbar, BNavbarBrand } from 'bootstrap-vue';
import Vuex from 'vuex'
import Router from 'vue-router';
import { createLocalVue, mount, shallowMount } from '#vue/test-utils';
import Navbar from '#/components/Navbar';
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(Router);
debugger;
localVue.use(BootstrapVue/*,{
components: {
BNavbar: true,
BNavbarBrand: true
}
}*/);
const router = new Router();
const mockActions = {
// fetchSomething: sinon.stub()
};
const store = new Vuex.Store({
state: {
account: {
status: {
loggedIn: false
}
}
}
});
describe('Navbar.vue', () => {
let wrapper;
beforeEach(()=>{
wrapper = shallowMount(Navbar, {
localVue,
store,
router/*,
stubs: {
"b-navbar": BNavbar,
"b-navbar-brand": BNavbarBrand
}*/
});
});
it("renders a vue instance", () => {
const wrapper = shallowMount(Navbar, {
computed: {
isConnected: (state) => {
if (state.account && state.account.status && state.account.status.loggedIn){
return true;
}
return false;
}
},
mocks: {
$store: {
state: { account: { status: { loggedIn: false } } }
}
}
})
expect(wrapper.isVueInstance()).toBe(true);
});
})
//Navbar.vue
<template>
<div>
<b-navbar toggleable="lg">
<b-navbar-brand href="/"><img src="../assets/logo_250.png">theappname</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">bla bla</b-nav-item>
<b-nav-item href="#">bla bla</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav v-if="isConnected" class="ml-auto">
…
<b-navbar-nav class="ml-auto" v-else>
….
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
data() {
return {
item: ''
}
},
computed: {
...mapState({
account: state => state.account
}),
isConnected: function () {
if (this.account && this.account.status && this.account.status.loggedIn){
return true;
}
return false;
}
},
methods: {
...mapActions('account', ['logout']),
}
}
I found the solution, in fact the problem wasn't in these files but was in .babelrc
Related
I'm trying to build my Vue app on Node 13 and Webpack 4. For this I'm using this webpack.config.js
const { VueLoaderPlugin } = require("vue-loader");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
mode: 'development',
entry: {
main: "./src/main.js",
},
output: {
filename: "[name].[contenthash:12].js",
path: path.resolve(__dirname, "dist"),
chunkFilename: "[name].[contenthash:12].js",
},
module: {
rules: [
{
test : /\.(jsx?)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.(eot|ttf|woff|woff2|txt)(\?\S*)?$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
},
},
{
test: /\.(png|jpe?g|gif|webm|mp4|svg|ico)$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
outputPath: "assets/img",
esModule: false,
},
},
{
test: /\.(css)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
],
},
{
test: /\.(s(c|a)ss)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true,
importLoaders: 2,
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
"sass-loader",
{
loader: "sass-loader",
options: {
sourceMap: true,
implementation: require("sass"),
sassOptions: {
//fiber: require("fibers"),
prependData: `#import "app/javascript/manager/styles/main.scss"`,
//indentedSyntax: true
}
}
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[contenthash:8].css",
chunkFilename: "[name].[contenthash:8].css",
}),
new htmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
favicon: path.resolve(__dirname, "public", "favicon.ico"),
}),
],
resolve: {
alias: {
vue$: "vue/dist/vue.runtime.esm.js",
},
extensions: ["*", ".js", ".jsx", ".css", ".scss", ".vue"],
modules: [
"node_modules",
]
},
optimization: {
moduleIds: "hashed",
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
priority: -10,
chunks: "all",
},
},
},
},
devServer: {
historyApiFallback: true,
},
}
And this is my package.json
{
"name": "my-app-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/compiler-sfc": "^3.1.4",
"axios": "^0.21.1",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"core-js": "^3.6.5",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-router": "^3.5.2",
"vuetify": "^2.5.6",
"webpack-war-plugin": "^1.0.0-beta.3"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.2.0",
"sass": "1.32.13",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue-cli-plugin-vuetify": "~2.4.1",
"vue-loader": "^16.3.0",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.5.6",
"vuetify-loader": "^1.7.0",
"webpack": "^4.42.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
After struggling with the sass-loader I reduced the list of errors, but this one is significant and I haven't found a way to remove it:
ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--5-3!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
╷
1 │ #charset "UTF-8";
│ ^
╵
No sass-node, just sass was used. Uncommenting indentedSyntax: true will simply drop another error saying that semicolons are not allowed. Upgrading versions will return other set of error. Fibers is out of scope (it just improves processing of certain async calls to my knowledge). Upgrading to Webpack5 adds a pletora of new problems as the json structure is quite different.
I'm totally stack at this point. There must be something else to work on the sass loader nut I'm not an expert on webpack so it's taking simply too long. Any help would be greatly appreciated at this point. I cannot believe none is having the same issue. I see many related answers but everyone seem to be doing fine just adding indentation. Thanks!
<link rel="stylesheet" type="text/css" href="scss/styles.scss">
<link rel="stylesheet" type="text/css" href="css/styles.css">
/*webpackconfig.js*/
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
app:'./src/index.js'
},
output: {
path: path.join(__dirname, "/dist"),
publicPath:'',
filename: "main.js"
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
// compress: true,
writeToDisk: true,
open:true,
port: 58134,
},
module: {
rules: [
{//require("expose-loader?jquery!jquery"),
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery"],
},
},
{ // /\.css$/,
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath:'../'
}
},
"css-loader",
'sass-loader',
/*{
loader: "sass-loader",
options: {
implementation: require("sass"),
sassOptions: {
fiber: false,
},
},
}, */
],
},
{
test: /\.(png|svg|jpe?g|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "images",
}
}
]
},
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "fonts",
esModule: false,
}
}
]
},
{
test: /\.html$/,
use:[
{
loader: 'html-loader',
options: {
minimize: true,
},
},
]
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
}),
new HtmlWebpackPlugin({
filename: "toursTourkey.html",
template: "./src/toursTourkey.html",
}),
new HtmlWebpackPlugin({
filename: "toursEygpt.html",
template: "./src/toursEygpt.html",
}),
new HtmlWebpackPlugin({
filename: "registeraccount.html",
template: "./src/registeraccount.html",
}),
new HtmlWebpackPlugin({
filename: "registerinto.html",
template: "./src/registerinto.html",
}),
new MiniCssExtractPlugin({filename:"css/style.css"}),
new OptimizeCssAssetsPlugin({}),
],
};
````````
````````
/*package.json*/
{
"name": "saferny",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.2.0",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.3.0",
"jquery": "^3.6.0",
"mini-css-extract-plugin": "^1.4.0",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"popper.js": "^1.16.1",
"style-loader": "^2.0.0",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#laylazi/bootstrap-rtl-scss": "^4.6.0-1",
"bootstrap": "^4.6.0",
"bootstrap-v4-rtl": "^4.6.0-2",
"expose-loader": "^2.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"jquery.animate": "^1.8.9",
"resolve-url-loader": "^3.1.3",
"sass": "^1.32.12",
"sass-loader": "^11.0.1"
}
}
import './scss/styles.scss';
import './css/style.css';
//import '../node_modules/#laylazi/bootstrap-rtl-scss/scss/bootstrap-rtl.scss';
import 'bootstrap-v4-rtl/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min';
import 'bootstrap/dist/js/bootstrap.min.js';
import '#fortawesome/fontawesome-free/js/all.min';
import 'jquery.animate';
import 'jquery';
ERROR in Error: Child compilation failed:
No template for dependency: CssDependency
CodeGenerationError: No template for dependency: CssDependency
Compilation.js:2623
[safernyy]/[webpack]/lib/Compilation.js:2623:18
Cache.js:91
[safernyy]/[webpack]/lib/Cache.js:91:34
MemoryCachePlugin.js:45 Array.
[safernyy]/[webpack]/lib/cache/MemoryCachePlugin.js:45:13
Cache.js:91
[safernyy]/[webpack]/lib/Cache.js:91:19
Cache.js:75 Cache.get
[safernyy]/[webpack]/lib/Cache.js:75:18
CacheFacade.js:117 ItemCacheFacade.get
[safernyy]/[webpack]/lib/CacheFacade.js:117:15
Compilation.js:2608 Compilation._codeGenerationModule
[safernyy]/[webpack]/lib/Compilation.js:2608:9
Compilation.js:2534
[safernyy]/[webpack]/lib/Compilation.js:2534:10
async.js:3467 arrayIterator
[safernyy]/[neo-async]/async.js:3467:9
No template for dependency: CssDependency
CodeGenerationError: No template for dependency: CssDependency
Compilation.js:2623
[safernyy]/[webpack]/lib/Compilation.js:2623:18
Cache.js:91
[safernyy]/[webpack]/lib/Cache.js:91:34
MemoryCachePlugin.js:45 Array.
[safernyy]/[webpack]/lib/cache/MemoryCachePlugin.js:45:13
Cache.js:91
[safernyy]/[webpack]/lib/Cache.js:91:19
Cache.js:75 Cache.get
[safernyy]/[webpack]/lib/Cache.js:75:18
CacheFacade.js:117 ItemCacheFacade.get
[safernyy]/[webpack]/lib/CacheFacade.js:117:15
Compilation.js:2608 Compilation._codeGenerationModule
[safernyy]/[webpack]/lib/Compilation.js:2608:9
Compilation.js:2534
[safernyy]/[webpack]/lib/Compilation.js:2534:10
async.js:3467 arrayIterator
[safernyy]/[neo-async]/async.js:3467:9
child-compiler.js:169
[safernyy]/[html-webpack-plugin]/lib/child-compiler.js:169:18
Compiler.js:534
[safernyy]/[webpack]/lib/Compiler.js:534:11
Compiler.js:1087
[safernyy]/[webpack]/lib/Compiler.js:1087:17
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[safernyy]/[tapable]/lib/Hook.js:18:14
Compiler.js:1083
[safernyy]/[webpack]/lib/Compiler.js:1083:33
Compilation.js:2424
[safernyy]/[webpack]/lib/Compilation.js:2424:11
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[safernyy]/[tapable]/lib/Hook.js:18:14
Compilation.js:2417
[safernyy]/[webpack]/lib/Compilation.js:2417:38
2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.30.0 compiled with 7 errors in 5684 ms
i ｢wdm｣: Failed to compile.
MiniCssExtractPlugin expects the CSS imported within the JavaScript file. If you have your stylesheets as links within the HTML, you need the (sadly unmaintained) extract-loader. It's important to use esModule: false, otherwise extract-loader fails.
{
test: /\.css$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css",
outputPath: "css",
esModule: false,
}
},
{
loader: "extract-loader",
},
{
loader: "css-loader",
options: {
esModule: false,
}
}
]
},
Works for me with extract-loader#5.1.0, file-loader#6.2.0 and webpack#5.53.0.
Webpack only understands Javascript and JSON - you extend it using loaders, but that happens outside of the HTML page
https://blog.jakoblind.no/css-modules-webpack/
I am trying to use bootstrap.css to go through a tutorial on react but for some reason the styling is not being updated, I feel like this is probably an issue with my webpack.config but I have tried numerous fixes with nothing working, here is my current config:
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',
},
],
},
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader',
loader: 'css-loader',
loader: 'saas-loader',
loader: 'postcss-loader',
options: {
plugins: function () {
return [require('precss'), require('autoprefixer')]
},
modules: true,
},
},
],
},
{
test: /\.(css)$/,
use: [
{
loader: 'style-loader',
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
],
},
output: {
filename: 'bundle.js',
},
}
and also my 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": {
"#babel/plugin-proposal-class-properties": "^7.10.1",
"#babel/plugin-syntax-class-properties": "^7.10.1",
"bootstrap": "^4.5.0",
"css-loader": "^3.5.3",
"jquery": "^3.5.1",
"postcss-loader": "^3.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1"
},
"scripts": {
"start": "webpack-dev-server --progress"
}
}
and finally my js code
import React, {Component} from 'react'
class Counter extends Component {
state = {
count: 1,
}
render() {
return (
<div id="test">
<span className="badge badge-primary m-2">{this.formatCount()}</span>
<button className="">Increment</button>
</div>
)
}
formatCount() {
const {count} = this.state
return count === 0 ? 'Zero' : count
}
}
export default Counter
Ive made sure to import the bootstrap.css in my index.js as well. Any help would be appreciated.
Edit: Here is my index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {render} from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css'
import App from './components/app.jsx'
ReactDOM.render(<App />, document.getElementById('app'))
You have not imported it :)
You have to install it with npm or another module and import him :)
import 'bootstrap/dist/css/bootstrap.min.css'
I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by webpack shows the CSS isn't minified with cssnano (because I can still see whitespace characters). What am I doing wrong?
Some relevant configuration files:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
var postCompileScript = require('./postCompile');
module.exports = {
entry: './src/popup.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({})
],
minimize: true
}
}
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
resolve: {
alias: {
"react": "preact-compat",
"react-dom": "preact-compat"
},
extensions: ['.js', '.jsx']
}
};
postcss.config.js:
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
}
}
package.json
{
"name": "REDACTED",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"deploy": "node ftp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"ftp": "^0.3.10",
"post-compile-webpack-plugin": "^0.1.2",
"postcss-loader": "^3.0.0",
"prepend-file": "^1.3.1",
"style-loader": "^0.22.1",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"iframe-resizer": "^3.6.1",
"js-cookie": "^2.2.0",
"npm": "^6.4.0",
"preact": "^8.3.1",
"preact-compat": "^3.18.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-iframe-resizer-super": "^0.2.0"
}
}
Thanks in advance.
For any future readers: I solved my problem by just adding the cssnano plugin to the postcss-loader in the config. Thus the css rule is as follows (webpack.config.js):
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({}),
require('cssnano')({ preset: 'default' })
],
minimize: true
}
}
]
}
I'm setting up Jest for a webpack 2 project that isn't a React project.
I have installed jest-cli and babel-jest.
I'm getting this error:
.babel-rc:
{
"presets": [
"es2015"
],
"plugins": [
"syntax-jsx",
["transform-react-jsx", {"pragma": "html"}]
]
}
webpack.config.js:
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
devtool: 'source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
},
{
test: /\.styl$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'stylus-loader'
],
}
]
},
resolve: {
extensions: ['.js'],
modules: [
path.join(__dirname, 'src'),
'node_modules'
]
},
plugins: [
new ExtractTextPlugin({ filename: 'style.css', allChunks: true }),
],
jest: {
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
'\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js'
}
},
'env': {
'test': {
'plugins': ['transform-es2015-modules-commonjs']
}
}
}
package.json:
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "node server.js",
"test": "jest"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-0"
]
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-jest": "^19.0.0",
"babel-loader": "^6.3.2",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"css-loader": "^0.26.2",
"eslint": "^3.17.0",
"extract-text-webpack-plugin": "^2.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^19.0.2",
"jest-cli": "^19.0.2",
"regenerator-runtime": "^0.10.3",
"style-loader": "^0.13.2",
"stylus": "^0.54.5",
"stylus-loader": "^2.5.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"#cycle/dom": "^16.0.0",
"#cycle/run": "^3.0.0",
"babel-plugin-transform-react-jsx": "^6.23.0",
"bulma": "^0.3.2",
"css-modules-require-hook": "^4.0.5",
"eslint-plugin-jsx": "^0.0.2",
"snabbdom-jsx": "^0.3.1",
"xstream": "^10.3.0"
}
}
How can I get rid of the error?
Using arrow function without parameters still requires the parentheses.
The following code should work:
test('adds a and b together', () => {
expect(sum(1, 2)).toBe(3)
})
Note that the only case the parentheses are not needed is when there is only one parameter.
You can read documentation here.