We Keep Coding

Babel 7 upgrade

I have updated babel 6 to babel 7.
this is a part from my package. For some reason my app still looking for "babel-core" module.
i have deleted package-lock.json and node modules and install them again, I did npm rebuild --force. No luck, any suggestions ?
"#babel/core": "^7.6.2",
"#babel/cli": "^7.6.2",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/polyfill": "^7.6.0",
"#babel/preset-env": "^7.6.2",
"#babel/preset-react": "^7.0.0",
"#babel/runtime": "^7.6.2",
"#devexpress/dx-core": "^1.10.3",
"#devexpress/dx-grid-core": "^1.10.3",
"#devexpress/dx-react-core": "^1.10.3",
"#devexpress/dx-react-grid": "^1.10.3",
"#devexpress/dx-react-grid-material-ui": "^1.10.0",
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "^3.0.2",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-dev-warning": "^0.1.1",
"babel-plugin-transform-regenerator": "^6.26.0",
ERROR in ./src/index.js
Module build failed: Error: Cannot find module 'babel-core'
Require stack:
- /Users/hakob/Documents/Projects/dashboard/node_modules/babel-loader/lib/index.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/loader-runner/lib/loadLoader.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/webpack/lib/NormalModule.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/webpack/lib/Compiler.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/webpack/lib/webpack.js
- /Users/hakob/Documents/Projects/dashboard/gulpfile.babel.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/gulp/node_modules/gulp-cli/index.js
- /Users/hakob/Documents/Projects/dashboard/node_modules/gulp/bin/gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:780:15)
at Function.Module._load (internal/modules/cjs/loader.js:685:27)

The babel loader 7 requires babel-core, you should update babel loader to 8 like #Chris Li said.

Webpack.config.js: Configuration has an unknown property 'default'

I've moved everything over from a working project (ultimate-hot-reloading-example), to an existing project of mine that uses the keystone cms. I uninstalled ALL dev dependencies in my project, and installed all of the exact dependencies in the working project into mine (webpack, babel, etc...).
For some reason, the web.config.js file won't parse the es6 syntax
export default
Which gives this error:
- configuration has an unknown property 'default'.
If I switch to the following, it works:
const config = ...
module.exports = config;
Elsewhere in my project, I use other es6 syntax and it works...
Here's the dependencies in package.json, which works perfectly with the example project with the 'export default' syntax.
"dependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.9.0",
"babel-runtime": "^6.9.2",
"chokidar": "^2.0.3",
"css-loader": "^0.28.11",
"css-modules-require-hook": "^4.0.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.8.1",
"express": "^4.14.0",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-hot-loader": "^4.1.3",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"style-loader": "^0.21.0",
"webpack": "^4.8.3",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.12.1",
"webpack-node-externals": "^1.7.2"
Any idea why this would happen?

I had a similar problem which turned to be my improper migration from require(...) to import(...)
I replaced this code:
const common = require("./webpack.common");
module.exports = merge(common, {...})
with:
const common = await import("./webpack.common.js");
export default merge(common, .....)
The problem was that I didn't use the default export from webpack.common.js. The fix is:
const common = await import("./webpack.common.js");
export default merge(common.default, .....)

webpack and babel configuration for normal javascript project is failing

