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'
Related
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
I have created a base NPM package that I will be loading all of my UI elements from the past couple of years. I created the package and uploaded it to NPM. However, when I install the package onto another project and try to use a button, I receive an error: Module not found: Can't resolve 'ui-library-lofidevelopment' in 'C:\Users\Scott Selke\Documents\Personal_projects\test\test\src'
I have tried messing around with webpack, thinking that might be the problem. I have also updated all dependencies to make sure there were no breaking errors. In my local setup, I am able to access the code no problem. However when installed from NPM the package does not work.
My test app with ui-library-lofidevelopment installed via npm:
import React from 'react';
import logo from './logo.svg';
import { Button } from 'ui-library-lofidevelopment';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<Button text={"fuck you this worked"} />
</header>
</div>
);
}
export default App;
My package.json file:
{
"name": "ui-library-lofidevelopment",
"version": "1.0.6",
"description": "",
"main": "./dist/lib/index.js",
"scripts": {
"start": "./node_modules/.bin/parcel src/docs/index.html",
"build": "webpack --mode=production",
"build:docs": "./node_modules/.bin/parcel build src/docs/index.js -d dist/docs/"
},
"author": "Scott Selke",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"parcel-bundler": "^1.12.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
My webpack.config.js file:
const path = require('path');
// const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: path.resolve(__dirname, 'src/lib/index.js'),
output: {
path: path.resolve(__dirname, './build/lib'),
filename: 'index.js',
library: '',
libraryTarget: 'commonjs'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: "file-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
]
},
resolve: {
extensions: ['.scss', '.js', '.json', '.png', '.gif', '.jpg', '.svg'],
},
plugins : [
// new HtmlWebPackPlugin({
// template: "./src/index.html",
// filename: "./index.html"
// }),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
I expected that the npm package would install and be available. However I received the error Module not found.
Ok, So my solution was this:
I had my webpack output set as
output: {
path: path.resolve(__dirname, './build/lib'),
filename: 'index.js',
library: '',
libraryTarget: 'commonjs'
},
and my main in package.json set to :
"main": "./dist/lib/index.js",
Hence the two did not line up.
I want to use react-leaflet in my react project but I don't understand how to make it work I always get an error when I try to compile my code:
ERROR in ./node_modules/react-leaflet/src/index.js 5:7
Module parse failed: Unexpected token (5:7)
You may need an appropriate loader to handle this file type.
| export { LeafletConsumer, LeafletProvider, withLeaflet } from './context'
|
> export type {
| LeafletContext,
| LatLng,
I don't understand what I did wrong :( I tried the example from the git repo and it did work so I don't know what is the difference between my project and the git. I checked the installation guide and I made everything required.
Here is my webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlWebpackPlugin]
};
My package.json :
{
"name": "simple_webpack",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"author": "Drigtime",
"license": "",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.1.0",
"style-loader": "^0.20.3",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"leaflet": "^1.3.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-leaflet": "^2.0.0"
}
}
And the actual code that doesn't work
import React from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet/src";
const Index = () => {
return (
<Map>
<TileLayer
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</Map>
);
};
ReactDOM.render(<Index />, document.getElementById("index"));
It looks like your import should be:
import { Map, TileLayer } from "react-leaflet";
Simple fix!
I have a following problem. I setted up a React in my ASP.NET Core application as always, but now I have one irritating problem and I don't know how to fix it.
When I try to import react from 'react', nothing import. In Chrome Developer Tools I see a red underline under the sentene: "import React from 'react';".
I tried to change babel presets to another, change a webpack.config.js file but nothing works. Maybe you will have an idea, where is a bug? Here is my files:
.babelrc
{
"presets":["env", "react"]
}
package.json
{
"name": "MyApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.7.2",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {}
}
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
devtool: 'source-map',
entry: './ClientApp/index.js',
output: {
publicPath: "/js/",
path: path.join(__dirname, "wwwroot", "js"),
filename: "index-bundle.js"
},
devServer: {
contentBase: "./dist"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 50000,
name: 'assets/[name]_[hash].[ext]'
}
}
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin("./bundle.css")
]
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './Shared/styles/styles.scss';
import SignIn from './Sign/Shared/Components/Sign'
class App extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
<div>
<SignIn />
</div>
}
}
ReactDOM.render(<App/>, document.getElementById('App'))
I will be very glad for your help.
import is a es2015 feature and I see no es2015 preset in .babelrc. See: https://www.npmjs.com/package/babel-preset-es2015
Add presets into babel-loader.
Change webpack.config.js in this way.
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use : {
loader : 'babel-loader',
options : {
presets : ['env', 'react'],
}
}
},
Try this : transform-es2015-modules-amd , This plugin transforms ES2015 modules to Asynchronous Module Definition (AMD). in .babelrc file
{
presets: ["env", "react"],
plugins: ["transform-es2015-modules-amd"]
}
more at transform-es2015-modules-amd
This can also occur if you run:
node index.js
instead of
npm start
See also: npm start vs node app.js
In my index.html I need to include a JS and CSS file. They must be included there and cannot be required or imported. How can I simply have webpack grab the files I need and place them in the dist folder?
From https://github.com/calitek/BasicStarterWP;
webpack.config.js
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'ui-src', 'app.js');
const DIST_PATH = path.resolve(ROOT_PATH, 'ui-dist');
module.exports = {
entry: SRC_PATH,
output: {
path: DIST_PATH,
filename: "app.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {presets:[ 'es2015', 'react', 'stage-0' ]}
},
{test: /\.css$/, loader: ExtractTextPlugin.extract("css-loader")},
{test: /\.(png|jpg|ico)$/, loader: 'file-loader?name=img/[name].[ext]'},
{test: /\.(html)$/, loader: 'file-loader?name=[name].[ext]'}
]
},
plugins: [new ExtractTextPlugin('app.css', {allChunks: true})],
resolve: {extensions: [ '', '.js' ]}
};
package.json
"dependencies": {
"express": "latest",
"react": "^0.14",
"react-dom": "^0.14",
"serve-favicon": "latest"
},
"devDependencies": {
"babel-core": "latest",
"babel-loader": "^6.1.0",
"babel-preset-es2015": "latest",
"babel-preset-react": "latest",
"babel-preset-stage-0": "latest",
"css-loader": "latest",
"extract-text-webpack-plugin": "latest",
"file-loader": "latest",
"webpack": "latest"
}
app.js
'use strict';
require("./index.html");
require("./css/index.css");
require("./img/favicon.ico");
import React from 'react';
import ReactDom from 'react-dom';
import AppCtrl from './components/app.ctrl';
window.ReactDom = ReactDom;
ReactDom.render( <AppCtrl />, document.getElementById('react') );