ChunkLoadError: Loading chunk 597 failed. React webpack - javascript

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

Related

How do I display an image in html using webpack?

I've installed file-loader and url-loader, and added the below to my webpack config
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {}
}]
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
},
},
below is my html
<img src="../src/assets/laughing.svg">
console error after npm run dev
Failed to load resource: the server responded with a status of 404 (Not Found)
I'm new to webpack, not sure what I'm doing wrong here....
Full config:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
bundle: path.resolve(__dirname, 'src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name][contenthash].js',
clean: true,
assetModuleFilename: '[name][ext]',
},
devtool: 'source-map',
devServer: {
static: {
directory: path.resolve(__dirname, 'dist'),
},
port: 3000,
open: true,
hot: true,
compress: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {}
}]
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack App',
filename: 'index.html',
template: 'src/index.html',
}),
new HtmlWebpackPlugin({
title: 'Webpack App',
filename: 'about.html',
template: 'src/about.html',
}),
],
}
Any idea how to fix this?
Image works when I'm not not running npm run dev. So img src must be correct.
I think you should remove file-loader and url-loader
Here's the documentation example:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource', // EXAMPLE HERE
},
],
},
};
only use the asset/resource module

#babel/polyfill - is deprecated. Please, use required parts of `core-js` and `regenerator-runtime/runtime` separately

I am having an issue trying to 'run serve' with a React-App I am working on. I am getting a bunch of error messages but I think are mainly due to this one error -
#babel/polyfill is deprecated. Please, use required parts of 'core-js' and 'regenerator-runtime/runtime' separately.
This is a webpack.config.dev.js and webpack.config.js file
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { main: './src/index.tsx' },
mode: 'development',
externals: {
react: 'React',
'react-dom': 'ReactDOM',
'react-router': 'ReactRouter',
},
target: 'web',
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
useBuiltIns: 'entry',
corejs: 3,
},
],
],
},
},
{ loader: 'ts-loader' },
],
},
{
test: /\.(jsx?)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
useBuiltIns: 'entry',
corejs: 3,
},
],
],
},
},
],
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
filename: 'index.html',
chunksSortMode: 'auto',
chunks: ['main'],
}),
],
};
Any ideas? Thank you!

document is not defined after running webpack scripts

So I tried creating a boilerplate for an existing project that our company have and after running the script for webpack,
it generated a ./dist/server.js however, when I run it from node, I am getting this document not found error. Please let me know if you need a code snippet of a specific file.
ERROR
){var n=(0,r.renderToString)(o().createElement(Wn,null));a.send('\n <!DOCTYPE html>\n <html>\n <head>\n </head>\n <body style="margin:0">\n <div id="root">'+n+'</div>\n </body>\n <script src="main.bundle.js" defer><\/script>\n </html>\n')})),Hn.listen(3e3,(function(){console.log("app listening on port 3000!")}))})()})();
ReferenceError: document is not defined
code above is a long one line code which I had to cut off
webpack.config.client.js
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.tsx',
},
module: {
rules: [
{
loader: 'ts-loader',
test: /\.(tsx|ts)?$/,
exclude: [/node_modules/],
},
{
test: /\.(scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '/src/assets/images/[name].[ext]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: "file-loader"
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: '[name].bundle.js',
sourceMapFilename: '[file].map',
path: path.resolve(__dirname, 'dist/public'),
},
};
webpack.config.server.js
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const nodeExternals = require('webpack-node-externals');
const { join } = require('lodash');
module.exports = {
mode: 'production',
entry: {
server: './server/index.tsx',
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
externals: [nodeExternals()],
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
title: "Test",
template: './src/index.html'
})
],
module: {
rules: [
{
loader: 'ts-loader',
test: /\.tsx?$/,
options: {
transpileOnly: true,
},
exclude: [/node_modules/],
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '/src/assets/images/[name].[ext]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: "file-loader"
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
};

Issues running my React Application with Webpack

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!

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" },

Categories