Babel Problem : Cannot find module

Frontend Web Development: The Big Nerd Ranch Guide Chapter 17: Using ES6 with Babel
1

Hi,
I’m at page 329, everything works well but now I’ve got a problem.
I’ve tried this command:
babel ./app/scripts/src/app.js -o ./app/scripts/dist/main.js

but it doesn’t work, I’ve got this error on my console:

Error: Cannot find module ‘…/modules/web.dom.iterable’ (While processing preset: “/Users/olivier/Google Drive/Developer/BigNerdRanch/front-end-dev-book/chattrbox/node_modules/babel-preset-es2015/lib/index.js”)
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/olivier/Google Drive/Developer/BigNerdRanch/front-end-dev-book/chattrbox/node_modules/core-js/library/fn/get-iterator.js:1:63)
at Module._compile (module.js:570:32)
at Object.Module._extensions…js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)

Any help would be very appreciated
Thanks!
Best
Olivier

2

Do you try to run the command like this:
babel app/scripts/src/app.js -o app/scripts/dist/main.js

If doesn’t work, try installing the tools again:
npm install -g babel-cli
npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015
add
{ "presets": [ "es2015" ], "plugins": [] }
and finally:
npm install --save-dev browserify babelify watchify
remember to keep running your server.

3

thank you incubusj.
I’ve tried all you mentioned above, and I still have the same issue.
I’ve even reinstalled node.js and npm.

4

It works finally!
thank you again incubusj :slight_smile:
I’ve downloaded the book solution for chattrbox and reinstalled everything from scratch.
It works finally!
Thank you for your help
Best
Olivier

5

incubusj,
Now I’ve got another problem :frowning:
At page 332, when I run this script:
npm run build

I’ve got this error:
Failed at the chattrbox@1.0.0 build script ‘browserify -d app/scripts/src/main.js -o app/scripts/dist/main.js’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the chattrbox package,
npm ERR! not with npm itself.

I’ve got the latest version of node.js and npm…
So the problem should come from package.json…

Here is my package.json file:

{
“name”: “chattrbox”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“start”: “node index.js”,
“dev”: “nodemon index.js”,
“build”: “browserify -d app/scripts/src/main.js -o app/scripts/dist/main.js”,
“watch”: “watchify -v -d app/scripts/src/main.js -o app/scripts/dist/main.js”
},
“browserify”: {
“transform”: [
[
“babelify”,
{
“sourceMap”: true
}
]
]
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“babel-core”: “^6.22.1”,
“babel-preset-es2015”: “^6.22.0”,
“babelify”: “^7.3.0”,
“browserify”: “^13.3.0”,
“crypto-js”: “^3.1.8”,
“jquery”: “^3.1.1”,
“moment”: “^2.17.1”,
“nodemon”: “^1.11.0”,
“watchify”: “^3.9.0”
},
“dependencies”: {
“ws”: “^1.1.1”
}
}

If you have an idea… Thanks again incubusj

6

Hi Olive
i check your code and this line:
"browserify": {
   "transform": [
      ["babelify", {
         "sourceMap": true
       }]
   ]
},

should be:
"browserify": {
 "transform": [
   ["babelify", {
      "presets": ["es2015"],
       "sourceMap": true
    }]
  ]
},

you should add “presets”: [“es2015”],

About the error, it seems to general. Honestly I don’t know what it is the problem.
one thing i noticed in your scripts is that you have other dependencies like “moment”: “^2.17.1”,
(maybe they are needed for another chapter, but I’m still in ch 17).

7

Hi @OliveBaptiste + @incubusj! Just a headsup, the original "presets": ["es2015"] line in package.json was an errata, since Babelify will automatically read from your .babelrc.

So there’s probably something else going on, @incubusj when you run npm run build do you get any other output? The lines you included are generic and probably mean the error happened within browserify -d app/scripts/src/main.js -o app/scripts/dist/main.js itself.

8

Hi @nybblr i run npm run buuild and all went well:

9

Did you ever solve your problem? I have the same and cannot be able to solve it.

10

I also have an issue with npm run build. Appears to be a version issue. What is it supposed to be? Did I miss errata?
Here are the error details:
npm run build

chattrbox@1.0.0 build K:\rmeij\dev\Projects\front-end-dev-book\chattrbox
browserify -d app/scripts/src/main.js -o app/scripts/dist/main.js

K:\rmeij\dev\Projects\front-end-dev-book\chattrbox\node_modules\babelify\index.js:16
throw err;
^

Error: Cannot find module ‘@babel/core’
babelify@10 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babelify@8’.
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 (internal/module.js:11:18)
at Object. (K:\rmeij\dev\Projects\front-end-dev-book\chattrbox\node_modules\babelify\index.js:9:11)
at Module._compile (module.js:653: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)

11

I have exactly the same error. I have copied the index.js file from the resources to ensure that I did not miss some code. It was identical to my code. Do I need to update Babel or some other piece of code?