I am using webpack as module bundler and babel for transpiling.
My current npm version is 3.10.9 and node version is v6.9.2.
Package.json
"devDependencies": {
"axios": "^0.17.0",
"babel-eslint": "^8.0.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-preset-mobx": "^1.0.2",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.26.0",
"babel-core": "^6.9.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-1": "^6.5.0",
"clean-webpack-plugin": "^0.1.17",
"compression": "^1.6.1",
"cors": "^2.8.4",
"cross-env": "^5.0.5",
"css-loader": "^0.23.1",
"csslint": "^1.0.5",
"csslint-loader": "^1.0.0",
"eslint": "^4.10.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.4.0",
"express": "^4.9.8",
"express-https-redirect": "^1.0.0",
"express-manifest": "^0.1.1",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^2.30.1",
"http2": "^3.3.7",
"https": "^1.0.0",
"image-webpack-loader": "^3.4.2",
"jasmine-core": "^2.8.0",
"json-loader": "^0.5.4",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.1",
"karma-webpack": "^2.0.9",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"moment": "^2.19.2",
"node-sass": "^4.5.3",
"postcss": "^6.0.13",
"postcss-css-variables": "^0.8.0",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.6",
"postcss-mixins": "^6.1.1",
"postcss-nested": "^2.1.2",
"postcss-start-to-end": "^1.0.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-doc-generator": "^1.2.5",
"react-docgen-plugin": "^0.1.1",
"react-dom": "^16.2.0",
"react-lazy-load": "^3.0.13",
"react-redux": "^5.0.6",
"react-responsive-carousel": "^3.1.28",
"redux": "^3.7.2",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.0.3",
"rollup-plugin-postcss": "^1.3.3",
"rollup-plugin-replace": "^2.0.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"sw-precache-webpack-plugin": "^0.11.4",
"url-loader": "^0.6.2",
"webfonts-loader": "^4.0.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.1",
"webpack-node-externals": "^1.6.0",
"workbox-webpack-plugin": "^2.1.2",
"wrapper-webpack-plugin": "^1.0.0"
},
"dependencies": {
"expres": "0.0.5",
"express": "^4.14.0",
"express-minify-html": "^0.11.5",
"html-minifier": "^3.5.6",
"jade": "^1.11.0",
"mobx": "^3.0.0",
"mobx-react": "^4.1.0",
"pa11y-ci": "^1.3.1",
"redux-promise": "^0.5.3",
"stylelint-webpack-plugin": "^0.10.2"
},
"babel": {
"plugins": [
"transform-es2015-modules-commonjs"
]
},
when I compile I get below issue.
Using default export (`import mobx from 'mobx'`) is deprecated and wont work in mobx#4.0.0
Use `import * as mobx from 'mobx'` instead
D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41
throw new Constructor(this._buildMessage(msg));
^
ReferenceError: [BABEL] D:\mgm\dmp\fe-react\webpack.config.babel.js: Unknown option: base.Reaction. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
at Logger.error (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
at OptionManager.init (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at Object.transformFileSync (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\api\node.js:152:10)
at compile (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:118:20)
at loader (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:154:7)
Please help.
First things first, remove mobx presets from your .babelrc.
{
"presets": ["mobx"]
}
then npm i --save-dev babel-plugin-transform-decorators-legacy and add below .babelrc configration.
{
"presets": ["react", "env", "stage-2"],
"plugins": [
"transform-decorators-legacy", // must on the top of plugins array.
... ...
]
}
finally, you must delete babel-preset-mobx that 0 start on the GitHub, I think it's unstable.
Related
Currently, I'm working on a vuetify v1.5 project. One of my dependency package (d3-flextree) does not work in the case of the 'babelHelpers is not defined' error.
What I've found says: "Use transform-runtime instead of the external-helpers plugin".
My .babelrc file is:
{
"presets": ["es2015", "stage-2"],
"plugins": [
"transform-runtime",
"transform-async-to-generator"
],
"comments": false
}
but .babelrc in ./node_module/d3-flextree is:
{
"presets": [
[
"es2015",
{ "modules": false }
]
],
"plugins": ["external-helpers"]
}
Should I override ./node_module/d3-flextree/.babelrc? if yes, how?
Is there any webpack trick?
My package.json
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.5.3",
"d3": "^5.7.0",
"d3-flextree": "^2.1.1",
"d3-flextree-v4": "^1.0.1",
"font-awesome": "^4.6.3",
"hchs-vue-charts": "^1.2.8",
"html-loader": "^1.1.0",
"html-webpack-externals-plugin": "^3.8.0",
"html2canvas": "^1.0.0-rc.5",
"ts-loader": "^7.0.5",
"vue": "^2.5.11",
"vue-color": "^2.7.1",
"vue-grid-layout": "^2.3.8",
"vue-i18n": "^8.22.1",
"vue-input-autowidth": "^1.0.10",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.6.11",
"vue-template-compiler": "^2.5.11",
"vue2-editor": "^2.10.2",
"vuedraggable": "^2.23.2",
"vuetify": "^1.5.24",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^3.4.1",
"cross-env": "^3.1.3",
"css-loader": "^0.26.4",
"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.14.1",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"uglifyjs-webpack-plugin": "^2.1.3",
"url-loader": "^0.5.7",
"vue-loader": "^13.6.0",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
I've found a trick.
There is a CDN file for 'd3-flextree'. Just copy it into a file in the project and then replace the original npm package.
- import * as d3flex from "d3-flextree"
+ import * as d3flex from "../statics/scripts/d3-flextree.min"
When running my gulp task, I get the following error:
SyntaxError in plugin "gulp-babel"
Message:
/Users/******/Repos/******/src/scripts/config/index.js: Unexpected export specifier type
> 1 | export * as constants from './constants';
^^^^^^^^^^^^^^
I'm not sure why this is as I am running the required plugins to allow ES6 imports/exports, or so I thought...
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"add-module-exports",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from"
]
}
package.json - I've included the full list, most of it will probably be irrelevant but just in case there are any known package conflicts.
"dependencies": {
"#babel/polyfill": "^7.8.3",
"classnames": "^2.2.5",
"concurrent-transform": "^1.0.0",
"deep-freeze": "0.0.1",
"eslint": "^3.17.1",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-react": "^6.10.0",
"git-rev": "^0.2.1",
"gulp-awspublish": "^4.0.0",
"gulp-sftp": "^0.1.5",
"moment": "^2.18.1",
"moment-timezone": "^0.5.26",
"path": "^0.12.7",
"qs": "^6.4.0",
"react": "^16.8.4",
"react-addons-css-transition-group": "^15.0.2",
"react-dom": "^16.8.4",
"react-fastclick": "^3.0.2",
"react-redux": "^4.4.5",
"react-router": "^3.2.5",
"react-router-redux": "^4.0.8",
"react-string-replace": "^0.4.0",
"react-transition": "^1.0.3",
"react-transition-group": "^2.7.0",
"redux": "^3.5.2",
"redux-thunk": "^2.3.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-transform-modules-commonjs": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.8.3",
"axios": "^0.15.3",
"babel-core": "^6.26.3",
"babel-eslint": "^6.0.4",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-polyfill": "^6.26.0",
"babelify": "^9.0.0",
"chai": "^3.5.0",
"enzyme": "^2.7.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-clean": "^0.3.2",
"gulp-color": "0.0.1",
"gulp-connect": "^5.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-htmlmin": "^3.0.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-mocha": "^4.3.0",
"gulp-param": "^0.6.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-sourcemaps": "^2.4.1",
"gulp-ssh": "^0.6.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^2.1.0",
"gulp-watch": "^4.3.11",
"gulp-webserver": "^0.9.1",
"jest": "^25.1.0",
"jsdom": "^9.12.0",
"lint-staged": "^3.4.0",
"mocha": "^3.2.0",
"mocha-jsdom": "^1.1.0",
"mocha-junit-reporter": "^1.13.0",
"mock-require": "^2.0.1",
"pre-commit": "^1.2.2",
"prop-types": "^15.5.10",
"react-addons-create-fragment": "^15.6.0",
"react-addons-test-utils": "^15.6.0",
"react-tools": "^0.13.3",
"redux-mock-store": "^1.2.3",
"run-sequence": "^1.2.2"
}
Any help appreciated - I'm really at a loss for this one.
(Using node v9.11.2)
From this thread
The problem is that we added export * as ns from "foo" support by
default to #babel/parser (in #10521) but not to #babel/preset-env.
As a workaround, you can enable
#babel/plugin-proposal-export-namespace-from in your config.
So add #babel/plugin-proposal-export-namespace-from to your .babelrc and dev dependencies and you should be OK!
It looks like eventually this will be built into the preset-env so you won't have to use a plugin.
I am trying to use the slick carousel in my vue project. I am following this steps:
https://www.npmjs.com/package/vue-slick
But i get always this message:
npm WARN slick-carousel#1.8.1 requires a peer of jquery#>=1.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-slick#1.1.13 requires a peer of jquery#* but none is installed. You must install peer dependencies yourself.
And this is my package.json
"dependencies": {
"axios": "^0.17.1",
"element-ui": "^2.4.3",
"jquery": "^3.3.1",
"jwt-decode": "^2.2.0",
"pug-runtime": "^2.0.3",
"reset-css": "^2.2.1",
"sass-resources-loader": "^1.3.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-slick": "^1.1.13",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"coffee-loader": "^0.9.0",
"coffee-script": "~1.6.3",
"coffeescript": "^2.1.1",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"faker": "^4.1.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"lodash": "^4.17.4",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"pug-module": "^1.1.4",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.6",
"sass-variable-loader": "^0.1.2",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^0.19.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"peerDependencies": {
"jquery": "^3.3.1"
}
Also I have removed the node_modules folder and then I have installed but I get the same error.
Try the following command to install the required dependecies:
npm install jquery#>=1.8.0 --save-dev
I am trying to add Leaflet library source into my project, but I'm getting an error on statements.
window.L = exports;
Vue Import Statement, copy of leaflet folder is in my project src folder
import L from '#/leaflet/src/Leaflet'
The screenshot of the problem.
I've updated the vue, babel and webpack, but still the problem is not resolved, here is my configuration.
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^3.3.1",
"leaflet": "^1.3.1",
"vue": "^2.5.2",
"vue-resource": "^1.3.5",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-umd": "^6.24.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
}
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
Thank you
When defining an array in vuex store as follows:
const state = {
tags: [1, 2, 3]
}
Both Internet Explorer 11 and Micrsoft Edge give back a blank page and the following error message:
Error: “Unknown name” error in vue.esm.js
No problems with Chrome, Firefox, Safari, Opera.
When removing the values, it works:
const state = {
tags: []
}
I am using babel-polyfill (main.js: import 'babel-polyfill'). My package.json:
"dependencies": {
"#xkeshi/image-compressor": "^0.5.2",
"axios": "^0.17.1",
"bulma": "^0.6.1",
"bulma-extensions": "^0.5.2",
"cropperjs": "^1.2.1",
"vee-validate": "^2.0.0-rc.27",
"vue": "^2.5.13",
"vue-analytics": "^5.8.0",
"vue-awesome-swiper": "^3.0.6",
"vue-flatpickr-component": "^5.0.5",
"vue-goodshare": "^0.9.3",
"vue-masonry": "^0.10.16",
"vue-meta": "^1.4.0",
"vue-recaptcha": "^1.1.0",
"vue-router": "^3.0.1",
"vue-upload-component": "^2.7.4",
"vue2-editor": "^2.3.11",
"vue2-google-maps": "^0.8.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.4.2"
},
"devDependencies": {
"autoprefixer": "^7.2.3",
"babel-core": "^6.26.0",
"babel-eslint": "^8.1.2",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.1.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.3.1",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.14.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.6",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"node-sass": "^4.7.2",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"sw-precache-webpack-plugin": "^0.11.4",
"uglify-es": "^3.3.2",
"url-loader": "^0.6.2",
"vue-loader": "^13.6.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.2",
"webpack-hot-middleware": "^2.21.0",
"webpack-merge": "^4.1.0"
},
I get the same error when using vuex-persistedstate.
I have found the problem - this was my mistake - it was a syntax error in my v-for loop key...