fossamagna / gas-webpack-plugin

Webpack plugin for Google Apps Script
171 stars 14 forks source link

Error ReferenceError: module is not defined (anonymous) @ echo:gs.1 #717

Open freddieventura opened 2 years ago

freddieventura commented 2 years ago

Hi there,

Thanks for your resource first off. I'm trying to set it up following the instructions but I am unable to do so as I end up having a compilation error in GAS I had to modify some things in what you were doing in order to sort out my own way, such as installing .

Mainly I installed it the following way (note I'm using clasp)

mkdir messing06
cd messing06/
clasp create --title "messing06"
npm init -y
npm install gas-webpack-plugin
npm install webpack-cli
npm install webpack
vim package.json

On there I

    "build": "webpack --mode production"

The rest of the files are just as in the example vim echo.js

module.exports = function(message) {
  return message;
}

vim main.js

var echo = require('./echo');
/**
 * Return write arguments.
 */
global.echo = echo;

vim webpack.config.json

const GasPlugin = require("gas-webpack-plugin");
module.exports = {
  context: __dirname,
  entry: "./main.js",
  output: {
    path: __dirname ,
    filename: 'Code.gs'
  },
  plugins: [
    new GasPlugin()
  ]
}

I proceed to build

npm run build

Which generates the Code.gs that I end up clasp push to google

Unfortunatelly I get the aforementioned error when Running it from the Website

Error ReferenceError: module is not defined (anonymous) @ echo:gs.1

Any ideas?

Here you have a sum up of the process. Thank you!!

https://asciinema.org/a/rC1So5vdpTGAHJVQx34k0OSq7

fossamagna commented 2 years ago

Hey @freddieventura. I assume cause of error that echo.js(echo.gs) be pushed by clasp push.

We believe that if you create a .claspignore with the following contents and ignore everything except Code.gs and appscript.json, the error will not occur.

**/**
!Code.gs
!appsscript.json

See: https://github.com/google/clasp#ignore-file-claspignore

freddieventura commented 2 years ago

Thank you for your response @fossamagna . Now is looking better but I still get

Error
Script function not found: echo
freddieventura commented 2 years ago

My Code.gs gets rendered in a different way than the example one.

This is what I get

function echo() {
}/******/ (() => { // webpackBootstrap
/******/    var __webpack_modules__ = ({

/***/ 696:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

/* module decorator */ module = __webpack_require__.nmd(module);
module.export = function (message) {
    return message;
}

/***/ })

/******/    });
/************************************************************************/
/******/    // The module cache
/******/    var __webpack_module_cache__ = {};
/******/    
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/        // Check if module is in cache
/******/        var cachedModule = __webpack_module_cache__[moduleId];
/******/        if (cachedModule !== undefined) {
/******/            return cachedModule.exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = __webpack_module_cache__[moduleId] = {
/******/            id: moduleId,
/******/            loaded: false,
/******/            exports: {}
/******/        };
/******/    
/******/        // Execute the module function
/******/        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/    
/******/        // Flag the module as loaded
/******/        module.loaded = true;
/******/    
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/    
/************************************************************************/
/******/    /* webpack/runtime/global */
/******/    (() => {
/******/        __webpack_require__.g = (function() {
/******/            if (typeof globalThis === 'object') return globalThis;
/******/            try {
/******/                return this || new Function('return this')();
/******/            } catch (e) {
/******/                if (typeof window === 'object') return window;
/******/            }
/******/        })();
/******/    })();
/******/    
/******/    /* webpack/runtime/node module decorator */
/******/    (() => {
/******/        __webpack_require__.nmd = (module) => {
/******/            module.paths = [];
/******/            if (!module.children) module.children = [];
/******/            return module;
/******/        };
/******/    })();
/******/    
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
var echo = __webpack_require__(696);
__webpack_require__.g.echo = echo;

})();

/******/ })()
;
fossamagna commented 2 years ago

@freddieventura Line 9 of Code.gs assigns a function to module.export. The correct assignment is module.exports; check to ensure that you are assigning it to module.exports in echo.js.