Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SyntaxError: Unexpected token, expected "," #9351

Closed
dep opened this issue Jan 16, 2019 · 5 comments

Comments

@dep
Copy link

commented Jan 16, 2019

I've updated to Babel 7 but I am receiving the following syntax error.

[!] (babel plugin) SyntaxError: Unexpected token, expected "," (3:21)

  1 | // @flow
  2 |
> 3 | import React, { type Node } from 'react';
    |                      ^
  4 | import { compose, defaultProps, setDisplayName } from 'recompose';
  5 | import cssVendor from 'css-vendor';
  6 | import Dotdotdot from 'react-dotdotdot';

Here's my package.json

{
  "name": "@foo/bar",
  "version": "0.1.3",
  "main": "index.min.js",
  "license": "SEE LICENSE IN LICENSE",
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@catalytic/catalytic-icons": "0.1.3",
    "@catalytic/formdata-polyfill": "0.1.3",
    "@tippy.js/react": "^1.0.1",
    "change-case": "^3.0.2",
    "classlist-polyfill": "^1.2.0",
    "classnames": "^2.2.5",
    "color": "^3.0.0",
    "css-vendor": "^1.1.0",
    "dom-helpers": "^3.4.0",
    "esm": "^3.0.71",
    "hast-util-sanitize": "^1.2.0",
    "hast-util-to-mdast": "^3.0.0",
    "immutable": "^3.8.2",
    "keycode": "^2.2.0",
    "mdast-util-to-hast": "^3.0.2",
    "path": "^0.12.7",
    "raf": "^3.4.0",
    "ramda": "^0.25.0",
    "react": "^16.6.0",
    "react-color": "^2.14.1",
    "react-datetime": "^2.16.2",
    "react-dom": "^16.6.0",
    "react-dotdotdot": "^1.2.3",
    "react-dropzone": "^4.3.0",
    "react-intl": "^2.4.0",
    "react-jss": "^8.6.1",
    "react-modal": "^3.5.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.1.1",
    "react-switch": "^3.0.4",
    "react-textarea-autosize": "^7.1.0",
    "react-toastify": "^4.4.3",
    "recompose": "^0.30.0",
    "remark-parse": "^5.0.0",
    "snyk": "^1.89.0",
    "strip-markdown": "^3.0.2",
    "url-search-params-polyfill": "^4.0.1",
    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-external-helpers": "^7.2.0",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "@catalytic/eslint-config-catalytic": "0.1.3",
    "@svgr/rollup": "^4.0.2",
    "@svgr/webpack": "^4.0.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "catalog": "^3.6.0",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^4.19.1",
    "flow": "^0.2.3",
    "flow-bin": "^0.78.0",
    "glob": "^7.1.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^22.1.4",
    "jest-canvas-mock": "^1.1.0",
    "jest-junit": "^5.0.0",
    "rc-time-picker": "^3.3.1",
    "rc-util": "^4.5.1",
    "react-cosmos": "^4.6.4",
    "react-cosmos-flow": "^4.6.1",
    "react-cosmos-router-proxy": "^4.6.1",
    "react-cosmos-test": "^4.6.4",
    "react-cosmos-wrapper-proxy": "^1.4.0",
    "rimraf": "^2.6.2",
    "rollup": "^1.1.0",
    "rollup-plugin-babel": "^4.3.0",
    "rollup-plugin-flow-entry": "^0.2.0",
    "rollup-plugin-json": "^3.1.0",
    "rollup-plugin-multi-entry": "^2.1.0",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-postcss": "^1.6.3",
    "sinon": "^4.2.1",
    "url-loader": "1.1.2"
  },
  "scripts": {
    "build": "yarn build:source",
    "build:catalog": "cd src && catalog build --public-url /ui/catalog/",
    "build:cosmos": "yarn cosmos:export",
    "build:source": "NODE_ENV=production yarn rollup -c",
    "catalog": "cd src && catalog start",
    "clean": "rimraf build",
    "cosmos": "cosmos --config config/cosmos.config.js",
    "cosmos:export": "cosmos-export --config config/cosmos.config.js",
    "lint": "yarn eslint .",
    "lint-fix": "yarn eslint --fix -f codeframe .",
    "lint-staged": "yarn eslint --fix -f codeframe",
    "snyk": "snyk test --severity-threshold=medium --org=catalyticlabs",
    "snyk-wizard": "snyk wizard --org=catalyticlabs",
    "start": "yarn cosmos",
    "test": "TZ=UTC jest --env=jsdom"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "forceExit": true,
    "setupFiles": [
      "<rootDir>/config/polyfills.js",
      "<rootDir>/config/enzyme.js",
      "jest-canvas-mock"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "testMatch": [
      "<rootDir>/{config,src}/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/{config,src}/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/../../node_modules/babel-jest",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!react-cosmos-flow)"
    ],
    "moduleNameMapper": {
      "^.+\\.css$": "identity-obj-proxy",
      "^.+\\.svg$": "<rootDir>/config/jest/svgMock.js",
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "mjs",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "reporters": [
      "default",
      "jest-junit"
    ]
  },
  "babel": {
    "presets": [
      [
        "@babel/env",
        {
          "modules": "auto",
          "targets": {
            "browsers": [
              "defaults"
            ]
          },
          "useBuiltIns": "entry"
        }
      ],
      "@babel/react"
    ]
  }
}

Any help is appreciated.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Jan 16, 2019

Hey @dep! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@dep

This comment has been minimized.

Copy link
Author

commented Jan 16, 2019

Fixed this by adding the "@babel/preset-flow" preset. Cheers.

@dep dep closed this Jan 16, 2019

@AmitM30

This comment has been minimized.

Copy link

commented Mar 15, 2019

@dep I added @babel/preset-flow, but it did not work for me. Any ideas?

{
  "presets": ["@babel/preset-flow", "@babel/env", "@babel/react"]
}
@dep

This comment has been minimized.

Copy link
Author

commented Mar 15, 2019

@AmitM30 You might consider using babel.config.js instead of tucking these configurations in to package.json - I can't recall if that helped solve this problem, but it does feel a lot cleaner with it.

Here's my babel.config.js, if it helps.

module.exports = function(api) {
  api.cache(true);
  const presets = [
    [
      '@babel/preset-env',
      {
        modules: 'auto',
        targets: {
          browsers: ['defaults']
        },
        useBuiltIns: 'entry'
      }
    ],
    '@babel/react',
    '@babel/preset-flow'
  ];
  const plugins = [
    '@babel/plugin-proposal-class-properties',
    '@babel/transform-runtime',
    'add-module-exports',
    'babel-plugin-dynamic-import-node'
  ];

  return {
    presets,
    plugins
  };
};

So you might also try @babel/preset-env instead of @babel/env, and load preset-flow last, though I'm not sure if that matters or not. Good luck!

@AmitM30

This comment has been minimized.

Copy link

commented Mar 15, 2019

hey @dep. I changed to @babel/preset-env and moved @babel/preset-flow to last, and it seemed to have worked. Thanks a ton !

And I also needed @babel/plugin-proposal-class-properties after the above issue fixed. so thanks for that too.

@lock lock bot added the outdated label Jun 15, 2019

@lock lock bot locked as resolved and limited conversation to collaborators Jun 15, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants
You can’t perform that action at this time.