I'm new to webpack and including bootstrap in my project. If I use style-loader I get a "Reference error for document not defined", otherwise if I remove style-loader and then run it, In this case I get an error on bootstrap.css file ":root" for ":"
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve('server-build'),
filename: 'index.js'
},
module: {
rules: [
{
test: /\.js$|jsx/,
use: 'babel-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
};
Related
Hi I am trying to set up a react app with webpack. Currently when I try to run npm start I get the following error:
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration.module.rules[0].use has an unknown property 'query'. These properties are valid:
object { ident?, loader?, options? }
My webpack file is:
const path = require('path');
module.exports = {
context: __dirname,
entry: "./entry.jsx",
output: {
path: path.resolve(__dirname),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
query: {
presets: ['#babel/env', '#babel/react']
}
},
}
]
},
devtool: 'source-map',
resolve: {
extensions: [".js", ".jsx", "*"]
}
};
Thanks for any help :)
I'm pretty new to react and am having some issues with web pack. All I'm trying to do is import a SVG file into my react project. I'm lost as to what is causing this as it doesn't give me much info about it. I would be grateful if anyone knows what's going on, thank you in advance lol.
Error code in console:
ERROR in ./src/img/flag/united-kingdom.svg
Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
at validateString (internal/validators.js:120:11)
at Object.relative (path.js:437:5)
at Object.loader (C:\Users\Callum\Desktop\sites\csgo\mern\client\node_modules\file-loader\dist\index.js:78:72)
# ./src/components/header.js 12:0-74
# ./src/components/app.js
# ./src/app.js
My webpack file (webpack.common.js)
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
vender: [
'react', 'react-dom', 'redux',
'react-redux', 'react-router-dom',
'axios', 'prop-types']
},
output: {
path: path.resolve(__dirname, '../docs/'),
filename: "js/[name].[chunkhash].js"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: path.resolve(__dirname, 'node_modules'),
loader: 'babel-loader'
},
{
test: /\.s?css$/,
exclude: path.resolve(__dirname, "node_modules"),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},'sass-loader'],
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images/',
name: '[name][hash].[ext]',
},
},
],
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=/fonts/[name].[ext]'
},
{
test: /\.(svg)$/,
exclude: /fonts/, /* dont want svg fonts from fonts folder to be included */
use: [
{
loader: 'svg-url-loader',
options: {
noquotes: true,
},
},
],
},
]
},
plugins: [
new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html')}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
filename: "manifest.js",
chunks: ['vender']
}),
new ExtractTextPlugin({
filename: 'styles/style.css'
}),
]
}
Import code (literally all that references it):
import { ReactComponent as UKFlag } from '../img/flag/united-kingdom.svg'
Just had this problem, changed my file-loader in package.json from 6.2.0 to 6.1.1 and it fixed it
I am using webpack 4.7.0 with webpack-cli installed. This is for a react-js app. Here is my webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',
filename: 'index.html',
'inject': 'body'
});
module.exports = {
entry: './client/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
}
plugins: [HtmlWebpackPluginConfig]
}
Now when I run the command node_modules.bin\webpack --config webpack.config.js, I get the following error message:
plugins: [HtmlWebpackPluginConfig]
^^^^^^^
SyntaxError: Unexpected identifier
And I am not able to build my application. Here is my npm -v & node -v: 5.7.1
v9.4.0. How do I solve this issue?
I have implemented webpack config like
/* eslint-disable no-var */
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./src/main'
],
devtool: 'eval-source-map',
output: {
path: __dirname,
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
},
{
test: /\.css$/, // Only .css files
loader: 'style!css' // Run both loaders
}
]
}
};
and I have installed the css-loader style-loader for loding the css on my page and I am using the bootstrap.min.css as below
require('../../node_modules/bootstrap/dist/css/bootstrap.min.css');
it's throw error like
Bootstrap is using the Glyphicons font. You also need to have a loader for the font:
{
test: /\.woff$/,
loader: 'url?limit=100000'
}
Source: christianalfoni.github.io/react-webpack-cookbook/Inlining-fonts
Or:
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
}
Source: stackoverflow.com/a/31183889/2378031
I'm totally new to webpack and I'm doing my first configuration for a new project.
I'm trying to load my jsx/scss file but I've this problem:
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var node_modules_dir = path.resolve(__dirname, 'node_modules');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var cssExtractTextPlugin = new ExtractTextPlugin("css", "index.css");
var staticPrefix = path.join(__dirname, 'src')
var distPath = path.join(__dirname, 'dist')
module.exports = {
devtool: 'eval',
//context: path.join(__dirname, staticPrefix),
entry: {
'app': ['webpack-hot-middleware/client', path.join(__dirname, 'src/app.jsx')],
'vendor': [
'bootstrap/js/dropdown',
'bootstrap/js/tab',
'bootstrap/js/tooltip',
'bootstrap/js/alert',
'jquery',
'react-router',
'react-bootstrap'
],
'myapp': path.join(__dirname, 'src/stylesheets/base.scss') //'stylesheets/base.scss'
},
output: {
path: distPath,
filename: '[name].js',
libraryTarget: 'var',
library: 'exports',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'root.jQuery': 'jquery'
}),
new ExtractTextPlugin('[name].css')
],
module: {
loaders: [
{
test: /\.js$/,
loader: ['babel'],
include: path.join(__dirname, staticPrefix),
exclude: /(vendor|node_modules)/
},
{
test: /\.jsx$/,
loader: ['babel'],
include: path.join(__dirname, staticPrefix),
exclude: /(vendor|node_modules)/
},
{
test: /\.scss$/,
include: path.join(__dirname, staticPrefix),
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader-loader')
},
{
test: /\.(woff|woff2|ttf|eot|svg|png|gif|ico|jpg)($|\?)/,
loader: 'file-loader?name=' + '[name].[ext]'
}
]
},
postcss: function() {
return [autoprefixer];
},
resolve: {
modulesDirectories: [path.join(__dirname, staticPrefix), 'node_modules'],
extensions: ['', '.jsx', '.js']
},
};
The problem is that when I run: node_modules/.bin/webpack --config=webpack.config.dev it give me 2 errors:
ERROR in ./src/app.jsx
Module parse failed: /Users/work/Desktop/myapp-client/src/app.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| console.log('hello!’);
|
# multi app
ERROR in ./src/stylesheets/base.scss
Module parse failed: /Users/work/Desktop/myapp-client/src/stylesheets/base.scss Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| body {
| background: black;
| }
Where I'm doing wrong ?
With babel 6 you need to include the babel react preset to transpile your .jsx files. You also need to add the babel es2015 preset to transpile ES2015, i.e. ES6, syntax:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets:[ 'react', 'es2015' ]
}
}
]
}
On a side note, if you tweak your regex in the test key, you don't need two loader entries (for the .js and .jsx files).
Make sure you install these presets separately:
npm i -D babel-preset-es2015 babel-preset-react
More info on the babel 6 changes can be found here