I'm doing this simple setup with webpack and Babel for simple javascript project. I've tried so many examples but nothing is working.
These are my settings :
{
"name": "webpack_babel-prac",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
CONFIGURATION FILE
const path = require('path');
module.exports={
entry:{
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname,'build'),
filename:'bundle.js'
},
mode:'development',
module:{
rules:[{
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
presets:['babel-preset-env ']
}
}]
}
}
I'm getting this error while i'm running the npm run build command:
ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/core'
babel-loader#8 requires Babel 7.x (the package '#babel/core'). If you'd
like
to use Babel 6.x ('babel-core'), you should install 'babel-loader#7'.
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (C:\Users\ABCD\Music\Webpack_Babel prac\node_modules\v8-compile-
cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\Users\ABCD\Music\Webpack_Babel
prac\node_modules\babel-loader\lib\index.js:10:11)
at Module._compile (C:\Users\ABCD\Music\Webpack_Babel prac\node_modules\v8-
compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
I've gone through so many tutorials and also tried this medium article but nothing is working. https://medium.com/#jeffrey.allen.lewis/the-ultimate-2018-webpack-4-and-babel-setup-guide-npm-yarn-dependencies-compared-entry-points-866b577da6a

Babel not transpiling npm link/symlink package source code

I´m setting up a shared module environment using node. Here is my directory structure:
project
|--common
| |--package.json
| |--graphql
| |----schema.js
|
|--server
|--package.json
|--server.js
Linking both projects:
$ cd project\common
$ npm link
Then:
$ cd ../server
$ npm link common
common Package.json file:
{
"name": "common",
"private": true,
"version": "3.0.0",
"description": "Common code for all projects",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Me",
"license": "MIT"
}
server package.json file:
{
"name": "server",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "concurrently \"babel-node start-server\" \"babel-node start-client\"",
"server": "nodemon --exec \"babel-node start-server.js\"",
"client": "nodemon --exec \"babel-node start-client.js\"",
"lint": "eslint ."
},
"dependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.2",
"common": "file:../common",
"connect-mongo": "^2.0.0",
"crypto": "^1.0.1",
"express": "^4.15.3",
"express-graphql": "^0.6.12",
"graphql": "^0.13.1",
"graphql-relay": "^0.5.4",
"jwt-simple": "^0.5.1",
"mongoose": "^5.0.10",
"morgan": "^1.8.2",
"nodemailer": "^4.6.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"path": "^0.12.7",
"validator": "^9.1.1"
},
"devDependencies": {
"concurrently": "3.5.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"fs-extra": "^5.0.0",
"node-fetch": "^2.1.1",
"nodemon": "^1.11.0"
},
"babel": {
"presets": [
"es2015",
"stage-0",
"es2017"
],
"plugins": [
"transform-runtime"
]
}
}
Server.js code:
import schema from "common/graphql/schema";
...
Running server application:
$ npm run server
import { GraphQLSchema } from 'graphql';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at loader (D:\project\server\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (D:\project\server\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (D:/9. DEV/WORKSPACE/amplifactory/server/routes.js:25:1)
at Module._compile (module.js:570:32)
at loader (D:\project\server\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (D:\project\server\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
[nodemon] app crashed - waiting for file changes before starting...
From what I´ve seen that is not transpiling code outside server directory, but without putting common ouside server directory I cannot build my shared code.
How to solve this babel issue and make it transpile correctly ?

You aren't going to like it, and maybe there is a better answer in spring 2018, but you may need to have a separate build step for your common code. I have a similar project where the package.json file for the common code looks something like this:
{
"name": "stripmall_gcloud_services",
"version": "1.0.0",
"description": "wraps up some commonly used google helpers",
"main": "./dist/index.js",
"scripts": {
"test": "standard --fix && mocha -r babel-register",
"build": "babel lib -d dist"
}...}
Notice the npm build step that transpiles the common code, and notice that the main key points to the index.js file in the transpiled directory. You just run npm run build whenever you update your common code and all your linking will work as you would expect.

React Native unit testing with ava

I've tried following the simple setup from here regarding unit testing js code with AVA, but I am doing something wrong because the setup doesn't seem to be taken into consideration.
Exception:
ReferenceError: __DEV__ is not defined
at Object.<anonymous> (D:\Vs\app\node_modules\react-native\Libraries\react-native\react-native.js:15:5)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
I have a tests folder in the root of my RN project.
My _Setup.js file looks like this:
import mockery from 'mockery'
// inject __DEV__
global.__DEV__ = true
__DEV__ = true
// We enable mockery and leave it on.
mockery.enable()
// Silence mockery's warnings as we'll opt-in to mocks instead
mockery.warnOnUnregistered(false)
My relevant part of package.json looks like
"ava": {
"babel": "inherit",
"files": [
"tests/**/*.js"
],
"require": [
"babel-register",
"babel-polyfill",
"react-native-mock/mock"
]
},
"devDependencies": {
"ava": "^0.15.2",
"babel-polyfill": "^6.9.1",
"babel-register": "^6.9.0",
"enzyme": "^2.4.1",
"mockery": "^1.7.0",
"nyc": "^7.0.0",
"react-addons-test-utils": "^15.2.1",
"react-dom": "^15.2.1",
"react-native-mock": "^0.2.4"
}
Test file:
import test from 'ava'
import smth from '../app/components/LoadingSpinner'
test('returns 1', t => {
t.is(1, smth())
})
.babelrc only has
{
"presets" : ["react-native"]
}
Any hints are appreciated! Thanks :D!

The whole problem was solved once I updated my node to 6.x.x
This aspect is now mentioned in the article :)