"ReferenceError: exports is not defined" when importing a module

[gdelazzari]

Hi, I'm trying to use purs-loader to integrate some PureScript code in my Vue project (created with the latest vue-cli).

My vue.config.json (which allows to modify the Webpack's configuration) looks like this:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('purescript')
      .test(/\.purs$/)
      .use('purs-loader')
      .loader('purs-loader')
      .options({
        src: [
          'src/**/*.purs',
          'bower_components/purescript-*/src/**/*.purs'
        ],
        output: 'output',
        pscIde: false
      })
    
    config.resolve.extensions.add('.purs')
  }
}

I npm installed the packages purescript and purs-loader as dev-dependencies, created a bower.json file with the Purescript packages I needed for testing:

{
  "name": "purescript-webpack-example",
  "private": true,
  "dependencies": {
    "purescript-prelude": "^4.1.0",
    "purescript-arrays": "^5.3.0"
  }
}

and run bower install which completed successfully.

I then created a Test.purs file:

module Test where

import Prelude

data Point = Point { x :: Int, y :: Int }
type Polyline = Array Point

newPoint :: Int -> Int -> Point
newPoint x y = Point { x: x, y: y }

sumPoint :: Point -> Int
sumPoint (Point p) = p.x + p.y

newPolyline :: Int -> Int -> Polyline
newPolyline x y = [newPoint x y, newPoint x y]

and imported and tested it from JS:

import Test from '@/Test.purs'

// ...

let p = Test.newPoint(3)(2)
console.log(p)
console.log(Test.sumPoint(p))

let pl = Test.newPolyline(3)(5)
console.log(pl)

with everything working as expected. Then I introduced this function in the Test.purs file:

import Data.Array (length)

polylineLen :: Polyline -> Int
polylineLen pl = length pl

Webpack compiled succesfully but, now, my app doesn't run anymore in the browser with the following error in the browser console:

ReferenceError: exports is not defined app.js line 915 > eval:13:1
    <anonymous> Array.js:7
    js app.js:915
    __webpack_require__ app.js:767
    fn app.js:130
    <anonymous> Array.purs:3
    purs app.js:927
    __webpack_require__ app.js:767
    fn app.js:130
    <anonymous> Test.purs:3
    purs app.js:4056
    __webpack_require__ app.js:767
    fn app.js:130
    <anonymous> cjs.js:4
    ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& app.js:2223
    __webpack_require__ app.js:767
    fn app.js:130
    <anonymous> App.vue:1
    ./src/App.vue?vue&type=script&lang=js& app.js:4020
    __webpack_require__ app.js:767
    fn app.js:130
    <anonymous> App.vue:1
    vue app.js:4008
    __webpack_require__ app.js:767
    fn app.js:130
    <anonymous> main.js:11
    js app.js:4163
    __webpack_require__ app.js:767
    fn app.js:130
    1 app.js:4345
    __webpack_require__ app.js:767
    <anonymous> app.js:902
    <anonymous> app.js:905

If I click on the error hyperlink app.js line 915 > eval:13:1 on the developer console, I can see that the error refers to line 13 of the Array.js PureScript-transpiled file: which is

// ...
exports.range = function (start) {
  // ...

I don't understand what's happening, I'm not familiar with Webpack at all... what could be wrong? Also why can I succesfully use some functions from Prelude (like the basic operators) but not other functions or functions from other modules? For instance I also can't use show, and clicking on the error on the console takes me to the Show.js file with a similar line that assigns the exports.

Any help would be really appreciated, thank you very much in advance.

[ethul]

Sorry for the delay. I will have to take a closer look at this. Are you able to provide your entire webpack config file?

[gdelazzari]

Sure, by running vue inspect I get the following auto-generated WebPack config, it's pretty long... (almost 1500 lines), sorry about that...

https://pastebin.com/4ELNgu6L

Thank you very much for taking a look at this!

[gdelazzari]

I should add that, after inspecting the configs a bit, I tried adding the bower_components directory to the resolve.modules array without any luck.

Then I tried setting bundle: true in the purs-loader config and that made it work. However I'm not sure if that's what I want. If I'm not mistaken now the PureScript compiler is generating a bundle for me and WebPack is including that as if I wrote a monolithic JavaScript file, right? I would prefer if WebPack could see the different PureScript modules (the ones I write and the ones I import) as different modules and then handle the bundling, so I can split stuff into chunks as I like (hope I'm not saying anything meaningless, as I said I have very little experience and understanding of WebPack).

Anyhow it doesn't feel "right" that the PureScript compiler is bundling stuff when that's WebPack's job.

Do you have any idea about the cause of this behaviour?

Thanks again for your time.

[ethul]

Thanks for the info. I am wondering what version of the purs-loader, Purescript, webpack, etc., you are using. Also, is your project available on GitHub by chance?

[gdelazzari]

My package-lock.json reports the following versions installed:

• webpack: 4.28.4
• purs-loader: 3.6.0
• purescript: 0.13.2
• purescript-installer: 0.2.5

The project isn't on GitHub but I can share a ZIP file of the minimal reproduction project where I've been doing the tests reported above.

I used the Vue CLI to create the project and then added the required dependencies and Webpack configuration as I described in the first post of this thread.

Here is the project: vuepurstest.zip

I'm really wondering what could be wrong at this point... I guess there's something weird in the scaffolding that the Vue CLI did at the beginning. I tried looking around but I couldn't figure out anything useful.

Thanks again for your time.

[gdelazzari]

Hi, did you happen to find anything that could be related to why this still happens?

[swuecho]

have same problem. purs-loader only work for naive cases.

I guess better module support in purscript will solve the problem. https://github.com/purescript/purescript/issues/3613

without purs-loader,

If I change themodule.exports = to export default in the the bundled module using spago, can import without any problem.

https://github.com/webpack/webpack/issues/3997

all kinds of js module confuse me so much, just provide some infor I gathered. hope this is useful.

[andys8]

I ran into this issue today. I tried a view things, regarding webpack configuration, and order of imports. I'm still not sure what causes this issue. Webpack Devserver and Tests are working fine, but production build lead to an output with Uncaught ReferenceError: exports is not defined

The one thing that could lead to this issue, is that the project I'm working on is currently a mess, where create-react-app is patched with purs-loader. And TypeScript is importing PureScript, which itself is importing foreign JavaScript and again a mix PureScript and TypeScript.

Workaround: Using https://github.com/pelotom/purescript-easy-ffi to inline javascript as string. Temporary resolves the error.