I created a simple app a few weeks ago using create-react-app almost immediately I started getting this error in VSCode about it not being happy about something Babel related...which I ignored. My app works, I'm able to build and deploy to Heroku. And ESLint is also working. But the error keeps popping up in VSCode which has lead me down this rabbit hole of Babel and ESLint nightmares.
The error I was getting was regarding babel-eslint which I actually didn't have installed despite it being the parser named in my .eslintrc.json config. This is what my package.json file looked like prior to me making any changes:
{
"name": "new-rails-react-project",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.13.13",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
And this is what my .eslintrc.json file looked like:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true }
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
Since babel-eslint is deprecated I added #babel/eslint-parser and cannot for the life of me figure out how to make this work. Here are my current related config files:
package.json
"name": "ne-campground-reviews",
"private": true,
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.14.5",
"#babel/preset-react": "^7.13.13",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"lightbox2": "^2.11.3",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/eslint-parser": "^7.14.7",
"#babel/eslint-plugin": "^7.14.5",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
.eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks", "#babel"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true },
"requireConfigFile": false,
"babelOptions": {
"presets": ["#babel/preset-react"]
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
And this is babel.config.js although I don't know if this file is still needed and/or configured correctly
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
},
modules: 'commonjs'
},
'#babel/preset-react'
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
[
'#babel/preset-react',
{
development: isDevelopmentEnv || isTestEnv,
useBuiltIns: true
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
],
isProductionEnv && [
'babel-plugin-transform-react-remove-prop-types',
{
removeImport: true
}
]
].filter(Boolean)
}
}
This error is what's currently popping up on things like import and module
Parsing error: Cannot find module '#babel/preset-react'
Require stack:
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/config/files/plugins.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/config/files/index.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/index.js
Related
This is my .eslintrc.json file for the react app.
{
"env": {
"browser": true,
"es6": true
},
"extends": ["react-app", "prettier"],
"parserOptions": {
"ecmaVersion": 12
},
"plugins": ["react", "prettier"],
"rules": {
"prettier/prettier": [
"warn",
{
"singleQuote": true,
"trailingComma": "es5",
"jsxBracketSameLine": true,
"useTabs": true
}
],
"arrow-body-style": "off",
"prefer-arrow-callback": "off",
"quotes": ["error", "single"]
}
}
These are my dependencies in package.json file (this is not full code of the file, only dependencies)
{
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "4.22.0",
"#typescript-eslint/parser": "4.0.0",
"eslint-config-prettier": "^8.2.0",
"eslint-config-react-app": "6.0.0",
"eslint-plugin-flowtype": "5.2.0",
"eslint-plugin-import": "2.22.0",
"eslint-plugin-jest": "24.0.0",
"eslint-plugin-jsx-a11y": "6.3.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "7.20.3",
"eslint-plugin-react-hooks": "4.0.8",
"eslint-plugin-testing-library": "3.9.0",
"install-peerdeps": "^3.0.3",
"prettier": "^2.2.1",
"typescript": "^4.2.4"
}
}
I am facing error that even though singleQuote of prettier is set to true. Even for eslint, I have set quote as single.
My VS code settings for prettier-
See the docs: https://prettier.io/docs/en/options.html#quotes
It specifically states "JSX quotes ignore this option – see jsx-single-quote."
Set jsxSingleQuote to true
We use https://react-styleguidist.js.org/ to develop and display components for re-use. We used it for some years now and consists of JS and TS files. When starting with styleguidist server, the project is unbearable slow (approx. 4 mins). I tried many things to speed it up but nothing seems to make any difference.
I tried:
this workaround for react-docgen-typescript with no noticeable improvement.
the official configuration.
setting skipLibCheck: true in tsconfig.json from this recommendation.
Weird enough the startup seems a tad faster when just using default propsParser and not using react-docgen-typescript. But then not all props are included in the generated documentation.
So I'm really out of ideas... Our style guide is built on CRA v4.0.1. Maybe CRA is the problem? Or maybe the problem is that our style guide has both JS and TS files which "confuses" the TS compiler in some way....?
Any help, advice, or suggestion is most welcome...
package.json
{
"name": "#xxx/core",
"version": "2.7.0",
"scripts": {
"build:transpile-files": "NODE_ENV=production babel --config-file ./babel.config.js src --out-dir dist --extensions '.ts','.tsx','.js','.jsx' --ignore **/*.d.ts,**/*.spec.tsx,**/*.spec.js,**/styleguide.styled.js,**/setupTests.ts",
"build:copy-files": "node ./scripts/copy-files.js",
"build:ts-prod": " tsc --p tsconfig.build.json",
"build:ts-dev": "tsc --p tsconfig.json",
"build": "rm -rf dist && yarn build:ts-prod && yarn build:transpile-files && yarn build:copy-files",
"styleguide": "styleguidist server",
"styleguide:build": "styleguidist build",
"test": "DEBUG_PRINT_LIMIT=100000 react-scripts test --env=jest-environment-jsdom-sixteen --color --bail",
"test:coverage": "CI=true react-scripts test --env=jest-environment-jsdom-sixteen --color --bail --coverage",
"lint": "eslint src --ext .js,.jsx,.ts,.tsx,.snap",
"prettier": "npx prettier \"src/**/*.{js,jsx,ts,tsx,scss}\"",
"format": "yarn prettier --write"
},
"dependencies": {
"#material-ui/lab": "^4.0.0-alpha.57",
"#tippyjs/react": "^4.2.0",
"antd": "^4.9.1",
"fix-webm-duration": "1.0.0",
"react-dates": "^21.8.0",
"react-draggable": "^4.3.1",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"react-window-infinite-loader": "^1.0.5",
"recharts": "^1.8.5",
"tippy.js": "^6.2.7",
"underscore": "^1.9.1"
},
"peerDependencies": {
"#material-ui/core": "4.11.0",
"#material-ui/icons": "4.9.1",
"moment": "^2.29.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-select": "^3.1.0",
"styled-components": "^5.0.1"
},
"devDependencies": {
"#babel/cli": "7.5.5",
"#material-ui/core": "4.11.0",
"#material-ui/icons": "4.9.1",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/react-hooks": "^5.0.0",
"#testing-library/user-event": "^12.6.0",
"#types/dom-mediacapture-record": "^1.0.7",
"#types/jest": "^26.0.20",
"#types/node": "^14.14.22",
"#types/react": "^16.14.2",
"#types/react-dates": "^21.8.1",
"#types/react-dom": "^16.9.10",
"#types/react-select": "^3.1.2",
"#types/recharts": "^1.8.19",
"#types/styled-components": "^5.1.7",
"#types/testing-library__react": "^10.2.0",
"#types/testing-library__react-hooks": "^3.4.1",
"#types/underscore": "^1.11.0",
"#typescript-eslint/eslint-plugin": "^4.14.0",
"#typescript-eslint/parser": "^4.14.0",
"babel-loader": "^8.1.0",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.11.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-babel": "5.3.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jest-dom": "^3.6.5",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-testing-library": "^3.10.1",
"fs-extra": "^8.1.0",
"jest-canvas-mock": "^2.3.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"jest-enzyme": "7.0.2",
"jest-styled-components": "^7.0.3",
"moment": "^2.29.0",
"prettier": "^1.19.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-docgen-typescript": "^1.21.0",
"react-dom": "^16.13.1",
"react-scripts": "^4.0.1",
"react-select": "^3.1.0",
"react-styleguidist": "^11.1.5",
"react-test-renderer": "^16.13.1",
"styled-components": "^5.0.1",
"typescript": "^4.1.3"
},
"resolutions": {
"acorn": "^7.1.1",
"kind-of": "^6.0.3"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,tsx,ts}",
"!src/**/{constants,styled,models}.{js,ts}",
"!src/theme/illustrations/**",
"!src/theme/icons/**"
]
}
}
tsconfig.json
{
"compilerOptions": {
"baseUrl": "src",
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"es6"
],
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react",
"allowJs": true,
"outDir": "dist",
"sourceMap": true,
"declaration": true,
"noEmit": true,
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
]
}
styleguide.config.js
const path = require('path')
module.exports = {
title: 'CoreWeb',
propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json').parse,
pagePerSection: true,
skipComponentsWithoutExample: true,
styleguideComponents: {
Wrapper: path.join(__dirname, './src/utils/styleguidist/ThemeWrapper'),
},
template: {
head: {
links: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700',
},
],
},
},
sections: [
{
name: 'Charts',
components: () => [
'src/components/Charts/BarChart/index.tsx',
'src/components/Charts/LineChart/index.tsx',
'src/components/Charts/PieChart/index.tsx',
'src/components/GoalCharts/TaskGoalMetrics/index.tsx',
'src/components/RegistrationCharts/PainBarChart/index.tsx',
'src/components/RegistrationCharts/MoodBarChart/index.tsx',
'src/components/RegistrationCharts/SleepBarChart/index.tsx',
'src/components/RegistrationCharts/AlcoholBarChart/index.tsx',
'src/components/RegistrationCharts/BloodPressureBarChart/index.tsx',
'src/components/RegistrationCharts/ExerciseBarChart/index.tsx',
'src/components/RegistrationCharts/StepsBarChart/index.tsx',
'src/components/RegistrationCharts/SmokingBarChart/index.tsx',
'src/components/RegistrationCharts/WeightLineChart/index.tsx',
'src/components/RegistrationCharts/WaistHipLineChart/index.tsx',
],
},
{
name: 'Data display',
components: () => [
'src/components/Avatar/layout.tsx',
'src/components/Chip/layout.tsx',
'src/components/DefinitionItem/layout.js',
'src/components/Graphs/Donut/layout.js',
'src/components/Image/layout.js',
'src/components/Lightbox/layout.js',
'src/components/LinkifyText/layout.js',
'src/components/ListItemIcon/layout.js',
'src/components/MediaMosaic/layout.js',
'src/components/Person/index.tsx',
'src/components/Table/layout.tsx',
'src/components/TableSelection/layout.js',
'src/components/Tag/layout.js',
'src/components/TruncateWithShow/layout.js',
'src/components/Typography/layout.tsx',
'src/components/UnreadItems/index.tsx',
'src/components/Video/layout.tsx',
'src/components/CircleWithContent/layout.tsx',
],
},
{
name: 'Inputs',
components: () => [
'src/components/Button/layout.tsx',
'src/components/ButtonDropdownSelector/layout.js',
'src/components/Checkbox/layout.tsx',
'src/components/DatePickers/InlineDatePicker/layout.js',
'src/components/DatePickers/Range/layout.js',
'src/components/DatePickers/Single/index.tsx',
'src/components/DatePickers/HourMin/index.tsx',
'src/components/EmojiInputBase/layout.js',
'src/components/EmojiPicker/layout.js',
'src/components/FilePicker/layout.tsx',
'src/components/FilledInput/layout.js',
'src/components/GenderSelector/layout.tsx',
'src/components/InputButton/layout.js',
'src/components/MenuButton/index.tsx',
'src/components/MultiSelectDropdown/layout.js',
'src/components/RadioGroup/layout.tsx',
'src/components/SearchTextField/layout.js',
'src/components/Select/layout.tsx',
'src/components/Slider/layout.js',
'src/components/Switch/layout.js',
'src/components/TextField/layout.tsx',
'src/components/TimeSelect/layout.js',
'src/components/ToggleButtonGroup/layout.tsx',
],
},
{
name: 'Surfaces',
components: () => [
'src/components/Card/index.tsx',
'src/components/CardContent/layout.tsx',
'src/components/ProfileCard/layout.js',
'src/components/MenuList/layout.js',
],
},
{
name: 'Navigation',
components: () => [
'src/components/CardTabs/layout.tsx',
'src/components/Tabs/layout.tsx',
'src/components/SideNavigation/layout.tsx',
],
},
{
name: 'Feedback',
components: () => [
'src/components/Confirm/index.tsx',
'src/components/Dialog/layout.js',
'src/components/EmptyState/index.tsx',
'src/components/ErrorBoundary/layout.js',
'src/components/FormDrawer/layout.js',
'src/components/InfiniteScroller/layout.js',
'src/components/Inform/layout.js',
'src/components/InformDialog/layout.js',
'src/components/Loading/layout.js',
'src/components/LoadingV2/layout.js',
'src/components/LoadingV2/layout.js',
'src/components/SystemMessage/layout.js',
'src/components/Tooltip/index.tsx',
],
},
{
name: 'Drafts',
components: () => ['src/components/DraftStatus/layout.tsx'],
},
{
name: 'Goals',
components: () => [
'src/components/ExerciseActivityForm/index.tsx',
'src/components/ExerciseIcon/layout.js',
'src/components/MoodIcon/layout.js',
'src/components/PainIcon/layout.js',
'src/components/GoalIcon/index.tsx',
],
},
{
name: 'Groups',
components: () => [
'src/components/GroupForm/layout.js',
'src/components/GroupItem/layout.js',
'src/components/MessageActionComment/layout.js',
'src/components/MessageActionLike/layout.js',
'src/components/GroupPost/index.tsx',
'src/components/MessageComment/layout.tsx',
'src/components/MessageStatusComments/layout.js',
'src/components/MessageStatusLikes/layout.js',
],
},
{
name: 'Messages',
components: () => [
'src/components/MessageAttachmentLinkForm/layout.js',
'src/components/MessageEditor/layout.js',
'src/components/MessageMediaAttachment/layout.js',
],
},
{
name: 'Notes',
components: () => ['src/components/Note/layout.js'],
},
{
name: 'Registrations',
components: () => [
'src/components/RegistrationInputTag/layout.js',
'src/components/RegistrationItem/layout.js',
],
},
{
name: 'Media',
components: () => [
'src/components/CaptureWebcamImageDialog/index.tsx',
'src/components/RecordWebcamVideoDialog/index.tsx',
'src/components/VideoAudioUnavailable/layout.js',
],
},
{
name: 'Theme',
components: () => ['src/theme/colors/layout.js', 'src/theme/borderRadius/layout.tsx'],
},
{
name: 'Icons',
components: ['src/theme/icons/**/layout.tsx'],
},
{
name: 'Illustrations',
components: ['src/theme/illustrations/**/layout.js', 'src/theme/illustrations/**/layout.tsx'],
},
{
name: 'Utilities',
components: () => ['src/utils/**/layout.js'],
},
],
}
Since you are using TypeScript and probably using ts-loader (and babel-loader), you could try using a faster TS transpiler like SWC-loader. For me, it reduced the initial load time roughly in half.
It is pretty simple to implement, just install the dependencies (#swc/core and swc-loader) and add the loader to the webapckConfig in your styleguide.config.js (custom webpack config).
webpackConfig: {
... // your other config here
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /(node_modules)/,
use: {
loader: "swc-loader",
}
},
... // your other rules here
],
},
}
I'm using Vue CLI 3, and I need to add the Terser Webpack Plugin for removing console.log and comments from the code. This isn't working with my current setup - logs and comments are still in the build. My production workflow:
Run npm run build
Run serve -s dist
vue.config.js:
module.exports = {
publicPath: "./"
}
webpack.config.js:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: { drop_console: true },
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: { comments: false },
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
],
},
};
package.json:
{
"name": "cli3pwavuetify",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuetify": "^2.0.0",
"vuex": "^3.0.1",
"date-fns": "^2.4.1",
"firebase": "^7.0.0",
"lodash": "^4.17.15",
"vue-flickity": "^1.2.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^3.11.0",
"#vue/cli-plugin-pwa": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
"material-design-icons-iconfont": "^5.0.1",
"prettier": "^1.18.2",
"sass": "^1.17.4",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"terser-webpack-plugin": "^2.1.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
What do I need to change to make it work? Is webpack.config.js the correct place for the code?
In Vue CLI projects, Webpack is configured in <projectRoot>/vue.config.js via the configureWebpack or chainWebpack properties. You can inspect the resolved Webpack config from the command line with vue inspect.
In your case, add a <projectRoot>/vue.config.js with the following contents:
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
configureWebpack: config => {
config.optimization = {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: { drop_console: true },
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: { comments: false },
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
],
}
}
}
OS: Windows 10 Pro
webpack: 1.14.0
So, I'm receiving the above mentioned error with the following code, async being the problem:
import { applyAfterware, applyMiddleware } from 'redux';
async applyMiddleware(req, next) {
....
},
The full error message is:
Module parse failed: C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\babel-loader\lib\index.js!C:\Users\d0475\Documents\Projects\learn-redux-graphql\client\apolloClient.js Unexpected token (77:25)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (77:25)
at Parser.pp$4.raise (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp.expect (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:597:28)
at Parser.pp$3.parseObj (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1973:16)
at Parser.pp$3.parseExprAtom (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1805:19)
at Parser.pp$3.parseExprSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1597:21)
# ./client/app.js 17:20-45
My webpack.config file is:
var path = require('path');
var webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/app'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new Dotenv({
path: './.env',
safe: true
})
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
How do i resolve this issue?
My package.json is as follows:
{
"name": "learn-redux-graphql",
"version": "1.0.0",
"description": ":) ",
"scripts": {
"build:webpack": "set NODE_ENV=production && webpack --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack",
"test": "NODE_ENV=production mocha './tests/**/*.spec.js' --compilers js:babel-core/register",
"clean": "rimraf public",
"start": "node devServer.js"
},
"repository": {
"type": "git",
"url": "https://github.com/TheoMer/learn-redux-graphql.git"
},
"author": "Theo Mer",
"license": "MIT",
"homepage": "https://github.com/TheoMer/learn-redux-graphql",
"dependencies": {
"apollo-client": "^1.0.2",
"babel-core": "^6.5.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-object-rest-spread": "^6.5.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"dotenv-webpack": "^1.4.5",
"eslint": "^3.4.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^4.1.0",
"express": "^4.13.4",
"firebase": "^3.3.0",
"graphql-tag": "^1.3.2",
"graphql-tools": "^0.10.1",
"immutability-helper": "^2.1.2",
"localforage": "^1.5.0",
"lodash": "^4.17.4",
"node-env-file": "^0.1.8",
"raven-js": "^2.1.1",
"react": "^0.14.7",
"react-addons-css-transition-group": "^0.14.7",
"react-apollo": "^1.0.0-rc.3",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.2",
"redbox-react": "^1.2.2",
"redux": "^3.3.1",
"redux-persist": "^4.8.0",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"subscriptions-transport-ws": "^0.5.5-alpha.0",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-react-jsx": "^6.23.0",
"copy-webpack-plugin": "^4.0.1",
"expect": "^1.14.0",
"expect-jsx": "^2.3.0",
"html-webpack-plugin": "^2.28.0",
"mocha": "^2.4.5",
"offline-plugin": "^4.7.0",
"react-addons-test-utils": "^0.14.7",
"sw-precache-webpack-plugin": "^0.9.1"
},
"babel": {
"presets": [
"react",
"es2015"
],
"env": {
"development": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
],
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
},
{
"transform": "react-transform-catch-errors",
"imports": [
"react",
"redbox-react"
]
}
]
}
]
]
},
"production": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
]
]
}
}
},
"eslintConfig": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [
2,
"single"
],
"strict": [
2,
"never"
],
"babel/generator-star-spacing": 1,
"babel/new-cap": 1,
"babel/object-shorthand": 1,
"babel/arrow-parens": 1,
"babel/no-await-in-loop": 1,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"babel",
"react"
]
}
}
My app.js, for which the following error is generated if I used the .babelrc file:
Module build failed: SyntaxError: C:/Users/d0475/Documents/Projects/learn-redux-graphql/client/app.js: Unexpected token (47:2)
46 | render(
> 47 | <ApolloProvider store={store} client={client}>
| ^
render(
<ApolloProvider store={store} client={client}>
{ /* Tell the Router to use our enhanced history */ }
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={PhotoGrid} />
<Route path="/view/:postId" component={Single}></Route>
</Route>
</Router>
</ApolloProvider>,
document.getElementById('root')
);
To transform async you need a special plugin.
You need to have babel plugin transform async to generator
npm install --save-dev babel-plugin-transform-async-to-generator
Then you can add the following line to your .babelrc
{"plugins": ["transform-async-to-generator"]}
Reference: Async to generator
So, and as #anamulhasan suggested, I imported babel-plugin-transform-async-to-generator.
Adding
"plugins": ["transform-async-to-generator"]
to a .babelrc file did not resolve the issue. But adding:
[
"transform-async-to-generator"
]
to the "babel" --> "env" --> "plugins" section, of both production and development, did resolve the issue.
I'm using Webpack with Polymer, importing a component like so:
import '#polymer/polymer/polymer-element.html';
class AppShell extends Polymer.Element {
static get is() { return 'app-shell'; }
}
I left out the rest of the component here. The import is working as expected in my app, but when I am running ESLint, I get the following error message:
50:27 error 'Polymer' is not defined no-undef
This is my package.json, where I'm defining my ESLint settings. Anyone have an idea why ESLint is not picking up the import properly?
{
"name": "client-meeting-tracker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"start": "node utils/webserver.js",
"lint": "eslint --ext .html,.js */**",
"build": "node utils/build.js"
},
"dependencies": {
"#startup-boilerplate/inkling": "*",
"auth0-lock": "^10.7.3",
"lodash": "^4.6.1",
"moment": "^2.17.1"
},
"devDependencies": {
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"eslint": "^3.16.0",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-import": "^2.2.0",
"file-loader": "^0.8.4",
"fs-extra": "^0.30.0",
"polymer-cli": "^0.17.0",
"wc-loader": "*",
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0"
},
"eslintConfig": {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"plugins": [
"html"
]
}
}
Polymer is defined as a global, so I would configure Polymer as a global in your package.json:
"eslintConfig": {
"globals": {
"Polymer": true
}
}