webpack and babel configuration for normal javascript project is failing - javascript

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

Related

remark-cli "Cannot use import statement outside a module"

I'm creating a documentation project which I npm init'd. This is the relevant part of my package.json
"scripts": {
"lint": "remark --quiet --frail ."
},
"type": "module",
"dependencies": {
"remark-cli": "^10.0.0",
"remark-preset-lint-markdown-style-guide": "^5.0.0"
},
I would now like to lint the Markdown files with remark-cli:
`remark --quiet --frail .`
This is the error I'm getting:
<...>/node_modules/remark-cli/cli.js:2
import {createRequire} from 'node:module'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:895:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at internal/main/run_main_module.js:17:11
I thought adding "type": "module" to package.json would solve this but no luck.
What am I doing wrong here?

Error: (node:17060) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension

I just started learning JavaScript by using Atom in order to create an online chart. Hence, I am quite unfamiliar with NPM, package.json and all that sort of things.
I want to import two modules by using the following code:
import * as am4core from "#amcharts/amcharts4/core";
import * as am4charts from "#amcharts/amcharts4/charts";
Which gives the following error message:
(node:17060) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
C:\Users\PF1VMKH9_ADM\Documents\herverkaveling\test:4
import * as am4core from "#amcharts/amcharts4/core";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Object.newLoader [as .js] (C:\Users\PF1VMKH9_ADM\.atom\packages\script\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at Object.<anonymous> (C:\Users\PF1VMKH9_ADM\.atom\packages\script\node_modules\#babel\node\lib\_babel-node.js:176:21)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
[Finished in 0.522s]
I added "type": "module" to the package.json file but it did not solve the issue:
{
"name": "packages",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type":"module",
"dependencies": {
"typescript": "^4.4.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
What am I doing wrong?

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.

Unexpected token in jsdom when used with babel and npx

I want to do some tests on canvas purely in node.js.
This is my package.json
{
"name": "test",
"description": "Test",
"version": "0.1.0",
"author": "anthony#work",
"dependencies": {
"canvas": "^1.6.7",
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"jsdom": "^11.3.0"
}
}
This is my .babelrc
{
"presets": ["env", "stage-0"]
}
This is my test javascript (a.js)
const { jsdom } = require('jsdom');
// main
jsdom();
console.log('done')
When I run the script, however,
npx babel a.js | nodejs -- -
I get this error:
/work/node_modules/jsdom/lib/api.js:10
const { URL } = require("whatwg-url");
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at [stdin]:3:16
at Object.exports.runInThisContext (vm.js:54:17)
at Object.<anonymous> ([stdin]-wrapper:6:22)
What causes this error? How can I fix this error?
Version information:
Node.js: v4.2.6
OS: Ubuntu 16.04

You are running an incompatible node version with jsdom.
jsdom#10 requires nodejs v6. So either upgrade Node or downgrade jsdom.
Found info about that here: https://github.com/tmpvar/jsdom#jsdom

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 :)

Categories