taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)

Home Page:http://interactjs.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

@interactjs/dev-tools/babel-plugin-prod causes babel to crash

SpudNyk opened this issue · comments

If you have questions about the API that aren't answered in the docs or FAQ, try asking in the Gitter chatroom or on Stackoverflow.

If you've found something that looks like a bug, include a link to a minimal demo on JSFilddle, Codepen with instructions to reproduce the bug with and roughly follow the following issue description format:

Expected behavior

@interactjs/dev-tools/babel-plugin-prod should work as exepected

Actual behavior

Babel crashes with:

Module build failed (from ../node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL]: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\...\node_modules\@interactjs\dev-tools\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. (While processing: C:\..\node_modules\@interactjs\dev-tools\babel-plugin-prod.js)
    at file:///C:/.../node_modules/@interactjs/dev-tools/babel-plugin-prod.js:2:14
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)

System configuration

interact.js version: 1.10.19
Browser name and version: N/A
Operating System: OS X / Windows 11

applying the following diff fixes the behaviour though older nodes might have issues

--- a/babel-plugin-prod.js
+++ b/babel-plugin-prod.js
@@ -1,9 +1,12 @@
 /* global process, __dirname */
-const path = require('path')
+import * as path from 'node:path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 const PROD_EXT = '.prod'
 
-function fixImportSource ({ node: { source } }, { filename }) {
+export function fixImportSource ({ node: { source } }, { filename }) {
   if (shouldIgnoreImport(source)) return
 
   let resolvedShort = ''
@@ -22,7 +25,7 @@ function fixImportSource ({ node: { source } }, { filename }) {
   } catch (e) {}
 }
 
-function babelPluginInteractjsProd () {
+export function babelPluginInteractjsProd () {
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line no-console
     console.warn(
@@ -51,9 +54,9 @@ function shouldIgnoreImport (source) {
   )
 }
 
-module.exports = babelPluginInteractjsProd
+export default babelPluginInteractjsProd;
 
-Object.assign(module.exports, {
+Object.assign(babelPluginInteractjsProd, {
   default: babelPluginInteractjsProd,
   fixImportSource,
 })