Before I continue, I have tried the following solutions:
Git: Babel plugin root import package: Plugin doesn't seem to work alongside jest
SO: Configuring for babel jest
SO: Create own babel plugin
Webpack aliasing is another solution however we don't use webpack
A project was handed over to me recently which utilizes relative import statements that can get pretty long and obscure (e.g. import * as stuff from '../../../../../utilities/stuff'). I'd like to simplify our import statements using the project's root directory in this fashion: import * as stuff from '~/utilities/stuff.
My understanding of the packages, dependencies and configurations is still in its infancy. It looks like we use babel for transpiling, however I don't see a core babel package - only babel-jest and babel-polyfill.
Here is our package.json:
{
"name": "placeholder",
"version": "0.1.0",
"private": true,
"dependencies": {
"animejs": "^2.2.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.5",
"html-to-react": "^1.3.0",
"htmlparser2-react": "0.0.4",
"js-csp": "^1.0.1",
"npm-run-all": "^4.1.1",
"prop-types": "^15.5.10",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-aria-menubutton": "^5.0.2",
"react-dnd": "^2.5.1",
"react-dnd-html5-backend": "^2.5.1",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-rte": "^0.11.0",
"react-sidebar": "^2.3.2",
"react-toasts": "^1.2.3",
"react-transition-group": "^2.2.0",
"react-virtualized": "^9.9.0",
"redux": "^3.7.2",
"redux-form": "^6.8.0",
"sweetalert": "^2.0.8",
"text-spinners": "^1.0.5",
"uuid": "^3.1.0"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"enzyme": "^2.9.1",
"jest-enzyme": "^3.8.2",
"materialize-css": "^0.100.2",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"node-sass-chokidar": "0.0.3",
"node-sass-magic-importer": "^5.0.0-alpha.6",
"react-docgen": "^2.18.0",
"react-scripts": "1.0.13",
"react-styleguidist": "^6.0.24",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.3.0",
"xhr-mock": "^1.9.1"
}
}
And .babelrc
{
"presets": ["react-app"],
"sourceMaps": true,
"retainLines": true
}
Our directory structure is as follows: <rootDir>/src where all js/jsx source files are contained within 'src'. This is the directory I'd like to configure to be the root (represented by a tilda (~)). Help would be greatly appreciated!
Related
I've moved everything over from a working project (ultimate-hot-reloading-example), to an existing project of mine that uses the keystone cms. I uninstalled ALL dev dependencies in my project, and installed all of the exact dependencies in the working project into mine (webpack, babel, etc...).
For some reason, the web.config.js file won't parse the es6 syntax
export default
Which gives this error:
- configuration has an unknown property 'default'.
If I switch to the following, it works:
const config = ...
module.exports = config;
Elsewhere in my project, I use other es6 syntax and it works...
Here's the dependencies in package.json, which works perfectly with the example project with the 'export default' syntax.
"dependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.9.0",
"babel-runtime": "^6.9.2",
"chokidar": "^2.0.3",
"css-loader": "^0.28.11",
"css-modules-require-hook": "^4.0.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.8.1",
"express": "^4.14.0",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-hot-loader": "^4.1.3",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"style-loader": "^0.21.0",
"webpack": "^4.8.3",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.12.1",
"webpack-node-externals": "^1.7.2"
Any idea why this would happen?
I had a similar problem which turned to be my improper migration from require(...) to import(...)
I replaced this code:
const common = require("./webpack.common");
module.exports = merge(common, {...})
with:
const common = await import("./webpack.common.js");
export default merge(common, .....)
The problem was that I didn't use the default export from webpack.common.js. The fix is:
const common = await import("./webpack.common.js");
export default merge(common.default, .....)
I am trying to upgrade from 7 to version 8. But I am running into some errors.
I think I need to upgrade some stuff but not sure what
This is what I have for my packages(I removed plugins that have no bearing on my problem)
"dependencies": {
"babel-plugin-emotion": "^9.2.5",
"babel-polyfill": "^6.26.0",
"http-proxy-middleware": "^0.18.0",
"koa-connect": "^2.0.1",
"koa-router": "^7.4.0",
"koa2-connect-history-api-fallback": "0.0.6",
"npm": "^6.1.0",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-emotion": "^9.2.5",
"react-responsive-modal": "^3.3.0",
"react-router-dom": "^4.2.2",
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"mobx-react-router": "^4.0.4",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.4"
}
I have in my .baelrc
{
"presets": ["env", "react"],
"plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "emotion"]
}
I see that I need to upgrade stuff like babel-core, preset-env, preset-react but I am not sure what else.
I get this error
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
Edit my newest configs(it now seems to work)
.babelrc
{
"presets": ["#babel/env", "#babel/react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
"#babel/plugin-transform-object-assign",
"#babel/plugin-proposal-object-rest-spread",
"transform-class-properties"
]
}
package.json
"dependencies": {
"#babel/polyfill": "^7.0.0",
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-object-assign": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
}
All plugins are moved to #babel scope with Babel 7. To update your package.json, you need to rename all your plugins and presets accordingly, using the ^7.0.0 version.
You can find all the official plugins here.
If you open up a plugin that interests you, you will see that all of them are renamed to, for example: #babel/plugin-proposal-class-properties.
babel-polyfill => #babel/polyfill
babel-core => #babel/core
babel-plugin-transform-class-properties => #babel/plugin-proposal-class-properties
you get the idea. babel- is now #babel/ and some plugins are prefixed with proposal.
babel-plugin-emotion is of course not an official plugin so it stays the same, as well as babel-loader. For all other plugins make sure to compare the names with the new naming on the link provided above. Open each plugin's folder to see the new name beginning with #babel/.
The same naming now applies to .babelrc file (or babel config in general), and I suggest you do not use the shorthand naming but include the full package nam of plugins and presets in your babel config:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
// ...
}
Hope this helps! Cheers.
I've made an application in Meteor using React. When it runs on Chrome everything works fine and there is no problem. But when i open it in IE or Edge it's just total blank. I think it has something to do with ES2015+ but I can't find the root problem.
As you can see on the image here, it just says "Syntax error in module.js" And afterward a lot of meteor Install is not defined. Error syntax error
Here is my package.json file
"dependencies": {
"#babel/runtime": "^7.0.0-beta.51",
"#cleverbeagle/seeder": "^1.3.1",
"#fortawesome/fontawesome": "^1.1.1",
"#fortawesome/fontawesome-free-brands": "^5.0.12",
"#fortawesome/fontawesome-pro-light": "^5.0.3",
"#fortawesome/fontawesome-pro-regular": "^5.0.3",
"#fortawesome/fontawesome-pro-solid": "^5.0.3",
"#fortawesome/react-fontawesome": "0.0.17",
"#okgrow/auto-analytics": "^2.0.0",
"babel-runtime": "^6.26.0",
"bcrypt": "^1.0.3",
"commonmark": "^0.28.1",
"cordova": "^8.0.0",
"cordova-plugin-splashscreen": "^5.0.1",
"cordova-plugin-statusbar": "^2.4.1",
"core-js": "^2.5.1",
"handlebars": "^4.0.11",
"hide-virtual-keyboard": "^1.0.1",
"ios-sim": "^6.1.2",
"jquery": "^2.2.4",
"jquery-validation": "^1.17.0",
"juice": "^4.2.2",
"lodash": "^4.17.4",
"meteor-node-stubs": "^0.3.2",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"parse-google-place": "^1.1.0",
"prop-types": "^15.6.0",
"query-string": "^6.0.0",
"react": "^16.2.0",
"react-addons-pure-render-mixin": "^15.6.2",
"react-autosuggest": "^9.3.4",
"react-bootstrap": "^0.31.5",
"react-bootstrap-slider": "^2.1.3",
"react-copy-to-clipboard": "^5.0.1",
"react-day-picker": "^7.0.5",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.3",
"react-helmet": "^5.2.0",
"react-intl": "^2.4.0",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-share": "^2.1.1",
"react-slick": "^0.23.1",
"react-swipeable": "^4.2.0",
"simpl-schema": "^0.3.2",
"underscore": "^1.8.3"
},
And this is my packages in Meteor:
meteor-base#1.4.0 # Packages every Meteor app needs to have
mobile-experience#1.0.5 # Packages for a great mobile UX
mongo#1.5.0 # The database Meteor supports right now
reactive-var#1.0.11 # Reactive variable for tracker
tracker#1.2.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.4.1 # CSS minifier run for production mode
standard-minifier-js#2.3.4 # JS minifier run for production mode
es5-shim#4.8.0 # ECMAScript 5 compatibility for older browsers.
ecmascript#0.11.1 # Enable ECMAScript2015+ syntax in app code
shell-server#0.3.1 # Server-side component of the `meteor shell` command
react-meteor-data
alanning:roles
fourseven:scss
twbs:bootstrap
accounts-base#1.4.2
accounts-password#1.5.1
service-configuration#1.0.11
themeteorchef:bert
fortawesome:fontawesome
aldeed:collection2-core#2.0.1
audit-argument-checks#1.0.7
ddp-rate-limiter#1.0.7
dynamic-import#0.4.0
static-html
mdg:seo
universe:i18n
reywood:publish-composite
mdg:meteor-apm-agent
underscore#1.0.10
mdg:geolocation
btafel:accounts-facebook-cordova
Anything had same issue? I'm running on Meteor version 1.7.0.3
Thanks in advance.
I started this project with create-react-app and then ejected. I'm currently analyzing my webpack bundle and I get this.
I ran this command to analyze my bundle -
source-map-explorer main.<hash>.js main.<hash>.js.map
I have a couple of questions -
I use moment.js in my application, however when looking at my package.json, it is not there. It does exist in my yarn.lock. Why is this happening? Why does my application even work?
I use lodash, but I have taken care to import specific lodash functions (import map from "lodash/map", for example). However, I see lodash in my node_module..despite never having imported it. Why is this working? Is it because a dependency of mine has a dependency on the whole lodash package and I'm just getting lucky?
How do I get source-map-explorer to analyze my production build? I tried the steps in the CRA documentation, but they error.
Why is the above happening?
For full reference here is my package.json's dependencies/devDependencies.
{
"dependencies": {
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-react-app": "^3.1.0",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"cross-env": "5.1.4",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"query-string": "^5.1.0",
"raf": "3.4.0",
"react": "^16.2.0",
"react-collapse": "^4.0.3",
"react-countdown-now": "^1.3.0",
"react-dev-utils": "^4.2.1",
"react-dom": "^16.2.0",
"react-grecaptcha": "^1.2.5",
"react-md-spinner": "^0.2.5",
"react-motion": "^0.5.2",
"react-player": "^1.1.1",
"react-redux": "^5.0.6",
"react-responsive": "^4.0.3",
"react-router-dom": "^4.2.2",
"react-router-hash-link": "^1.2.0",
"react-select": "^1.2.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"xelpmoc-core": "^0.3.1"
},
"devDependencies": {
"compression-webpack-plugin": "^1.1.3",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.14.0",
"eslint-config-recommended": "^2.0.0",
"eslint-plugin-react": "^7.5.1",
"google-map-react": "^0.34.0",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"pm2": "^2.9.1",
"prettier": "^1.9.2",
"redux-mock-store": "^1.4.0"
},
}
yarn.lock is a "lockfile" which locks down your dependency tree so that when another teammate (or CI server) runs the build it gets the same dependencies (and thus the same build). The lockfile lists not just dependencies but deps of deps.
NPM/yarn flattens dependencies in node_modules when possible so you probably have some dependencies which are installing lodash/moment. You can debug this by running npm ls lodash to see where it's coming from. You should definitely install those packages that you are using but you've gotten "by accident".
I can't answer #3
I used browserify to bundle my code, and it works fine. But the bundle size is very large. I used disc to check the bundle size and found that Crypto-Browserify and Browserify-Zib takes up almost half of the size. I'm pretty sure I did not require them in my code, and here is my package.json, which doesn't look like they use the two libraries too. Any idea?
"devDependencies": {
"bower-files": "^3.11.3",
"browser-sync": "^2.11.1",
"browserify": "^13.0.0",
"browserify-shim": "^3.8.12",
"clamp-js": "^0.7.0",
"gulp": "^3.9.0",
"gulp-clean": "^0.3.1",
"gulp-concat": "^2.6.0",
"gulp-eslint": "^1.1.1",
"gulp-minify-css": "^1.2.3",
"gulp-rev": "^6.0.1",
"gulp-sass": "^2.1.1",
"gulp-scss-lint": "^0.3.9",
"gulp-sync": "^0.1.4",
"gulp-tmod": "^1.0.3",
"gulp-uglifyjs": "^0.6.2",
"jquery": "^2.2.0",
"jquery-lazyload": "^1.9.7",
"jquery-qrcode": "^1.0.0",
"moment": "^2.11.1",
"raven": "^0.10.0",
"vinyl-source-stream": "^1.1.0",
"zeptojs": "^1.1.4"
},