I have a Vue-CLI webapp that needs to support IE11. In package.json we have set:
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8",
"ie 11"
]
and this seems to work for the generated app.x.js files: they don't contain any ... operators for instance.
However, the generated chunk-vendors.x.js do contain ... operators, and hence fail on IE11.
Relevant parts of the package.json:
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-service": "^3.3.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"vue-cli-plugin-pug": "^1.0.7",
"vue-template-compiler": "^2.5.21"
},
There are no relevant changes in vue.config.js, so the default behaviour is being used.
What do I need to change to ensure chunk-vendors.x.js is transpiled for IE11?
The answer seems to be, not so much "make sure all dependencies are transpiled" (which apparently can cause a lot of problems), but "make sure the specific dependencies which are causing issues are transpiled".
You can do this by adding a line to vue.config.js:
transpileDependencies: ['/node_modules/myproblematicmodule/']
Related
to explain my problem, I will start by saying that I am currently making a system in Vue with backend API Laravel (irrelevant). I am making them as 2 separate projects. My problem is in the frontend Vue part. I created it using Vue CLI.
Here is my package.json file:
"dependencies": {
"#popperjs/core": "^2.9.3",
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"core-js": "^3.6.5",
"dotenv": "^10.0.0",
"vue": "^3.0.0",
"vue-axios": "^3.2.5",
"vue-plugin-load-script": "^2.0.1",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persistedstate": "^4.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"laravel-mix": "^6.0.31",
"prettier": "^2.2.1",
"resolve-url-loader": "^4.0.0",
"sass": "^1.38.1",
"sass-loader": "^12.1.0",
"webpack": "^5.52.1"
}
As you can see I am using laravel-mix (specifically to use the npm run dev command).
So to use laravel-mix I also needed to install webpack.
Now the problem arises at the point when I try to run npm run serve command to start the app. I get this error:
Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
And I have found 1 solution which was to use webpack 4 instead of 5, which kind of did not work, because when I use webpack 4 I can run "npm run serve" but when I run "npm run dev", it does not mix my assets. No error, only the command is parsed but nothing else.
I really did not find any solution, other than switch webpack version, however the asset mixing part is really cruical in the project.
Update 1:
Here is my webpack.mix.js
let mix = require("laravel-mix");
mix.sass('src/assets/sass/style.scss', 'src/assets/sass')
.styles([
'src/assets/template/css/datatables.min.css',
'src/assets/template/css/rowGroup.dataTables.min.css',
'src/assets/template/css/fullcalendar.min.css',
'src/assets/template/css/select2.min.css',
'src/assets/template/css/bootstrap-colorpicker.min.css',
'src/assets/template/css/bootstrap-datepicker.min.css',
'src/assets/template/css/bootstrap.min.css',
'src/assets/template/css/icons.min.css',
'src/assets/template/css/app.min.css',
'src/assets/sass/style.css'
], 'public/css/style.css')
.scripts([
'src/assets/template/js/jquery.min.js',
'src/assets/template/js/bootstrap.min.js',
'src/assets/template/js/metismenu.min.js',
'src/assets/template/js/simplebar.min.js',
'src/assets/template/js/node-waves.min.js',
'src/assets/template/js/waypoints.min.js',
'src/assets/template/js/jquery-counterup.min.js',
'src/assets/template/js/datatables.min.js',
'src/assets/template/js/dataTables.rowGroup.min.js',
'src/assets/template/js/moment.min.js',
'src/assets/template/js/jquery-ui-dist.min.js',
'src/assets/template/js/fullcalendar.min.js',
'src/assets/template/js/select2.min.js',
'src/assets/template/js/bootstrap-colorpicker.min.js',
'src/assets/template/js/bootstrap-datepicker.min.js',
'src/assets/template/js/apexcharts.min.js',
'src/assets/template/js/app.min.js',
'src/assets/js/script.js'
], 'public/js/script.js');
Could not resolve this problem, so instead I found a replacement for laravel-mix
I used gulp and created my own scripts for parsing sass and mixing css,js and minification.
https://gulpjs.com/
How I came to the problem:
I setup an project like this:
https://www.smashingmagazine.com/2020/07/desktop-apps-electron-vue-javascript/
until it came up to the coding part, there I added custom stuff. Created Components and so on. Everything works fine in serve then I want to build it.
What I expect as outcome:
App working as in serve mode
What I got:
blank page
What I've tried to fix the problem:
change a wide range of path urls like:
win.loadURL(url.format({
pathname: path.join(__dirname, '../public/index.html'),
protocol: 'file:',
slashes: true
})) // with different links passing different index.html files (raw vue build, electron build and public)
win.loadURL('app://./index.html')
win.loadURL(`file://${__dirname}/../public/index.html`) // aswell as the variation without file protocoll
Problem is I dont get errors. If I open developer console at the end of the building process by the menu bar it says, that I have to reload the page that the console is attached to the program, when I press reload, nothing happens.
Any suggestions to go further?
edit: here are my dependecies:
"dependencies": {
"axios": "^0.20.0",
"core-js": "^3.6.5",
"jquery": "^3.5.1",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"electron": "^9.0.0",
"electron-devtools-installer": "^3.1.0",
"electron-icon-builder": "^1.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
"webpack-cli": "^4.0.0"
},
So after many hours of struggling because I couldnt open a working console I found a tool called Debugtron. After a bit of optimization it throwed the error:" createProtocol is undefined ".
The autogenerated background.js missed the line:
import createProtocol from "vue-cli-plugin-electron-builder/lib/createProtocol";
I am upgrading from vuetify version 1.0.5 to 2.3.10. I have removed node-sass and using sass as per the documentation. I am getting this error as below. I have included my package.json file. Any idea where I could be wrong?
./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/vuetify/src/styles/main.sass
Module build failed:
#content($material-light)
^
Invalid CSS after " #content": expected "}", was "($material-light); "
in /Users/weather/ceolaw/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)
# ./node_modules/vuetify/src/styles/main.sass 2:14-102
# ./node_modules/vuetify/es5/presets/default/index.js
package.json file
{
"name": "weather",
"private": true,
"engines": {
"node": "^10.0.0",
"yarn": "^1.21.1"
},
"dependencies": {
"#rails/webpacker": "^3.2.0",
"#riophae/vue-treeselect": "^0.0.38",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"coffee-loader": "^0.9.0",
"coffeescript": "1.12.7",
"es6-promise": "^4.2.2",
"pdfjs-dist": "2.0.550",
"sass": "^1.26.11",
"sass-loader": "^6.0.6",
"scroll-into-view-if-needed": "^2.2.14",
"urijs": "^1.19.1",
"vue": "^2.6.12",
"vue-ads-table-tree": "^2.3.2",
"vue-analytics": "^5.9.0",
"vue-moment": "^4.0.0-0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-spinner": "^1.0.3",
"vue-star-rating": "^1.6.0",
"vuetify": "^2.3.10",
"yarn": "^1.22.5"
},
"devDependencies": {
"caniuse-lite": "^1.0.30000855",
"css-loader": "^0.28.11",
"jshint": "^2.9.5",
"jshint-loader": "^0.8.4",
"vue-loader": "^13.6.2",
"vue-template-compiler": "^2.6.12",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"client": "./bin/webpack-dev-server",
"server": "bundle exec rails s",
"start": "./bin/webpack-dev-server"
}
}
Error update
yarn remove node-sass
yarn remove v1.21.1
[1/2] 🗑 Removing module node-sass...
error This module isn't specified in a package.json file.
It seems one of your other dependencies has a dependency on node-sass. It's probably #rails/webpacker as you are using very old version 3.2.0 (current is 5.2.1) and they switched to sass (dart-sass) recently
Result is you have both packages installed - sass and node-sass
From the docs of sass-loader (which is used by Webpack when building Vue app) it seems that when both packages are installed, they prefer sass over node-sass but at the same time warn not to install both. Seems strange to me. Also the error suggests that sass-loader is in your case preferring node-sass.
You have 2 options:
upgrade #rails/webpacker to newer version which is using sass
configure sass-loader to use sass as documented here
Hoping this is a simple issue but I couldn't find anything on a Google search. Running on emulator (with any build type) works perfectly. Connecting a device however with any build type (debug or release) the following issue occurs at runtime (the app can build successfully):
My package.json has the following deps:
"dependencies": {
"#redux-offline/redux-offline": "2.4.0",
"babel-plugin-transform-remove-console": "6.9.4",
"buffer": "5.2.0",
"crypto-js": "3.1.9-1",
"lodash": "4.17.10",
"react": "16.3.1",
"react-native": "0.54.4",
"react-native-fast-image": "4.0.14",
"react-native-firebase": "4.3.8",
"react-native-fs": "2.10.14",
"react-native-maps": "0.21.0",
"react-native-maps-super-cluster": "1.4.1",
"react-native-navigation": "1.1.471",
"react-native-svg": "6.4.1",
"react-native-tab-view": "1.0.2",
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"whatwg-url": "6.5.0"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "23.0.1",
"babel-preset-flow": "6.23.0",
"babel-preset-react-native": "4.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-flowtype": "2.49.3",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"flow-bin": "0.65.0",
"husky": "0.14.3",
"jest": "23.1.0",
"lint-staged": "7.1.3",
"prettier": "1.13.4",
"react-native-schemes-manager": "1.0.4",
"react-test-renderer": "16.3.0-alpha.1"
},
My .babelrc has the following:
{
"presets": ["react-native", "flow"],
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
I am using react-native-schemes-manager to build a flavour of base app. The config for this is in the package.json like so:
"xcodeSchemes": {
"Debug": [
"FakeAppNameDebug"
],
"Release": [
"FakeAppNameRelease"
]
}
None of this explains how it works perfectly fine on a simulator but wants to throw tantrums when running on a device though. Any ideas?
I had the same problem, that's what I've found out:
JS in RN is executed in two different environments (V8 or JavaScriptCore), depending on how you run it. E.g. in my case the app worked properly on iOS simulator with and without remote js debugger; on Android simulator worked only with remote debugger turned on and threw the error without it; on a real Android device threw the error. Taking into consideration that JSC comes in two different versions (supplied by iOS or packaged in RN app for Android), I concluded that the iOS JSC and V8 do understand target.new, whilst the Android-packaged JSC doesn't (btw neither does Babel).
That's the reason why new.target fails, depending on where you run it.
Now where this bug comes from: I used this method to find the culrpit and located it in the whatwg-url package, in node_modules/whatwg-url/lib/URL.js:
return iface.setup(Object.create(new.target.prototype), args);
tl;dr; There are several possible solutions:
Get rid of whatwg-url. This may be just a temporary solution, because there are more things that the original JSC doesn't support (e.g. proxies or symbols that can't be simply transpiled or polyfilled).
Replace JSC with an alternative. The 2 options I've found are: jsc-android-buildscripts (an RN go-to solution, so probably a better option) and LiquidCore. This can be a good investment since the original JSC hasn't been developed since 2016 (:sick:).
Wait for RN v0.59, which will replace the JSC.
Bonus: You can try changing the new.target occurrences to new . target (which apparently is supported in all the engines) just to check if newTarget is the only problem you have. In my case, it appeared that it's also proxies that aren't supported (I'm using mobx v5), so just getting rid of whatwg-url wouldn't solve my problem.
I'm just simply trying to start metro bundler to serve the app. Here's the error:
TypeError: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "StringLiteral"
at Object.validate (/Users/tyler/Code/.../node_modules/#babel/types/lib/definitions/utils.js:128:13)
at Object.validate (/Users/tyler/Code/.../node_modules/#babel/types/lib/validators/validate.js:17:9)
at NodePath._replaceWith (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/replacement.js:194:9)
at NodePath.replaceWith (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/replacement.js:178:8)
at PluginPass.MemberExpression (/Users/tyler/Code/.../node_modules/babel-plugin-transform-inline-environment-variables/lib/index.js:19:18)
at newFn (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/context.js:118:16)
which means something like Platform.OS = "ios" is transformed into "ios" = "ios": like so <- That PR also addresses the TypeError being thrown for the process.env which seems to be the case for me. My stack trace references ...babel-plugin-transform-inline-environment-variables/lib/index.js:19:18 which deals exclusively with setting process.env. There are only two places in my code using a var from process.env and neither are used on the left side of an assignment.
PR 45 for the metro bundler was merged way back in 2017 though. And I'm using the latest version btw, this is occurring when trying to start up the bundler with the script "NODE_ENV=development npm start -- --reset-cache". Note that I am using the reset cache flag as mentiond here
A coworker suggested the error may be cause by a react-native plugin, but I haven't uncovered it yet if that is the case. We did just migrate this app to Babel 7, fyi. I'm hitting a wall now on ideas and the google trail is growing stale. What else could be the cause of this error?
Here are the dependencies from my package.json in case it helps:
}
...
"dependencies": {
"#babel/runtime": "^7.0.0",
"lodash.capitalize": "^4.2.1",
"lodash.debounce": "^4.0.8",
"lodash.find": "^4.6.0",
"phoenix": "^1.3.4",
"prettier": "^1.14.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-native": "0.57.0",
"react-native-firebase": "^4.3.8",
"react-native-keep-awake": "^3.1.0",
"react-native-linear-gradient": "^2.4.2",
"react-native-router-flux": "^4.0.1",
"react-native-swiper": "^1.5.13",
"react-native-tts": "^2.0.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"spokestack-react-native": "0.0.2"
},
"devDependencies": {
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
"imagemin": "^6.0.0",
"imagemin-jpegtran": "^5.0.2",
"imagemin-optipng": "^5.2.1",
"imagemin-svgo": "^7.0.0",
"jest": "^23.6.0",
"metro-react-native-babel-preset": "^0.45.2",
"pre-commit": "^1.2.2",
"precise-commits": "^1.0.2",
"react-test-renderer": "^16.4.2",
"redux-mock-store": "^1.5.3"
},
...
}
...and additionally, the babel.config.js as per babel 7
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'#babel/plugin-transform-runtime',
'#babel/plugin-proposal-object-rest-spread',
'transform-inline-environment-variables'
]
}
UPDATE: I used grep within the react-* packages to find additional lines where process.env were used as a lefthand assignment. Only found a few, but couldn't resolve the issue.
The error you see in the log is related to babel-plugin-transform-inline-environment-variables. If you exclude it from your configuration file, the build should pass.
I'm facing the same issue and haven't found a good solution so far, so try to workaround a way how you pass your environment variables.