I'm using the react-window ^1.8.6 version ( under my dependencies). When I try to yarn build my project, I'm getting the following errors.
ERROR in ./node_modules/react-window/dist/index.esm.js
Module not found: Error: Can't resolve '#babel/runtime/helpers/esm/assertThisInitialized' in '/Users/xxxxxx/Workspace/xxxxx/component-library/node_modules/react-window/dist'
# ./node_modules/react-window/dist/index.esm.js 3:0-86 160:60-82 160:83-105 164:18-40 164:41-63 1066:60-82 1066:83-105 1070:18-40 1070:41-63
# ./src/components/PDFViewer/Viewer.tsx
# ./src/components/PDFViewer/PDFViewer.tsx
# ./src/components/PDFViewer/index.ts
# ./src/components/DocumentViewer/DocumentViewer.tsx
# ./src/components/DocumentViewer/index.ts
# ./src/index.ts
Full set as below
yarn version 1.22.17
npm version 8.1.2
node version v16.13.2
webpack version ^4.44.1
My Webpack config looks like
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.ts',
mode: 'production',
output: {
path: path.resolve(__dirname, 'lib'),
filename: 'the-component-library.js',
libraryTarget: 'umd',
globalObject: 'this',
library: 'theComponentLibrary',
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
use: ['ts-loader'],
},
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.svg$/,
use: ['#svgr/webpack'],
},
{
test: /\.(gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
externals: [
{
react: 'react',
},
'#material-ui/core',
'#material-ui/lab',
/#material-ui\/core\/*./,
/#material-ui\/lab\/*./,
'react-simple-gestures',
'react-dropzone',
],
resolve: {
extensions: ['.ts', '.tsx'],
},
plugins: [
// Ignore all locale files of day.js
new webpack.IgnorePlugin(/^\.\/locale$/),
],
};
How can I resolve this issue?
Oh, I could resolve the issue by changing the Webpack config as below
Related
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 try to upgrade my app from webpack 2 to webpack 4.16.5.
Because I want not again end up in a hard to understand some hundreds line config, I start with a minimal config. This is my current:
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const context = path.resolve(__dirname, "app");
module.exports = {
entry: {
home: "./index.js"
},
context,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
resolve: {
extensions: [".js", ".jsx", ".css", "json"],
modules: [path.resolve(__dirname, "node_modules"), context]
}
};
But I run in problems importing the CSS files from react-toolbox i.e.:
import Dialog from 'react-toolbox/lib/dialog';
in a js file and also
#import "react-toolbox/lib/button/theme.css";
causes errors like this:
ERROR in ../node_modules/react-toolbox/lib/switch/theme.css (../node_modules/css-loader!../node_modules/postcss-loader/src!../node_modules/sass-loader/lib/loader.js!../node_modules/react-toolbox/lib/switch/theme.css)
Module build failed (from ../node_modules/css-loader/index.js):
Error: composition is only allowed when the selector is single: local class name not in ".disabled", ".disabled" is weird
Does anyone have a working application with wbpack4 and react-toolbox? Also, any hints on what may cause these errors are welcome!
I'm learning react.js with the js stack from scratch tutorial and try to using react-toolbox components.
Finnaly, i have a working demo with webpack 4 and the react-toolbox, it's based on the react-toolbox-example.
This is my settings:
add css-modules related packages
$ npm install postcss postcss-cssnext postcss-import postcss-loader css-loader style-loader
add a postcss.config.js
module.exports = {
plugins: {
'postcss-import': {
root: __dirname,
},
'postcss-cssnext': {}
},
};
add a webpack rule
...
{ test: /\.css$/, use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[name]--[local]--[hash:base64:8]'
}
},
'postcss-loader'
]},
...
add cmrh.conf.js - Using the css-modules-require-hook for SSR（Optional）
module.exports = {
generateScopedName: '[name]--[local]--[hash:base64:8]'
}
You can see all the settings in here, hope it will work for you.
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 want to set up my react project with an scss file for each component. So given a component called PermissionPicker I want to import a PermissionPicker.scss in the jsx file.
With my current set up the webpack loaders are only loading scss files when imported in my entry point (boot-client.tsx). import './PermissionPicker.scss' in my PermissionPicker components causes a webpack error:
Module parse failed: PermissionPicker.scss Unexpected token (1:1)
You may need an appropriate loader to handle this file type.
I was under the impression that I could import scss anywhere in my project similar to how create-react-app works.
Any advice would be great!
Below is my webpack config.
const sharedConfig = () => ({
stats: { modules: false },
resolve: { extensions: [ '.js', '.ts', '.tsx', '.jsx' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' /
},
module: {
rules: [
{ test: /\.tsx?$/, include: /client/, use: 'babel-loader' },
{ test: /\.tsx?$/, include: /client/, use: 'awesome-typescript-loader?silent=true' }
]
},
plugins: [new CheckerPlugin()]
});
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
entry: { 'main-client': './client/boot-client.tsx' },
module: {
rules: [
{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },
{ test: /\.scss$/, use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{ test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
]
},
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new ExtractTextPlugin('site.css'),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]')
})
] : [
])
});
You need to install node-sass with sass-loader, because the sass-loader requires node-sass as peerDependency
npm install sass-loader node-sass --save-dev
And missing something as include: join(__dirname, 'src')
rules: [
{
test: /\.css$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({ use: 'css-loader' })
},
{
test: /\.scss$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{ test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
]
The src is a common path for Components, you need to indicate the path from the path of your config file
Edit: The author has patched it.
I'm beginning to use react-fetch (well, trying to), and when trying to run webpack, I got this error :
ERROR in ./~/react-fetch/build/react-fetch.js
Module not found: Error: Cannot resolve 'file' or 'directory' E:\Users\Adrien\Documents\GitHub\brigad-admin-frontend/node_modules/react/addons in E:\Users\Adrien\Documents\GitHub\brigad-admin-frontend\node_modules\react-fetch\build
# ./~/react-fetch/build/react-fetch.js 17:19-42
But, as the error says, I have no react/addons folder (I'm using React 15.0.1).
Does anybody have had this issue before?
Thanks in advance.
PS: Here's my webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const nodeDir = `${__dirname}/node_modules`;
const config = {
resolve: {
alias: {
react: `${nodeDir}/react`,
'react-dom': `${nodeDir}/react-dom`,
'react-router': `${nodeDir}/react-router`,
'react-fetch': `${nodeDir}/react-fetch`,
'react-bootstrap': `${nodeDir}/react-bootstrap`,
velocity: `${nodeDir}/velocity-animate`,
moment: `${nodeDir}/moment`,
slimscroll: `${nodeDir}/slimscroll`,
},
},
entry: {
routes: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./public/src/routes/js/main',
],
vendors: [
'react', 'react-dom', 'react-router', 'react-fetch', 'react-bootstrap',
'velocity', 'moment', 'slimscroll',
],
// chartVendors: ['raphael', 'morris'],
},
output: {
path: path.join(__dirname, 'public/dist'),
// publicPath: path.join(__dirname, 'public/dist/'),
filename: 'bundles/[name].bundle.js',
chunkFilename: 'chunks/[name].chunk.js',
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'public'),
loader: 'react-hot',
},
{
test: /\.js$/,
include: path.resolve(__dirname, 'public'),
loader: 'babel',
},
{
test: /\.css$/,
include: path.join(__dirname, 'public'),
loader: 'style!css-loader?modules&importLoaders=1' +
'&localIdentName=[name]__[local]___[hash:base64:5]',
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendors', './bundles/vendors.js', Infinity),
],
};
module.exports = config;
React API has changed. import React from 'react/addons' isn't valid in the current version. I can see the author uses React.addons.cloneWithProps from there.
The documentation suggests using React.cloneElement instead.
You could tweak the code accordingly and submit a PR to get this fixed.