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

[vmarquet]

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]

Experiencing the same issue here but only in IE11 & Edge.

Edit: it looks like it can be fixed by adding @babel/plugin-proposal-object-rest-spread in https://github.com/ianstormtaylor/slate/blob/665915214510873351b5136e4afffff76e021024/config/rollup/rollup.config.js#L122

[vmarquet]

I was already using transform-object-rest-spread in my .babelrc:

    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ],

so that's not it.

I also added [email protected], but the problem is still there.

[markogresak]

@vmarquet are you sure that your config is processing node_modules, where you have the problematic part of the code (inside slate-react module)?

[vmarquet]

@markogresak I'm not sure what you mean.

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.

For me, it would make more sense that the problem is in the way you generate the dist file, and not in my setup.

---

One of the problematic lines seems to be https://github.com/ianstormtaylor/slate/blame/217bdd611b08305b2598f7d0bd25d34ed40f2912/packages/slate-react/src/components/editable.tsx#L98 by @eddyw @ianstormtaylor .

In the dist/index.es.js in my node_modules, this converts to:

const Editable = (props) => {
    const { autoFocus, decorate = defaultDecorate, onDOMBeforeInput: propsOnDOMBeforeInput, placeholder, readOnly = false, renderElement, renderLeaf, style = {}, as: Component = 'div', ...attributes } = props;
    const editor = useSlate();

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.

[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.

[rheinj]

@CameronAckermanSEL Did you publish this fix to the version on npm already? If not it would be really great if you could, we are using slate for an electron-based application and after upgrading the version we are seeig the same error when bundling the app.

Many thanks in advance!

[CameronAckermanSEL]

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