Unlike error for preset. i'm getting error for the closing tag.
i'm unable create build
i had to use "#babel/plugin-transform-typescript" to resolve existing issue.
where i got error for using
{ customer_name, avatar, customerUUID }: row
as function argument
console error
bable.config file
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-destructuring",
"#babel/plugin-transform-typescript",
"#babel/plugin-transform-react-inline-elements",
// "#babel/plugin-proposal-export-default-from",
// "#babel/plugin-proposal-optional-chaining",
// "#babel/plugin-syntax-dynamic-import",
// "#babel/plugin-transform-regenerator",
// "#babel/plugin-transform-runtime",
],
};
here is my webpack.config file
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
output: {
filename: "bundle.js",
},
};
Related
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
I moved a React app from create-react-app to Webpack 5 and the UI library, Ant Design, is no longer loading the icons on components.
For several components, this is having functionality breaking effects.
Issue
When attempting to use a component that has an icon, it will console.log the below error message and render the component without that icon.
Error Message
warning.js:16 Warning: [#ant-design/icons] icon should be icon definiton, but got:
var LeftOutlined={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"}}]},name:"left",theme:"outlined"};export default LeftOutlined;
Webpack
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: './src/index.tsx',
output: {
filename: 'index.min.js',
path: path.resolve(__dirname, '../public/'),
},
resolve: {
modules: [__dirname, 'src', 'node_modules'],
extensions: ['*', '.js', '.jsx', '.tsx', '.ts', '.less'],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/i,
use: ['style-loader', 'css-loader', 'less-loader'],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {},
},
],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'babel-loader',
},
{
loader: '#svgr/webpack',
options: {
babel: false,
icon: true,
},
},
],
},
{
test: /\.png|svg|jpg|gif$/,
use: ['file-loader'],
},
],
},
}
Babel
{
"presets": ["#babel/preset-react", "#babel/preset-env"],
"plugins": [["#babel/transform-runtime"]]
}
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'),
},
};
I'm having trouble with extract-loader. I try to add background: url(../../assets/icons/upload.svg); to sass, but I get an error.
Error: Cannot find module '../../assets/icons/upload.svg' from '/home/jeremy/code/sample-project/src/styles'
Tried resolve-url-loader, but without success.
My webpack config:
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
},
{
test: /\.(png|svg|jpg|gif)$/,
include: [
path.resolve(__dirname, 'src/assets/'),
],
use: [
'file-loader'
],
},
{
test: /\.hbs$/,
loader: require.resolve('handlebars-loader'),
query: {
inlineRequires: '/assets/',
},
},
{
test: /\.scss$/,
use: [
{
loader: require.resolve('file-loader'),
options: {
name: 'main.css',
}
},
require.resolve('extract-loader'),
require.resolve('css-loader'),
require.resolve('postcss-loader'),
require.resolve('sass-loader'),
],
}
]
},
Im trying to webpack react project using this webpack.config.js:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
mode: "production",
entry: "./app/src/plugin.js",
output: {
filename: "build/static/js/bundle-project.min.js",
libraryTarget: "commonjs"
},
node: {
fs: "empty"
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.svg$/,
loader: "svg-inline-loader"
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: {
presets: ["#babel/preset-react", "#babel/preset-env"],
plugins: [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
}
}
]
},
plugins: [
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6
}
})
],
resolve: {
alias: {
utils: path.resolve("./src/utils"),
"user-abilities": path.resolve("./src/user-abilities"),
shared: path.resolve("./src/shared"),
components: path.resolve("./src/components"),
store: path.resolve("./src/store")
}
},
externals: {
react: "commonjs react"
}
};
then im doing npm publish and import the package in a different project
using
import Main from #my-repo-package
Im getting this error when trying to render the package in a different project: