Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type

What’s the current behavior?

I simply added the library to my package.json, and now I can’t even bundle my code:

Seems like it comes from the following files:

➜  node_modules master✗ ack 'autoFocus, decorate = defaultDecorate, onDOMBeforeInput'
slate-react/dist/slate-react.js
1215:      const { autoFocus, decorate = defaultDecorate, onDOMBeforeInput: propsOnDOMBeforeInput, placeholder, readOnly = false, renderElement, renderLeaf, style = {}, as: Component = 'div', ...attributes } = props;

slate-react/dist/index.js
579:    const { autoFocus, decorate = defaultDecorate, onDOMBeforeInput: propsOnDOMBeforeInput, placeholder, readOnly = false, renderElement, renderLeaf, style = {}, as: Component = 'div', ...attributes } = props;

slate-react/dist/index.es.js
572:    const { autoFocus, decorate = defaultDecorate, onDOMBeforeInput: propsOnDOMBeforeInput, placeholder, readOnly = false, renderElement, renderLeaf, style = {}, as: Component = 'div', ...attributes } = props;

Slate: 0.57.1 Browser: Chrome 79 & Firefox 72 OS: macOs

My package.json:

    "@rails/webpacker": "3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "react-dom": "^16.10.2",
    "react-hot-loader": "4",
    "ts-loader": "3.5.0",
    "typescript": "^3.7.2",
    "webpack-dev-server": "2.11.2",
    "webpack-merge": "^4.1.2",
    "react": "^16.10.2",
    "slate": "^0.57.1",
    "slate-react": "^0.57.1",

My .babelrc:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react",
    "stage-2"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ],
    "transform-runtime"
  ]
}

[kamilmielnik]

I’m using tens of libraries in my bundle, they are all in my node_modules, and they all work perfectly well with my current webpack/babel setup. So yes, I’m pretty sure my config is processing the node_modules folder to include the code from those libraries into my bundle.

Most likely babel is not processing your node_modules. And it should not. Libraries have the responsibility of providing a valid JS code in the package.

---

as: Component = ‘div’ Is that valid javascript? It looks like typescript type annotations wrongly kept in a js file. If that’s the case, the problem is in your build system.

It is valid JS according to latest ECMAScript specs. The problem is that not all browsers support latest ECMAScript specs. IE does not support destructuring assigments at all.

Edge does not support “Rest in objects” ( ...attributes part). See browser compatibility table at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

---

I think I found what the problem is. https://github.com/ianstormtaylor/slate/blob/217bdd611b08305b2598f7d0bd25d34ed40f2912/config/rollup/rollup.config.js#L92

It should specify tsx extension as well.

[cameracker]

Nope. Im not planning on releasing in part because there are some void inline selection bugs.