Module parse failed: Unexpected token

[masudhossain]

Recently got this bug randomly when trying to deploy to production. Says the error is involving react-select.

ERROR in ./node_modules/@floating-ui/dom/dist/floating-ui.dom.esm.js
Module parse failed: Unexpected token (306:11)
You may need an appropriate loader to handle this file type.
|   }
| 
|   return { ...rect,
|     x: rect.x - scroll.scrollLeft + offsets.x,
|     y: rect.y - scroll.scrollTop + offsets.y
 @ ./node_modules/react-select/dist/react-select.esm.js 23:0-26
 @ ./app/javascript/components/Chatrooms/ActiveProjects.js
 @ ./app/javascript/components ^\.\/.*$
 @ ./app/javascript/packs/server_rendering.js

[Methuselah96]

Is this with Webpack?

[masudhossain]

Webpacker

[Methuselah96]

What version of Webpack are you using? What version of acorn do you have installed in your node_modules (check your lock file)? It seems likely that your Webpack/acorn versions are too old to support the rest operator. See https://github.com/webpack/webpack/issues/5548 for more details.

Let me know if upgrading those resolves the issue for you or if you have more questions.

[masudhossain]

We're not on webpack, we're on webpacker.

On Sun, Oct 16, 2022 at 2:43 PM Nathan Bierema @.***> wrote:

What version of Webpack are you using? What version of acorn do you have installed in your node_modules (check your lock file)? It seems likely that your Webpack/acorn versions are too old to support the rest operator. See webpack/webpack#5548 https://github.com/webpack/webpack/issues/5548 for more details.

Let me know if upgrading those resolves the issue for you or if you have more questions.

— Reply to this email directly, view it on GitHub https://github.com/JedWatson/react-select/issues/5380#issuecomment-1280028947, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD6YNVH3NTAQXATXH3JWJODWDREFJANCNFSM6AAAAAARE5BCIM . You are receiving this because you authored the thread.Message ID: @.***>

-- regards, Masud Hossain CoFounder | CEO @ Queue https://queue.gg Discord: Masud#0001

[Methuselah96]

It looks like webpacker uses webpack under-the-hood (I'm not familiar with it). Can you check what version of webpack and acorn you have in your lock file?

[jameswyse]

Also seeing this error, react-select is used by a plugin for Sanity CMS, which is built with webpack.

It has the following versions in the lockfile: webpack 3.12.0 acorn 8.8.0

Failed to compile.

Error in ./node_modules/@floating-ui/dom/dist/floating-ui.dom.esm.js
Module parse failed: Unexpected token (306:11)
You may need an appropriate loader to handle this file type.
|   }
|
|   return { ...rect,
|     x: rect.x - scroll.scrollLeft + offsets.x,
|     y: rect.y - scroll.scrollTop + offsets.y
 @ ./node_modules/react-select/dist/react-select.esm.js 23:0-26
 @ ./plugins/tags/components/Input.tsx (part:tags/components/input)
 @ ./plugins/tags/schemas/tags.ts
 @ ./plugins/tags/schemas/tags.ts (all:part:@sanity/base/schema-type)
 @ ./schemas/schema.ts (part:@sanity/base/schema)
 @ ./node_modules/@sanity/default-layout/lib/schemaErrors/SchemaErrorReporter.js
 @ ./node_modules/@sanity/default-layout/lib/defaultLayout/DefaultLayout.js
 @ ./node_modules/@sanity/default-layout/lib/defaultLayout/index.js
 @ ./node_modules/@sanity/default-layout/lib/Root.js (part:@sanity/base/root)
 @ ./node_modules/@sanity/base/lib/components/SanityRoot.js (part:@sanity/base/sanity-root)
 @ ./node_modules/@sanity/server/lib/browser/entry-dev.js
 @ multi ./node_modules/@sanity/server/lib/browser/entry-dev.js

which occurs on import:

import CreatableSelect from 'react-select/creatable'
import Select from 'react-select'

[Methuselah96]

@jameswyse Can you run npm ls acorn (or yarn why acorn) and paste the result here?

[jameswyse]

yarn why v1.22.19
[1/4] 🤔  Why do we have the module "acorn"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "acorn@8.8.0"
info Has been hoisted to "acorn"
info Reasons this module exists
   - Hoisted from "jsdom#acorn"
   - Hoisted from "@sanity#core#terser#acorn"
   - Hoisted from "eslint#espree#acorn"
info Disk size without dependencies: "488KB"
info Disk size with unique dependencies: "488KB"
info Disk size with transitive dependencies: "488KB"
info Number of shared dependencies: 0
=> Found "@sanity/core#acorn@6.4.2"
info Reasons this module exists
   - "@sanity#core#jsdom" depends on it
   - Hoisted from "@sanity#core#jsdom#acorn"
   - Hoisted from "@sanity#core#jsdom#acorn-globals#acorn"
info Disk size without dependencies: "1.17MB"
info Disk size with unique dependencies: "1.17MB"
info Disk size with transitive dependencies: "1.17MB"
info Number of shared dependencies: 0
=> Found "acorn-globals#acorn@7.4.1"
info This module exists because "jsdom#acorn-globals" depends on it.
info Disk size without dependencies: "1.19MB"
info Disk size with unique dependencies: "1.19MB"
info Disk size with transitive dependencies: "1.19MB"
info Number of shared dependencies: 0
=> Found "webpack#acorn@5.7.4"
info This module exists because "@sanity#core#@sanity#server#webpack" depends on it.
info Disk size without dependencies: "2.01MB"
info Disk size with unique dependencies: "2.01MB"
info Disk size with transitive dependencies: "2.01MB"
info Number of shared dependencies: 0
=> Found "acorn-dynamic-import#acorn@4.0.13"
info This module exists because "@sanity#core#@sanity#server#webpack#acorn-dynamic-import" depends on it.
info Disk size without dependencies: "672KB"
info Disk size with unique dependencies: "672KB"
info Disk size with transitive dependencies: "672KB"
info Number of shared dependencies: 0
✨  Done in 0.34s.

Seems there's a number of versions installed, webpack seems to be using 5.7.4

[Methuselah96]

I wonder if it's using acorn@4.0.13 through acorn-dynamic-import which Webpack 3 also depends on. It seems advisable for @sanity/server to consider upgrading the version of Webpack they depend on, but I'm not sure if that would fix it for sure or not without looking into it more.

[jameswyse]

Yeah it's a tricky one.

I have found a workaround for my specific use by overriding their webpack config to exclude the @floating-ui libraries from the babel rule

config.module.rules[0].exclude = /node_modules\/(?!@floating-ui)/;

@masudhossain something similar may work for you