Develop Reference

Uncaught TypeError: Cannot read property 'locals' of undefined

I've made bundle.js and bundle.css to use in my web app,
My package.json looks like this:
"dependencies": {
"bootstrap": "^4.5.3",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^1.3.3",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
},
My webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env, argv) => {
return {
//Define entry point
entry: ['./src/index.js', './src/css/index.scss'],
//Define output point
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.s[c|a]ss$/,
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
options: {
presets: ["#babel/preset-env"],
plugins: ['#babel/plugin-proposal-object-rest-spread']
}
},
]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new MiniCssExtractPlugin({
filename: 'bundle.css'
})
]
};
};
My src structure is like this:
src
index.js:
import 'jquery';
import 'bootstrap';
import './js/login';
import './js/helpers';
index.scss:
#import 'bootstrap';
#import 'util.scss';
#import 'login.scss';
#import 'site.css';
I am getting this error in console:
Console
bundle.js
Everything else is working fine, i have no problem with javascript, but it bugs me that i don't know how to fix this error.
PS:
I am new to web development in general, started using webpack yesterday, the idea was to use only bundle.js and bundle.css in my html without adding jquery and bootstrap tags for them separately

Try to set the option esModule to false for MiniCssExtractPlugin
use: [
'style-loader',
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false,
},
},
'css-loader',
'sass-loader'
]

Don't use 'style-loader' along with mini-css-extract-plugin, modify your rule to match the below:
{
test: /\.s[c|a]ss$/,
include: path.resolve(__dirname, 'src'),
use: [
//'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
You can find more details here: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/613

Similar to #Dina's answer but without MiniCssExtractPlugin :
use: [
{
loader: "style-loader",
options: {
esModule: false,
},
},
"css-loader",
"sass-loader",
]

Module build failed (from ./node_modules/babel-loader/lib/index.js) when using single-spa.config.js

I Know that there is a lot of problem like this, but I'm seriously confused After read a lot of thread about this and still failed to solved my issue.
This is my first time using single-spa for micro frontend, but I got stuck in the first part.
this is the error I got:
ERROR in ./single-spa.config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\Gitpanda\singlespatest\node_modules\babel-preset-react\lib\index.js
at createDescriptor (D:\Gitpanda\singlespatest\node_modules#babel\core\lib\config\config-descriptors.js:178:11)
at items.map (D:\Gitpanda\singlespatest\node_modules#babel\core\lib\config\config-descriptors.js:109:50)
at Array.map ()
at createDescriptors (D:\Gitpanda\singlespatest\node_modules#babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (D:\Gitpanda\singlespatest\node_modules#babel\core\lib\config\config-descriptors.js:101:10)
at presets (D:\Gitpanda\singlespatest\node_modules#babel\core\lib\config\config-descriptors.js:47:19)
at mergeChainOpts (D:\Gitpanda\singlespatest\node_modules#babel\core\lib\config\config-chain.js:320:26)
at D:\Gitpanda\singlespatest\node_modules#babel\core\lib\config\config-chain.js:283:7
at Generator.next ()
at buildRootChain (D:\Gitpanda\singlespatest\node_modules#babel\core\lib\config\config-chain.js:120:29)
i ｢wdm｣: Failed to compile.
After read a lot of topic about this problem, i got a hunch maybe this error occur because of babel version but when I try to add and instal the preset since I use babel-loader#8 i must instal babel-core#7 but the error still there.
this is my package.json:
"dependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"single-spa": "^5.0.0",
"single-spa-react": "^2.11.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"html-loader": "^0.5.5",
"style-loader": "^1.1.3",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
this is my .babelrc:
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions"]
}
}],
"#babel/preset-env",
["react"]
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread"
]
}
and this is my webpack.config:
const path = require('path');
const webpack = require('webpack');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
// Set the single-spa config as the project entry point
'single-spa.config': 'single-spa.config.js',
},
output: {
publicPath: '/dist/',
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
// Webpack style loader added so we can use materialize
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'babel-loader',
},
{
// This plugin will allow us to use html templates when we get to the angularJS app
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader',
},
],
},
node: {
fs: 'empty'
},
resolve: {
modules: [
__dirname,
'node_modules',
],
},
plugins: [
// A webpack plugin to remove/clean the build folder(s) before building
// new CleanWebpackPlugin(['dist']),
new CleanWebpackPlugin(),
],
devtool: 'source-map',
externals: [],
devServer: {
historyApiFallback: true
}
};
If you wondering what I want to make, in fact I just follow this tutorial in here
Can someone help me to solved this? I'm already confused about this

