Develop Reference

Issue with Setting Up Webpack and Babel

I have followed every instruction for setting up webpack and babel. I Installed the dependencies with npm install --save-dev webpack webpack-dev-server #babel/core babel-loader #babel/preset-env #babel/polyfill. I also installed the webpack-cli.
Here is what I have in my package.json file:
{
"name": "webpack_babel_prac",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "wepack-dev-server --mode development --open",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"webpack": "^5.3.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
}
}
The following codes are the ones I have in my webpack.config.js file
const path = require('path');
module.exports = {
entry: {
app: ['#babel/polyfill','./src/app.js']
},
output:{
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
presets: ['#babel/preset-env']
}
}
]
}
}
when I run build (npm run build) it always gives me error:
> webpack_babel_prac#1.0.0 build /Users/sel/Desktop/js_course/webpack_babel_prac
> webpack
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack_babel_prac#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack_babel_prac#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/sel/.npm/_logs/2020-10-29T18_12_00_720Z-debug.log
sels-MacBook-Air:webpack_babel_prac sel$
It's telling me that the configuration has has an unknown property "query" as shown above. When I remove query and leave presets: ['#babel/preset-env']. It will display configuration has has an unknown property "preset". However, when I remove query and presets object it will run build but in my app.bundle.js, the codes from my app.js file are not completely compiled into ES5.
I would I appreciate it if anyone can tell me what I'm doing wrong.
Thanks.

The babel-loader docs show several examples of how to do this. If you're following guides and seeing this, they must be guides that were written several years ago.
query should be options.
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options:{
presets: ['#babel/preset-env']
}
}
]
}

Why is my webpack bundle successfully built on host machine but is not in docker container?

I have a monorepo structure of my project like this:
babel.config.js
a-something
b-something
where I have the babel config file in the root of my project and the packages a-something and b-something.
Inside package a-something I have the following webpack config:
const path = require('path')
module.exports = {
target: 'node',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js?$/,
use: {
loader: 'babel-loader',
options: {
rootMode: 'upward'
}
},
include: [
path.resolve(__dirname, 'src'),
/node_modules\/a-/,
/node_modules\/b-/
]
}
]
}
}
Inside the package a-something I have the following package.json:
{
"name": "a-something",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prod:build": "webpack --config webpack.config.js",
"prod:start": "node build/bundle.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"graphql": "^14.5.8",
"graphql-request": "^1.8.2",
"graphql-tag": "^2.10.1",
"b-something": "^1.0.0",
"node-fetch": "^2.6.0",
"sitemap": "^5.0.0"
},
"devDependencies": {
"webpack": "3.5.6",
"#babel/polyfill": "7.7.0"
}
}
My root package.json has the following dependencies:
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"babel-loader": "8.0.6"
and lastly my Dockerfile inside package a-something is:
FROM node:10.15.1
COPY ./package.json /src/package.json
ENV PORT 3000
ENV NODE_ENV production
WORKDIR /src
RUN npm install
COPY ./lerna.json /src/lerna.json
COPY ./packages/a-something/package.json /src/packages/a-something/package.json
COPY ./packages/b-something/package.json /src/packages/b-something/package.json
RUN npm run clean
COPY . /src
WORKDIR /src/packages/a-something
RUN npm run prod:build
RUN echo "FINISHED BUILDING!"
EXPOSE ${PORT}
CMD ["npm" , "run", "prod:start"]
When I run npm run prod: build and npm run prod: start the bundle is built successfully, however when I build the docker (where the context is the root folder) I get the following npm error:
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/src/packages/a-something'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! a-something#1.0.0 prod:build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the a-something#1.0.0 prod:build script.
My host machine OS is macOS Mojave. Maybe the symlinks generated by Lerna are handled differently on Debian (used by node image)?
UPDATE: the issue was resolved by moving all babel related npm packages from devDependencies to dependencies section of root package.json. Does anyone have an idea why this would solve the problem?

As I mentioned in the update section of my question the solution was to move all babel related packages to devDependencies section of the root package.json.
But why did this help?
The problem was I set NODE_ENV to production in Dockerfile. npm will not install dev dependencies if NODE_ENV is set to production. On the host machine I didn't have such variable. In addition another issue would've been #babel/polyfill, according to babel docs:
Because this is a polyfill (which will run before your source code),
we need it to be a dependency, not a devDependency
According to the docs #babel/polyfill is also deprecated so the better solution is to:
add "babel-loader": "8.0.6" to root package.json
Have the following devDependencies in a-something package.json:
"devDependencies": {
"webpack": "3.5.6",
"core-js": "^3.4.7",
"regenerator-runtime": "^0.13.3"
}
Place these 2 lines in the entry Javascript file at the very top:
import 'core-js/stable'
import 'regenerator-runtime/runtime'
Finally use this webpack config:
const path = require('path')
module.exports = {
target: 'node',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.js?$/,
use: {
loader: 'babel-loader',
options: {
rootMode: 'upward',
presets: [
['#babel/preset-env', {
corejs: 3,
useBuiltIns: 'usage'
}]
]
}
},
include: [
path.resolve(__dirname, 'src'),
/node_modules\/a-/,
/node_modules\/b-/
]
}
]
}
}

