I'm in the process of upgrading to webpack 4.6.0 from 3.0.0.
Everything builds fine, but when it comes to executing the code in the browser, imports are not working properly.
This is mu setup:
package.json
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^22.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dynamic-import-node": "^1.0.1",
"babel-plugin-syntax-dynamic-import": "6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.6.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3",
"workbox-webpack-plugin": "^3.0.0"
.babelrc
{
"presets": [
"env",
"react"
],
"plugins": [
"add-module-exports",
"transform-class-properties",
"transform-object-rest-spread",
"transform-object-assign",
"syntax-dynamic-import"
],
"env": {
"test": {
"plugins": [
"dynamic-import-node"
]
}
}
}
webpack.config.js
{
test: /\.js$/,
include: [
path.resolve('src')
],
use: [
{ loader: 'babel-loader' },
...
]
}
And then when it comes to being executed, this happens:
progressiveImage is a react component which when being debugged, it has no default from import.
Can you spot anything wrong from this?
Thanks in advance.
Related
I am using Webpack with Babel, and #babel/preset-env to hopefully import only required polyfills that I need. It seems though that the entire library is being installed, resulting in a large bundle (~250kb)
My package.js:
{
"name": "holidaynewtheme",
"version": "0.1",
"description": "Starter theme for holidaynewbase",
"private": true,
"main": "webpack.config.js",
"dependencies": {
"core-js": "^3.6.5",
"element-closest": "^3.0.2",
"flickity": "^2.2.1",
"gsap": "^3.4.2",
"js-cookie": "^2.2.1",
"turbolinks": "^5.2.0",
"vanilla-lazyload": "^17.1.0",
"whatwg-fetch": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.11.0",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#shopify/theme-cart": "^3.0.3",
"#shopify/theme-product": "^3.0.3",
"#shopify/theme-product-form": "^3.0.3",
"#shopify/themekit": "^1.1.3",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"bluebird": "^3.5.3",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^3.0.1",
"glob": "^7.1.6",
"html-includes": "^4.3.3",
"mini-css-extract-plugin": "^0.9.0",
"modernizr": "^3.6.0",
"modernizr-loader": "^1.0.1",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"sass-loader": "^8.0.2",
"svg-symbols": "^1.0.5",
"url-loader": "^1.1.2",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-shell-plugin-next": "^1.1.5"
},
"browserslist": [
"last 1 version",
"> 2%",
"Explorer >= 11"
]
}
My babel.config.json:
{
"presets": [
[
"#babel/preset-env",
{
useBuiltIns: "entry",
debug: true,
corejs: "3.6.4"
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
I have the following imports set up in my main entry point:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
I'm using the BundleAnalyzerPlugin and get a gzipped size of 250kb for just core-js:
When I change the browserslist setup to be just Chrome 85, nothing form core-js is imported.
When I remove the import line, nothing is imported either.
OK, feeling foolish.
My webpack.config.js had this configuration for babel-loader:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/env'],
}
},
... I'm not that au faix with webpack setup, so I think this was overriding my babel.config.json for anything .js.
Also, I removed the import lines, and changed useBuiltIns to be usage and everything works as expected.
The giveaway should have been that my debug: true was not causing debug info to be logged when webpack was compiling. It is now, and my bundle is much smaller.
In the project that I work at the moment, we use browserify. I have done npm i into my console.
Then when I wanted to generate the js with the command
browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js
it throw an error
preset not found #babel/react
Like every developer I went online and did a search for #babel/react but nothing came up. I have seen variations as #babel/preset-react and tried to use them but it didn't solve my problem.
At that point, my package.json locked like:
{
...
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"stage-1"
]
},
"scripts": {
"build-js": "browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js",
"buildSignUp": "npm run build-js",
...
},
"author": "",
"license": "ISC",
"dependencies": {
"#ungap/url-search-params": "^0.1.2",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"braintree-web": "^3.17.0",
"form-serialize": "^0.7.1",
"jest-junit": "^6.3.0",
"nock": "^10.0.6",
"object-assign": "^4.1.1",
"react": "^15.4.2",
"react-accessible-dropdown": "^1.0.2",
"react-animate-height": "^0.10.8",
"react-dom": "^15.4.2",
"react-dropdown": "^1.2.0",
"react-modal": "^3.8.1",
"react-redux": "^5.0.6",
"react-responsive-modal": "^1.9.4",
"react-scroll": "^1.4.7",
"react-select": "^2.1.2",
"react-slick": "^0.24.0",
"react-swipeable": "^5.4.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"slick-carousel": "^1.8.1",
"validator": "^6.2.1"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-jest": "^23.6.0",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"core-js": "^2.5.3",
"envify": "^4.1.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-15": "^1.2.0",
"jest": "^23.6.0",
"react-test-renderer": "^15.6.2",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-test-utils": "^0.3.0",
"uglify-js": "^3.3.9",
"uglifyify": "^4.0.5"
},
"-vs-binding": {
"ProjectOpened": [
"build"
]
},
"jest": {
"setupFiles": [
"<rootDir>/test-setup.js"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"testMatch": [
"**/tests/*.js?(x)"
],
"reporters": [
"default",
"jest-junit"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
],
"coveragePathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
]
}
}
What to install or what to change in order to fix this problem?
The solution in my case was to extend the preset of the package.json
Because the node module extends and evolves from one version to another one there a lot of cases when they are not compatible.
I had deleted my node_module.
Run npm i again.
Added babel-preset-react to my package.json without installing anything, browserify worked properly. My package.json locked like this.
{
"main": "App.jsx",
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"babel-preset-react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"babel-preset-react",
"stage-1"
]
},
"scripts": {
...
}
}
This solved my problem. Please let me know if it works for you as well.
Webpack is working well before babel installation but after that it isn't generating newest file. I am using webpack version 4.17.2 and babel loader version 8.0.2. How to fix this issue, as i have integrated webpack into gulp automation. Kindly Guide me how to fix this issue and rectify it as i am using it first time .
Here is the Webpack.config.js file
var path = require('path');
module.exports = {
entry: './app/assets/scripts/App.js',
output: {
path: path.resolve(__dirname, "./app/temp/script"),
filename: 'App.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}]
}
}
Here is Package.json file
{
"name": "travel-site",
"version": "1.0.0",
"dependencies": {
"jquery": "^3.2.1",
"jquery-smooth-scroll": "2.2.0",
"lazysizes": "4.0.1",
"normalize.css": "7.0.0",
"picturefill": "3.0.2",
"waypoints": "4.0.1"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0",
"autoprefixer": "7.1.6",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "2.18.13",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-cssnano": "2.1.2",
"gulp-imagemin": "4.0.0",
"gulp-modernizr": "1.0.0-alpha",
"gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "8.1.0",
"gulp-svg-sprite": "^1.4.0",
"gulp-svg2png": "^2.0.2",
"gulp-uglify": "^3.0.0",
"gulp-usemin": "^0.3.28",
"gulp-watch": "^4.3.11",
"postcss-hexrgba": "^1.0.1",
"postcss-import": "^11.0.0",
"postcss-mixins": "^6.2.0",
"postcss-nested": "^2.1.2",
"postcss-simple-vars": "^4.1.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0"
}
}
One solution would be to remove the old file every time it compiles by using clean-webpack-plugin.
const cleanWebPackPlugin = require('clean-webpack-plugin');
plugins: [
new cleanWebPackPlugin(['path-to-App.js'])
]
I use decorators in my project, but it seems the babel-jest do not support this new experiment feature
I find some support from this github issue ===> which replace babel-jest with webpack-babel-jest, and it fix the decorator problem. But a new problem comes in when i run npm run test ==> "ReferenceError: regeneratorRuntime is not defined"
It seems we need regenerator-runtime.(I use redux-saga in my project) I can't get a way to fix this.
package.json {
"babel-core": "^6.7.6",
"babel-eslint": "^7.2.3",
"babel-jest": "^21.2.0",
"babel-loader": "^6.2.4",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-15.4": "^1.0.3",
"jest": "^21.2.1",
"node-sass": "^3.4.2",
"react-addons-test-utils": "^15.4.2",
"regenerator-runtime": "^0.11.0" }
.babelrc {
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-decorators-legacy",
"transform-react-jsx-source",
"transform-class-properties",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}
],
"env": {
"development": {
"presets": [
"react-hmre"
]
},
"test": {
"presets": [
"es2015",
"react",
"stage-0"
]
}
}
}
}
I can't get a way to fix this.
This is well-known issue of regenerator-transform babel plugin, which is commonly used for transpiling code with sagas.
See verbose explanation here: Unable to export generator functions
I'm trying to use decorators in my RN project:
Following is my package.json file:
{
"name": "testApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-native": "^1.5.6",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.6.1",
"react": "^0.14.8",
"react-native": "^0.22.2",
"webpack": "^1.12.14"
}
}
and this is my .babelrc:
{
"plugins": [
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties"
],
"presets": ["es2015", "react", "stage-0", "react-native"]
}
I'm getting error stating ReferenceError: Can't find variable: require
. I tried many post but couldn't get any solution. I created new RN Project using react-native init testApp
Got it fixed error was because of order of presets: I removed all other presets and changed presets to just "react-native" and everything's working now.