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"]
}
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.'