React | Failed to compile | Module parse failed: Unexpected token (13:40)

[pierroloco]

Hi everyone,

I am trying to implement the Microlink/SDK into a project and I am experiencing a problem when I compile (cf . below)

Screenshot

After getting this error, I updated all the Dependencies and DevDependencies but it didn't help.
Here is the list, maybe something is wrong there:

  "dependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-react-constant-elements": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "@microlink/demo-links": "^1.0.12",
    "@microlink/react": "^5.1.0",
    "@storybook/addon-storyshots": "^5.3.13",
    "@storybook/react": "^5.3.13",
    "babel-eslint": "^10.0.3",
    "babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "core-js": "^3.2.1",
    "cross-fetch": "^3.0.4",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "husky": "^4.2.3",
    "jest-environment-enzyme": "^7.1.2",
    "jest-enzyme": "^7.1.2",
    "jest-styled-components": "^7.0.0",
    "ky": "^0.17.0",
    "ky-universal": "^0.5.0",
    "moment": "^2.24.0",
    "oidc-client": "^1.9.1",
    "prettier-standard": "^16.1.0",
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "react-redux": "^7.1.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux-thunk": "^2.3.0",
    "rollup": "^1.31.1",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-filesize": "^6.2.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-terser": "^5.2.0",
    "rollup-plugin-visualizer": "^3.3.1",
    "standard": "^14.3.1",
    "styled-components": "^5.0.1",
    "unfetch": "^4.1.0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.10",
    "@types/react": "^16.9.4",
    "@types/react-dom": "^16.9.1",
    "@types/react-redux": "^7.1.4",
    "@types/react-router-dom": "^5.1.0",
    "babel-jest": "^24.9.0",
    "jest": "^24.9.0",
    "node-sass-chokidar": "^1.3.5",
    "npm-run-all": "^4.1.5",
    "react-scripts-ts": "^3.1.0",
    "ts-jest": "^24.1.0",
    "tslint": "^5.20.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^4.1.0",
    "typescript": "^3.6.3"
  }

I also updated the ky and ky-universal modules, as it seems the error happens at this point, but no effect-.

Context of Use

I try to build a website where users could paste an url link into an input field and the microlink render a preview, here is how I call the module, base on your CodeSandBox example for React:

const LinkPreview = () => (
  <Microlink url={this.state.titleValue === '' ? 'https://microlink.io' : this.state.titleValue} />
);

I am compiling with yarn start and running on a local server, not sure if it's the right way.
I tried to compile with yarn build and I get the same message.

Do you have any idea what I am doing wrong ? :-)

Thank you in advance for your help!

[Kikobeats]

Hello,

What are you using for building things?

I think the error is clear, you need a loader to handle CommonJS files.

BTW, mql is browser ready so ideally you don't need to bundle it:
https://codesandbox.io/s/microlinkmql-lup9y