Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Babel Error: Cannot find module 'babel-runtime/core-js/json/stringify'

I was trying out Vue, first with Webpack, it worked smoothly, so now I'm trying to integrate it with Brunch since it is what Phoenix uses but I get this mysterious error:

Cannot find module 'babel-runtime/core-js/json/stringify'

I tried to copy all babel related dependencies from my original Webpack project's package.json but I still get the same error and I have no idea why. I tried using yarn, tried removing node_modules and then reinstalling, tried different versions of babel-runtime to no avail. My current package.json looks like this:

"dependencies": {
"node-sass": "^4.5.2",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"pug": "^2.0.0-rc.1",
"sass-brunch": "^2.10.4",
"vue": "^2.3.3",
"vue-brunch": "^2.0.1",
"vue-resource": "^1.3.1",
"vue-router": "^2.5.3"
},
"devDependencies": {
  "css-loader": "^0.28.1",
  "webpack": "^2.5.1",
  "babel-brunch": "~6.0.0",
  "brunch": "2.7.4",
  "clean-css-brunch": "~2.0.0",
  "css-brunch": "~2.0.0",
  "javascript-brunch": "~2.0.0",
  "uglify-js-brunch": "~2.0.1",
  "babel-core": "^6.22.1",
  "babel-loader": "^6.2.10",
  "babel-plugin-istanbul": "^4.1.1",
  "babel-plugin-transform-runtime": "^6.22.0",
  "babel-preset-env": "^1.3.2",
  "babel-preset-stage-2": "^6.22.0",
  "babel-register": "^6.22.0",
  "vue-loader": "^11.3.4",
  "vue-style-loader": "^2.0.5",
  "vue-template-compiler": "^2.2.6"
},
"engines": {
  "node": ">= 4.0.0",
  "npm": ">= 3.0.0"
},
"babel": {
  "plugins": ["transform-runtime"]
}
like image 569
Erik Avatar asked Apr 15 '26 04:04

Erik


1 Answers

From what I've gathered this has to do with how brunch loads it modules. Your entry file needs to 'bootstrap' all the other modules it will use.

Try adding this line to your entry file

import 'babel-runtime/core-js/json/stringify';

You will likely also need to require other modules you'll need in your app from the main file as well, you don't need to use them in the main file but in order to require them in a component or another file that isn't your main one you need to do this 'bootstrapping.'

like image 126
Derrik Milligan Avatar answered Apr 17 '26 18:04

Derrik Milligan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!