interact.js icon indicating copy to clipboard operation
interact.js copied to clipboard

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

Open SpudNyk opened this issue 1 year ago • 0 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,
 })

SpudNyk avatar Oct 23 '23 20:10 SpudNyk