Imported script does not compile with Babel-CodePudding

I'm struggling to integrate an external script in my ReactJS application.

Let's assume this external script is called myScript.js. I am pretty sure this detail is irrelevant, but this script is generated from OCaml bytecode using Js_of_ocaml.

myScript.js works as expected when executed with node, i.e.,

$ node myScript.js

However, when I import this file to my ReactJS application, using either require or import, and execute my application with

$ npm start

It does not succeed.

ERROR in ./src/myScript.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Projects/myProject/src/myScript.js: Line must be greater than or equal to 1, got 0
    at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/Projects/myProject/node_modules/source-map/lib/source-map-consumer.js:539:13)
    at BasicSourceMapConsumer.SourceMapConsumer_allGeneratedPositionsFor [as allGeneratedPositionsFor] (/Projects/myProject/node_modules/source-map/lib/source-map-consumer.js:201:22)
    at /Projects/myProject/node_modules/@babel/core/lib/transformation/file/merge-map.js:184:27
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/Projects/myProject/node_modules/source-map/lib/source-map-consumer.js:155:14)
    at buildMappingData (/Projects/myProject/node_modules/@babel/core/lib/transformation/file/merge-map.js:145:12)
    at mergeSourceMap (/Projects/myProject/node_modules/@babel/core/lib/transformation/file/merge-map.js:19:17)
    at generateCode (/Projects/myProject/node_modules/@babel/core/lib/transformation/file/generate.js:72:39)
    at run (/Projects/myProject/node_modules/@babel/core/lib/transformation/index.js:53:33)
    at run.next (<anonymous>)
 @ ./src/TimeGrid.js 15:18-60
 @ ./src/App.js 16:0-34 188:45-53
 @ ./src/index.js 7:0-24 11:33-36

ERROR in src/myScript.js
  Line 1026:29:   Expected an assignment or function call and instead saw an expression
no-unused-expressions
  Line 2033:15:   React Hook "useKaratsuba" is called in function "BigInteger.prototype.multiply" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks
  Line 2558:29:   Expected an assignment or function call and instead saw an expression                                                                                                                                                                                                    
no-unused-expressions
  Line 4269:7:    Expected an assignment or function call and instead saw an expression                                                                                                                                                                                                    
no-unused-expressions
  Line 30953:17:  Unexpected use of 'event'                                                                                                                                                                                                                                                
no-restricted-globals
  Line 30963:26:  Unexpected use of 'event'                                                                                                                                                                                                                                                
no-restricted-globals

Search for the keywords to learn more about each error.

webpack 5.66.0 compiled with 2 errors and 2 warnings in 118769 ms

I'm no expert, but considering that I set up this application with create-react-app, and that the script works just fine with node, I assume that either webpack or babel are transpiling the script, and this is probably why the errors arise. Hence, I try to avoid the transpilation of myScript.js by excluding it from babel and webpack using the config files, as described in Babel exclude and Module Rule.exclude.

I know that since I set up the application with create-react-app, I need to either run npm eject or to override the default config somehow. To achieve this without ejecting the application, I use customize-cra. First, I try to exclude it from babel:

const { override, babelExclude, addBabelPresets } = require('customize-cra')
const path = require('path');

module.exports = override(
  babelExclude([path.resolve("./src/myScript.js")]),
  addBabelPresets(["@babel/env", { modules: false }])
);

Unfortunately, the error persists. Subsequently, I try to add an exclude rule to webpack:

const { override, babelExclude, addBabelPresets, addWebpackModuleRule } = require('customize-cra')
const path = require('path');

module.exports = override(
  babelExclude([path.resolve("./src/myScript.js")]),
  addBabelPresets(["@babel/env", { modules: false }]),
  addWebpackModuleRule({ exclude: path.resolve("./src/myScript.js") })
);

but this apparently disables the transpilation step for all files altogether:

ERROR in ./src/index.js 10:2
Module parse failed: Unexpected token (10:2)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|
| ReactDOM.render(
>   <React.StrictMode>
|     <App />
|   </React.StrictMode>,

webpack 5.66.0 compiled with 1 error in 2317 ms

What can I do next to make this work?

CodePudding user response：

Well, I ended up realizing that adding myScript.js as an external in my webpack config would do the trick. However, I was unable to change my config file and make it work.

Instead, I simply added a script tag to the head of public/index.html, i.e.,

<script
    src="myScript.js"
    type="text/javascript">
</script>