I need to update Laravel mix to use Babel 7.
I update my dependencies to use Laravel Mix 4.0.7 that should support Babel 7.
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.2.1",
"#babel/preset-env": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"axios": "^0.15.3",
"babel-loader": "^7.1.5",
"bootstrap": "4.1.3",
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^4.0.7",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lodash": "^4.17.10",
"react-color": "^2.14.1",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"styled-components": "^4.0.3",
"vue": "^2.5.13"
}
And in my .babelrc file i have:
{
"loader": "babel-loader",
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-react-jsx"
]
}
And in my webpack.mix.js i have:
mix.react("resources/assets/app.js", "public/js");
The problem is when i run npm run watch i get the following error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-core'
Apparently, Laravel Mix is trying to use babel-core instead of #babel/core.
Any ideas on how to solve this?
I believe you need to upgrade babel-loader to 8.x.
If you read the docs at https://www.npmjs.com/package/babel-loader
This README is for babel-loader v8 + Babel v7
Check the 7.x branch for docs with Babel v6
So, babel-loader 8.x work with #babel-core 7. babel-loader 7.x works with babel-core 6.x
Related
I am trying to deploy a git repo on Netlify and I am using parcel in the project.
I am getting the error in the photo about conflicting local requirement.
This is how my dependencies and devDependencies look like:
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"parcel": "^2.0.0-rc.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.0.0-beta.3.1"
}
}
and I am getting the error in the photo
Any tip on how to resolve this ?? thanks
Ok solved,
just had to remove parcel as a dependency!
I have an old setup for a website using Gulp to compile the SASS files with gulp-sass. Everything has been working without any issues until I updated my Mac to Catalina.
Now when I run the gulp command to compile the SASS I get the following error:-
/.rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/fileutils.rb: Read-only file system # dir_s_mkdir - /c
Run with --trace to see the full backtrace
events.js:174
throw er; // Unhandled 'error' event
^
Error: Compass failed
I have searched many forums and tried solutions such as updating Ruby, installing Gems locally etc and nothing has solved the issue.
Any direction would be great.
"devDependencies": {
"#babel/cli": "7.4.4",
"#babel/core": "7.4.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "7.4.5",
"#babel/register": "7.4.4",
"autoprefixer": "^6.3.6",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"babel-minify-webpack-plugin": "^0.3.1",
"bower": "^1.7.9",
"bricks.js": "^1.0.1",
"browser-sync": "^2.26.5",
"compression-webpack-plugin": "^3.0.1",
"concurrently": "^4.1.0",
"cssnano": "^3.4.0",
"eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "^2.50.1",
"eslint-plugin-jest": "^23.2.0",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-compass": "^2.1.0",
"gulp-concat-util": "^0.5.4",
"gulp-data": "^1.2.1",
"gulp-eslint": "^5.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^6.0.1",
"gulp-print": "^5.0.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.2.1",
"gulp-sass-lint": "^1.4.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-twig": "^0.5.0",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"jest": "^24.5.0",
"jest-puppeteer": "4.2.0",
"lodash": "^4.17.15",
"node-sass": "^4.13.0",
"path": "^0.12.7",
"postcss-assets": "^4.0.1",
"postcss-cssnext": "^2.4.0",
"puppeteer": "^1.18.0",
"stylelint": "^9.5.0",
"stylelint-order": "^1.0.0",
"uglifyjs-webpack-plugin": "^2.1.3",
"webpack": "^4.32.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.2",
"webpack-concat-plugin": "^3.0.0"
},
"dependencies": {
"babel-preset-jest": "^24.6.0",
"chart.js": "^2.8.0",
"jquery": "3.4.1",
"natives": "^1.1.6"
},
Thank you to everyone. My issue is the SASS is written in Ruby SASS. node-sass is a wrapper for Lib SASS. Which will not work for this code base.
I am closing the question as I believe I have found the answer.
MacOS Catalina made two big changes with Ruby.
1 -The system Ruby version was upgraded from 2.3 to 2.6, and
2 - The system Ruby gems directory is no longer writable — it is not a place for installing user gems.
This is causing the issues I believe. The suggestion is to re-install Ruby with Homebrew. I have located some information on how to do this here https://gorails.com/setup/osx/10.15-catalina
Try without Ruby and explicitly specify node-sass.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('test-gulp-sass', done => {
sass();
done();
})
$ npm install --save-dev gulp gulp-sass node-sass
$ npx gulp test-gulp-sass
I'm building this Vue app with Visual Studio and regardless of the build mode (debug/release) I still get this message below in the console.
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Is there a way to know if I'm really in release mode or if Vue is just throwing me that message?
I know that usually it means the JS files have been minified, is that the case with a Vue app?
I'm not sure if this helps but here is my packages.json file
{
"name": "aspnetcore-vuejs",
"description": "ASP.NET Core & VueJS Starter project",
"author": "Mark Pieszak",
"scripts": {
"dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"install": "webpack --config webpack.config.vendor.js"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/vue-fontawesome": "^0.1.1",
"axios": "^0.15.3",
"bootstrap-vue": "^2.0.0-rc.11",
"core-js": "^2.4.1",
"dayjs": "^1.7.5",
"font-awesome": "^4.6.3",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.1.8",
"vue-infinite-loading": "^2.3.3",
"vue-masked-input": "^0.5.2",
"vue-router": "^2.1.1",
"vue-select": "^2.5.0",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuetify": "^1.2.3",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^4.1.3",
"cross-env": "^3.1.3",
"css-loader": "^0.26.1",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"regenerator-runtime": "^0.12.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.2",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
}
As the Vue.js deployment guide you posted suggests, please check your webpack.config.js and be sure to use the right mode targetting production environment when you deploy the app.
In Webpack 4+, you can do:
module.exports = {
mode: 'production'
}
But in Webpack 3 and earlier, you'll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
When you are ready, you should simply need to run npm run build to start bundling your modules.
Related and useful readings:
Writing separate Webpack configurations for each environment.
Managing development and production builds with Webpack.
Introduction to NPM Scripts.
I have been trying to stop heroku from pruning my dev dependencies. Here is my config:
My build script is: "build": "NPM_CONFIG_PRODUCTION=false webpack -mode production"
And I have added "heroku-postbuild": "npm run build"
My Dependencies:
"dependencies": {
"express": "^4.16.3",
"react": "^16.5.2",
"react-dom": "^16.5.2"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.0",
"babel-loader": "^8.0.0",
"clean-webpack-plugin": "^0.1.19",
"concurrently": "^4.0.0",
"css-loader": "^1.0.0",
"eslint": "^5.0.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"nodemon": "^1.17.3",
"style-loader": "^0.23.0",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.3"
}
I would appreciate any help with the config as I don't want to add my dev dependencies to my dependencies.
Set Heroku env var NPM_CONFIG_PRODUCTION to false with
heroku config:set NPM_CONFIG_PRODUCTION=false
instead of trying to set it in your npm script. See docs.
If you are trying to red the error during production caused by devDependencies, just do this in node.js or similar in the language you are using.
if (process.env.NODE_ENV !== "production") {
require(<devDependency>)
}
When I try to run my React Native app on the iOS simulator, I'm presented with a red screen with the following error:
Ambiguous resolution: module
'/Users/my-user/Documents/my-RN-app/app/index.js' tries to require
'react-native-vector-icons', but there are several files providing
this module. You can delete or fix them:
/Users/my-user/Documents/my-RN-app/ios/build/Build/Products/Debug-iphonesimulator/MyApp.app/my-RN-app/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
/Users/my-user/Documents/my-RN-app/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
However, both of those above files (the package.json files) are missing. I had actually gotten this error before, so I decided to delete the package.json file in the first directory location mentioned above (under ios/build/.. etc.) and refreshed the app and it loaded just fine. Now, after trying to start up my app again in the iOS simulator, I am back to the same error, but I cannot delete the package.json file because it doesn't even exist now in either location.
I've tried to just comment out the import of the react-native-vector-icons lib in my app/index.js file and restarting the sim, but the error still appears.
So finally, I've tried this:
sudo rm -rf node_modules (I get "permission denied" if I don't use sudo although it appears I have full read/write permission on all the files/folders in this project)
sudo rm -rf ios/build
npm install
cd ios && pod install
react-native link
And then back into Xcdoe: Product > Clean, after which I ran the simulator again. Still the same error.
As requested, here is my package.json file:
{
"name": "myApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"run-ios": "node_modules/.bin/react-native run-ios",
},
"dependencies": {
"art": "^0.10.1",
"auto-bind": "^1.1.0",
"axios": "^0.16.1",
"eslint-plugin-react-native": "^2.3.1",
"jwt-decode": "^2.2.0",
"moment": "^2.19.1",
"native-base": "^2.3.1",
"prop-types": "^15.5.8",
"pubnub": "^4.18.0",
"react": "^16.0.0",
"react-native": "^0.49.3",
"react-native-actionsheet": "^2.3.0",
"react-native-device-info": "^0.11.0",
"react-native-fabric": "^0.5.1",
"react-native-fingerprint-scanner": "^2.2.1",
"react-native-flip-card": "^3.5.2",
"react-native-google-analytics-bridge": "^5.3.3",
"react-native-haptic": "^1.0.5",
"react-native-image-base64": "^0.1.3",
"react-native-image-picker": "^0.26.7",
"react-native-image-resizer": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "^0.4.3",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-keychain": "^1.2.1",
"react-native-maps": "^0.17.1",
"react-native-modal-dropdown": "^0.5.0",
"react-native-mplayer": "^1.0.1",
"react-native-notifications-badge-extensions": "^1.0.5",
"react-native-permissions": "^0.2.7",
"react-native-pie": "^0.4.0",
"react-native-router-flux": "^4.0.0-beta.26",
"react-native-snap-carousel": "^3.2.3",
"react-native-tag-input": "0.0.18",
"react-native-tooltip": "^5.2.0",
"react-native-uuid-generator": "^3.0.2",
"react-native-vector-icons": "^4.3.0",
"react-native-version-number": "^0.1.3",
"react-native-voice": "^0.2.5",
"react-navigation": "^1.2.0",
"sprintf-js": "^1.0.3",
"validator": "^9.2.0"
},
"devDependencies": {
"babel-jest": "18.0.0",
"babel-preset-react-native": "^4.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^3.14.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^7.5.1",
"jest": "18.1.0",
"jest-serializer-enzyme": "^1.0.0",
"jsdom": "11.6.2",
"jsdom-global": "3.0.2",
"metro-bundler": "^0.20.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.2.0",
"react-native-mock": "^0.3.1",
"react-test-renderer": "16.0.0-alpha.12",
"sinon": "^4.1.2"
},
"resolutions": {
"moment": "2.19.1"
}
}
I had to manually link the React pod to node_modules:
pod 'React', :path => '../node_modules/react-native'
Then clean and build again