Upgrade to Babel 7: Cannot read property 'bindings' of null

I just upgraded to Babel 7 (from 6) by running these commands:
npm remove babel-cli
npm install --save-dev #babel/cli #babel/core #babel/preset-env
Here is my .babelrc file:
{ "presets": ["env"] }
Then I ran:
babel js/src --out-dir js/dist
And it results in:
TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (/xyz/node_modules/#babel/traverse/lib/scope/index.js:867:13)
at BlockScoping.updateScopeInfo (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
at BlockScoping.run (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
at newFn (/xyz/node_modules/#babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/xyz/node_modules/#babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/xyz/node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/xyz/node_modules/#babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/xyz/node_modules/#babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/xyz/node_modules/#babel/traverse/lib/context.js:90:19)
What did I do wrong?

In your .babelrc file, change
{ "presets": ["env"] }
to
{ "presets": ["#babel/preset-env"] }
(and install that package if you haven't already).
In your .babelrc you are still referencing the package babel-preset-env (which is for 6.x), you want to reference #babel/preset-env instead (which is for 7.x).
https://github.com/babel/babel/issues/6186#issuecomment-366556833
Note: you should also make this change in webpack.config.js if it is there as well.
Here is the sample webpack config section where you should change the preset:
use: {
loader: 'babel-loader',
options: {
// Here you should change 'env' to '#babel/preset-env'
presets: ['#babel/preset-env'],
},
},

Webpack babel-loader runtime: Module build failed: TypeError: this.setDynamic is not a function

I'm trying to use the babel-loader with the babel-plugin-transform-runtime.
I've followed the instructions at:
https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code
The relevant code:
rules: [
// the 'transform-runtime' plugin tells babel to require the runtime
// instead of inlining it.
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/transform-runtime']
}
}
}
]
And I get the following error on build:
Module build failed: Error: Cannot find module '#babel/plugin-transform-runtime'
If I'm changing the plugin name to: plugins: ['transform-runtime'], I get the following error:
Module build failed: TypeError: this.setDynamic is not a function
What is the problem?

After a struggle I've found the right way to do it.
Tl;dr
If you install the new babel loader, you should load the new babel plugins.
Full story
The install in the official docs:
npm install babel-loader#8.0.0-beta.0 #babel/core #babel/preset-env webpack
In the github page, these were the instructions for the runtime plugin:
NOTE: You must run npm install babel-plugin-transform-runtime
--save-dev to include this in your project and babel-runtime itself as a dependency with npm install babel-runtime --save.
Instead, you should use the new version like this:
npm install --save-dev #babel/plugin-transform-runtime
npm install --save #babel/runtime
Then it would work with the configuration in the documentation.

First, as #yccteam pointed one needs to have installed
npm install --save-dev #babel/plugin-transform-runtime
npm install --save #babel/runtime
.babelrc file should have
{
"presets": [
["#babel/preset-env", {
"debug": false,
"modules": false,
"useBuiltIns": false
}],
"#babel/preset-react"
],
"plugins": [
"#babel/syntax-dynamic-import",
"#babel/plugin-transform-runtime",
[ "#babel/plugin-proposal-class-properties", { "loose": true } ],
"#babel/transform-async-to-generator"
],
"env": {
"production": {
"presets": ["react-optimize"]
}
}
}
webpack.js file should look like
module: {
rules: [
{
test: /(\.js[\S]{0,1})$/i,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/preset-react', '#babel/preset-env'],
plugins: ['#babel/proposal-class-properties']
},
},
...

Your webpack entry looks the same as the example, so I wonder what happens if you use .babelrc.
{
"plugins": ["transform-runtime"]
}
Do you have the env preset installed as well?

Webpack "Cannot find module test.scss"

I'm running webpack in a docker container if that makes any difference.
My webpack.config.js:
module.exports = {
entry: './app/Resources/scripts/test.js',
output: {
filename: './web/js/bundle.js'
},
watch: true,
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
}
My test.js:
require('../styles/test.scss');
alert('Hello');
My file structure:
app/
--Resources/
----scripts/
------test.js
----styles/
------test.scss
web/
--js/
----bundle.js
webpack.config.js
My dockerfile is:
FROM ubuntu:latest
WORKDIR /app
RUN apt-get update
RUN apt-get install curl -y
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - && apt-get install nodejs -y
RUN npm install webpack sass-loader css-loader style-loader node-sass -g
CMD webpack
The JS compiles fine, works etc. However when trying to compile SCSS it fails with the error:
webpack_require(!(function webpackMissingModule() { var e = new Error("Cannot find module \"../styles/test.scss\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));