interact.js
interact.js copied to clipboard
@interactjs/dev-tools/babel-plugin-prod causes babel to crash
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,
})