I'm getting the following error when using Async/Await for functions:
Uncaught ReferenceError: regeneratorRuntime
Seems to be a common problem but I've tried a couple of solutions I found on stackoverflow to no avail, I've now ended up with a huge list of babel dependencies. :) I'm very confused about all this, could someone spot what's wrong with my babel/webpack files?
Thank you
Package.json (relevant dependencies only)
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.12.1",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.44.2",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#babel/runtime": "^7.12.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack-cli": "^3.3.7"
}
.babelrc
{
"presets": [
"react",
[
"env"
]
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
webpack.config.js
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: ["./src/index"],
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/"
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 20000
}
},
"image-webpack-loader"
]
},
{ 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"
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: true,
filename: 'index.html'
}),
],
devServer: {
historyApiFallback: true,
}
};
module.exports = config;
I took the config files you've provided and did a small test - https://codesandbox.io/s/async-await-webpack-ljv7h?file=/src/App.js I don't see anything wrong with it. I was able to use async/await just fine. May be try a clean up and reinstall - rm package-lock.json && rm -rm node_modules && npm install and see if that fixes your issue.
you forgot to add the plugin
.babelrc
"plugins": ["#babel/plugin-transform-runtime"]
in my case I always do this:
npm install -D babel-loader #babel/core #babel/preset-env webpack webpack-cli
I also suggest you use:
.babelrc
"presets": ["#babel/preset-env"]
and if you are using react you may also need preset "#babel/preset-react"
"presets": [
"#babel/preset-react",
"#babel/preset-env"
]
Related
I am trying to update Webpack to a newer versions (by removing node_modules then running yarn), but I am not able to solve all the config errors shown below.
So far in the Webpack config, I have changed query to options, and loaders to rules. In package.json, I have replaced --colors with --color.
Original webpack.config.js [Source]:
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
entry: {
background: path.join(__dirname, './src/background'),
entry: path.join(__dirname, './src/entry'),
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/manifest.json' },
{ from: 'images/**/*' }
]),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
],
resolve: {
extensions: ['.js']
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
exclude: /node_modules/
}]
}
}
Current webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
entry: {
background: path.join(__dirname, "./src/background"),
entry: path.join(__dirname, "./src/entry"),
},
output: {
path: path.join(__dirname, "./dist"),
filename: "[name].js",
},
plugins: [
new CopyWebpackPlugin([
{ from: "src/manifest.json" },
{ from: "images/**/*" },
]),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
},
}),
],
resolve: {
extensions: [".js"],
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["react", "es2015", "stage-0"],
},
exclude: /node_modules/,
},
],
},
};
Still many of the following errors...
ERROR in ./src/background.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (/home/gameveloster/sidebar/node_modules/babel-loader/lib/index.js:103:36)
but there's no babel in the files stated in the errors, like ./src/background.js.
What is the correct way to fix this issue? Thanks!
package.json:
{
"name": "sidebar",
"private": true,
"version": "0.1.0",
"main": "dist/entry.js",
"license": "UNLICENSED",
"scripts": {
"build": "webpack --progress --profile --color",
"watch": "webpack --watch --progress --color",
"dev": "npm run watch"
},
"dependencies": {
"chrome-sidebar": "file:../chrome-sidebar",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "6.24.0",
"babel-eslint": "^7.2.3",
"babel-generator": "6.24.0",
"babel-loader": "6.4.1",
"babel-plugin-module-resolver": "2.6.2",
"babel-plugin-react-require": "3.0.0",
"babel-plugin-transform-class-properties": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.24.0",
"babel-plugin-transform-object-rest-spread": "6.22.0",
"babel-plugin-transform-react-jsx-source": "6.22.0",
"babel-plugin-transform-react-remove-prop-types": "0.3.3",
"babel-plugin-transform-runtime": "6.22.0",
"babel-preset-env": "^1.4.0",
"babel-preset-latest": "6.24.0",
"babel-preset-node6-es6": "^11.2.5",
"babel-preset-react": "6.23.0",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "6.23.0",
"copy-webpack-plugin": "^4.0.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}
I'm working on a project that imports components from Antdesign, styles them/add extra props to them,..(extend them) and re-export them. Other projects should then be able to install this project via npm and use the extended components.
A component is structured in a folder like this:
Button
- index.js
index.js contains the import, the extending and the exporting:
import { Button } from 'antd'
Button.foo = bar // just dummy code
export default Button
Then there is an index.js file at component folder level that makes importing easier by exporting all components from there:
export { default as Button} from './Button'
To build into bundle.js I'm using the following webpack config:
const path = require('path')
const nodeExternals = require('webpack-node-externals')
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const themes = require('./src/content/theming')
const fs = require('fs');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './src/content/theming/test.less'), 'utf8'));
module.exports = env => {
return {
entry: path.resolve(__dirname, 'src/content/components/index.js'),
output: {
path: path.resolve(__dirname, './dist/lib'),
filename: 'index.js'
},
externals: [nodeExternals()],
plugins: [
//new BundleAnalyzerPlugin()
new ExtractTextPlugin('style.css')
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/react', { 'plugins': ['#babel/plugin-proposal-class-properties'] }],
plugins: [['import', { 'libraryName': 'antd', 'style': true }]] // `style: true` for less
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract([
{loader: "css-loader"},
{loader: "less-loader",
options: {
modifyVars: themeVariables,
root: path.resolve(__dirname, './')
}
}
])
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader"
})
}
]
}
}
}
And this package.json:
{
"name": "new project",
"main": "./dist/lib/index.js",
"files": [
"dist/lib/*"
],
"scripts": {
"build": "./node_modules/.bin/webpack --mode=production"
},
"author": "",
"standard": {
"env": [
"jest"
]
},
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"babel-plugin-import": "^1.11.0",
"css-loader": "^2.1.1",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^3.0.1",
"less": "2.7.0",
"less-loader": "^5.0.0",
"less-vars-to-js": "^1.3.0",
"standard": "^12.0.1",
"style-loader": "^0.23.1",
"webpack": "^4.30.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.2",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"antd": "^3.17.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
}
}
Now, when I run npm run build, it builds correctly, but if I import them in another project, there is not styling.
This is my first time creating a project like this and I just can't get my head around why it is not working. Any help would really be appreciated.
So basically I found the issue myself. In the externals entry in package.json I was calling nodeExternals(). This caused the node_modules folder to be ignored. Removing this included the css in the production build.
I'm working on a making my own boilerplate for React using Webpack4 and have run the issue of my css file being bundled and not rendering specific custom styles. As you can see I am using the sass-loader compile all my .sass/scss files together and postcss-loader to autoprefixing, css-loader to load the compiled css files, MiniCssExtractPlugin.loader extracts CSS into separate files, and finally style-loader to inject my css. It does all this correctly buy doesn't seem to actually apply the styles. Could anybody explain why this occurs?
The repo can be found
here
webpack.config.js
/* Required Packages */
const webpack = require('webpack')
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
//entry to bundled js file
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js' //output filename
},
//want to use the src/index.js file as entry point to bundle all of its imported files
module:{
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader'],
exclude: ["node_modules"]
}
]
},
//webpack server hot module replacement
plugins: [
new CleanWebpackPlugin('dist', {}),
new MiniCssExtractPlugin({
filename: 'style.[hash].css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash(),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['*', '.js', '.jsx'] //array of extensions to compile js
},
devServer: {
contentBase: './dist',
hot: true
}
}
package.json
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --config ./webpack.config.js --open --hot --history-api-fallback"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Nickadiemus/ns-react-boilerplate.git"
},
"author": "Nick Sladic",
"license": "MIT",
"bugs": {
"url": "https://github.com/Nickadiemus/ns-react-boilerplate/issues"
},
"homepage": "https://github.com/Nickadiemus/ns-react-boilerplate#readme",
"devDependencies": {
"autoprefixer": "^8.6.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"react-hot-loader": "^4.3.3",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1"
}
}
Use either 'style-loader' or MiniCssExtractPlugin.loader, not both:
const devMode = process.env.NODE_ENV !== 'production';
...
{
test: /\.scss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
exclude: ["node_modules"]
}
Source: mini-css-extract-plugin docs
I have gone over the details of this setup so many times, it was woking once upon a time, and now there is an error...
ERROR in ./src/index.js
Module parse failed: /Users/Jeff/javascript/testbuildwords/src/index.js Unexpected token (5:11)
You may need an appropriate loader to handle this file type.
| class MyComponent extends React.Component {
| render() {
| return <div>This is my component</div>;
| }
| }
I feel the error must be somewhere in these files, but I've looked over them and compared them with others 1000 times and I cannot find the error
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "index.js",
libraryTarget: "commonjs2"
},
module: {
rules: [
{
test: /.js$/,
include: path.resolve(__dirname, "src"),
exclude: /(node_modules|bower_components|build)/,
use: "babel-loader"
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: "file-loader",
options: {}
}
]
}
]
},
externals: {
react: "commonjs react"
}
};
.babelrc
{
"presets": ["env"],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx",
"transform-class-properties"
]
}
package.json
{
"name": "testbuildwords",
"version": "0.1.0",
"main": "build/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --watch",
"build": "webpack"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"style-loader": "^0.19.0",
"webpack": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.6.0",
"eslint-plugin-class-property": "^1.0.6"
}
}
./src/index.js
import React from "react";
class MyComponent extends React.Component {
render() {
return <div>This is my component</div>;
}
}
export default MyComponent;
Try adding the babel react-preset.
{
"presets": ["env", "react"]
}
I think Webpack can't resolve the .jsx files implicitly.
What if you add the extensions that should be resolved to webpack.config.js file?:
resolve: {
extensions: ['', '.js', '.jsx']
}
Add one more rule with presets to resolve jsx extensions
test: /.jsx$/,
include: path.resolve(__dirname, "src"),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react', 'babel-preset-stage-0']
}
}
And in resolve block add jsx entry like
resolve: {
extensions: ['', '.jsx', '.js']
}
None of the answers helped me. I ended up adding webpack to dependencies instead of devDependencies because most of the other things that webpack was using were listed there, the issue cleared up after that
I am trying to build my React project for production. When I run my production command I get an error about UglifyJSPlugin saying: Unexpected token: keyword (const). Below I have added all my code from my package.json & webpack.config.js file. There are several questions related to this issue but none of them has worked. Any suggestions would be great.
package.json
{
...
"scripts": {
...
"prod": "NODE_ENV=production webpack -p"
},
"dependencies": {
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
...
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",
"uglifyjs-webpack-plugin": "^0.4.6"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var debug = process.env.NODE_ENV !== 'production';
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : false,
entry: './js/client.js',
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['stage-2', 'es2015', 'react'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
},
{
test: /\.css$/,
loader: ['style-loader/url', 'file-loader']
}
]
},
output: {
path: __dirname + "/src/",
filename: 'client.min.js'
},
plugins: debug ? [] : [
new webpack.optimize.OccurrenceOrderPlugin(),
new UglifyJSPlugin({
mangle: false,
sourceMap: false
})
],
};
.babelrc
{
"presets": [
["stage-2"],
["es2015", {"modules": false}],
["react"]
]
}
UglifyJSPlugin saying that yours js files have keyword const . i think its because of output file is es6. but UglifyJSPlugin needs es5