Issues running my React Application with Webpack - javascript

This code is my webpack.config.js file.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "./dist"),
publicPath: '/dist/',
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
devServer: {
publicPath: '/dist/'
}
};
Attached is my error message.
I've tried reinstalling some packages and modifying this config file from the starterkit but to no avail.
Thanks in advance!

Related

ChunkLoadError: Loading chunk 597 failed. React webpack

i am creating react library. when i use that libary in my project i am facing this issue
(https://i.stack.imgur.com/HymU0.png)](https://i.stack.imgur.com/HymU0.png)
This is my webpack.config file
var path = require("path");
module.exports = {
mode: "production",
entry: "./tables.js",
output: {
// path: path.resolve("build"),
libraryTarget: "umd",
path: __dirname + '/dist',
publicPath: '/',
filename: 'index.js',
},
module: {
rules: [
{
test: /\.jsx?$/, exclude: /node_modules/
, use: {
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', { targets: "defaults" }, '#babel/preset-react'
]
],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
externals: {
'react': 'react',
}
};
i am expecting to load this chunk in my project without facing this issue

What is causing my SVG file to be chunked by Webpack?

I'm using VueJS and within my scoped SCSS I have a background image pointing to an SVG file and that works fine... but when I try to use a loader like file-loader/url-loader/svg-url-loader to configure the ouput, it is being chunked and unable to be read. I have no idea what could be causing the conflict.
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
main: path.resolve(__dirname, 'src/index.ts'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
publicPath: '/assets/',
},
devServer: {
host: '0.0.0.0',
static: path.join(__dirname, 'dist'),
compress: false,
port: 7000,
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.svg$/,
exclude: /node_modules/,
use: {
loader: 'svg-url-loader',
},
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/css/[name].css',
chunkFilename: '[id].css',
}),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: path.join(__dirname, './dist/index.html'),
minify: false,
}),
],
devtool: 'source-map',
resolve: {
extensions: ['.tsx', '.ts', '.js', '.vue'],
},
};
the chunked output is something like:
module.exports = "data:image/svg+xml,blahblahblah"
I figured it out myself by upgrading all my NPM packages and using Webpack's Asset Modules instead of any of the previous loaders and it works perfect.

webpack does not include css file

I have build a react-stepper and uploaded it to github.
When i want to build my App, webpack does not include font-awesome css. But it includes my own style.scss file. I use the style loader in webpack.
In dev mode everything works fine. Only in build mode it does not work.
Here is my repo:
https://github.com/tkwant/react-stepper-wizard
Here is my webpack.build.config file:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.(scss|css)$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "react-stepper-wizard.js",
library: "Stepper",
libraryTarget: "umd"
},
externals: ["react", "react-dom", "font-awesome"],
plugins: [
new CleanWebpackPlugin(["dist"]),
new webpack.HotModuleReplacementPlugin()
],
devtool: "source-map",
devServer: {
contentBase: "./examples",
hot: true,
port: 9001
}
};
It would be fine if somebody can help me here or can do a PR to fix this problem.
You're copying a .css file, right?
You may want to try the webpack-copy-plugin
solution was to use url loader.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },

No react output from my webpack.config.js

What's wrong with my configuration , It serves the index.html with no react output.Been tooling with this for weeks , is there a simpler way to do this?
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:[
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index.js'
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:
{
presets:['es2015', 'react']
}
}]
},
resolve:{
extensions :['.js','.jsx']
},plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase:'./dist/',
compress: true,
hotOnly: true
}
};

ERROR in Cannot find module './_Stack' # multi main - webpack

I am trying to use react-music (https://github.com/FormidableLabs/react-music), after npm start i get this error message
ERROR in Cannot find module './_Stack'
# multi main
webpack: bundle is now VALID.
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'./demo/index',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
],
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
}, {
test: /\.css$/,
loader: 'style!css!postcss',
}],
},
};

Categories