ReactJS loading in other application returns Module parse failed ERROR in index.js

I'm using a pretty new JS dev environment (here for details) and according to this documentation React is pretty easy to implement into other JS frameworks.
In my index.js file which is at the root of my directory, I have the following code:
import React, { Component } from "react";
import ReactDOM from "react-dom";
function Button() {
return <button id="btn">Say Hello</button>;
}
ReactDOM.render(
<Button />,
document.getElementById('container'),
function() {
$('#btn').click(function() {
alert('Hello!');
});
}
);
and when i go to run fly server I get the following error:
ERROR in ./index.js Module parse failed: Unexpected token (8:9) You
may need an appropriate loader to handle this file type. | | function
Button() { | return Say Hello; | } |
Here is my package.json file:
{
"name": "fly-example",
"version": "1.0.0",
"description": "fly example app",
"main": "index.js",
"dependencies": {
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.11",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "none"
},
"keywords": [
"fly",
"app"
],
and my webpack.config:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['env'] }
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'public'),
port: 3000,
publicPath: "http://localhost:3000/dist"
},
plugins: [ new webpack.HotModuleReplacementPlugin() ]
};
.babelrc file:
{
"presets": ["env", "react"]
}
Still fairly new to React, but I love building apps in it, but I really want to learn how to integrate it into other JS frameworks so I can use it more broadly.
Is there something I'm missing in the package.json file or the webpack.config? I have done quite a bit of looking around but haven't found much.
Thanks for your help in advance!

Try specifying babel-loader under use.loader. See below:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
options: { presets: ['env'] }
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'public'),
port: 3000,
publicPath: "http://localhost:3000/dist"
},
plugins: [ new webpack.HotModuleReplacementPlugin() ]
};
Instead of writing the webpack configuration by yourself, I'd recommend using create-react-app, it is simpler. Also make sure you import jquery.
Try and let me know if this works !

Generator Runtime error when added babel-preset-env and babel-preset-stage-2

I had to use babel-preset-env and babel-preset-stage-2 in order to use webpack for a code that includes spread operator. After that I succeed in building my bundle with webpack but this time I get generator runtime error during runtime.
So first I tried to do solution in this page, babel-polyfill but my team did not want me to use it, instead they asked me to use transform-runtime plugin,so I installed it and put it in babelrc file but still getting same generator-runtime error, any idea about that ? What should I do more ?
here is babelrc file
{
"presets": [
"env",
"stage-2",
"es2015"
],
"plugins": [
"transform-async-to-generator",
[
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true
}
]
]
}
webpack config file
var path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'partner/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'partner_bundle.js'
},
target: 'web',
module: {
rules: [
{
test: /\.js$/, // Check for all js files
loader: 'babel-loader',
query: {
presets: ['babel-preset-env', 'babel-preset-stage-2'].map(
require.resolve
)
},
exclude: /node_modules\/(?!other-module)/
}
]
},
stats: {
colors: true
},
devtool: 'source-map',
resolve: { symlinks: false }
}
babel and webpack versions in the package.json
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"

Try using:
{
"env": {
"production": {
"plugins": ["transform-react-constant-elements"]
}
}
}
https://babeljs.io/docs/usage/babelrc/

SCSS files not compiling to CSS in react using Webpack

Following is my folder structure & Files for React project which is working fine but I am unable to add CSS through SCSS via Webpack using extract-text-webpack-plugin. Let me know what I am doing wrong with the configuration.
Folder Structure -
Webpack.config.js File -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './app/index.html',
filename: 'index.html',
inject: 'body'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractTextPluginConfig = new ExtractTextPlugin('main.css',{
allChunks: true
});
module.exports = {
entry: './app/app.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
},
plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};
Package.json -
{
"name": "reactyarn",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --hot"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"path": "^0.12.7",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
FYI -
I am not getting any JS error in console, so I believe its only the configuration which is not working.

You appear to be missing one of the loaders (sass-loader) and setting them up in your modules incorrectly.
Try the example below:
module.exports = {
entry: './app/app.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] // <-- this is new
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, 'relative/path/to/scss')]
}, // <--- this is new
plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};
By using ExtractPlugin.extract you're referencing the means to do this in Webpack 2 (using rules and use) but your Webpack config file appears to be geared toward Webpack 1.