issue importing spica / localsocket / pjax-api?

[Flobin]

I’m trying to use pjax-api by importing it and its dependencies into one js file. However, I’m getting the following error in the console:

_prelude.js:1Uncaught Error: Cannot find module './src/import'
    at s (http://localhost:8000/static/articles/build/js/main.js:1:148)
    at http://localhost:8000/static/articles/build/js/main.js:1:305
    at http://localhost:8000/static/articles/build/js/main.js:14916:55
    at Array.map (native)
    at define (http://localhost:8000/static/articles/build/js/main.js:14903:33)
    at Object.<anonymous> (http://localhost:8000/static/articles/build/js/main.js:18125:1)
    at Object.5._process (http://localhost:8000/static/articles/build/js/main.js:18139:4)
    at s (http://localhost:8000/static/articles/build/js/main.js:1:254)
    at http://localhost:8000/static/articles/build/js/main.js:1:305
    at Object.8.jquery (http://localhost:8000/static/articles/build/js/main.js:66223:14)
    at s (http://localhost:8000/static/articles/build/js/main.js:1:254)
    at e (http://localhost:8000/static/articles/build/js/main.js:1:425)
    at http://localhost:8000/static/articles/build/js/main.js:1:443

The way that I'm importing pjax-api, spica, and localsocket is like this:

import 'spica';
import 'localsocket';
import Pjax from 'pjax-api';

Is this not supported? What is the proper way to import Pjax fully?

More code available in this gist.

[falsandtru]

Perhaps you need to use global variables, such as spica, localsocket and pjax-api for endpoints. I am currently not using Browserify but I'm considering using it.

[Flobin]

Thank you for the quick reply! So like this?

import spica from 'spica';
import localsocket from 'localsocket';
import Pjax from 'pjax-api';

It seems I’m still getting the same error.

[falsandtru]

https://github.com/thlorenz/browserify-shim may resolve your problem.

[Flobin]

So I’m using browserify-shim and I’ve set it up like this:

main.js:

var spica = require('spica');
var localsocket = require('localsocket');
import Pjax from 'pjax-api';

package.json:

"browserify": {
  "transform": [
    [
      "babelify",
      {
        "presets": [
          "es2015"
        ]
      }
    ],
    "browserify-shim"
  ]
},
"browserify-shim": {
  "./node_modules/spica/dist/spica.min.js": "global:spica",
  "./node_modules/localsocket/dist/localsocket.min.js": "global:localsocket"
}

gulpfile.js:

gulp.task('scripts', function () {
  var b = browserify({
    entries: ['src/scripts/modernizr.js', 'src/scripts/main.js'],
    debug: true
  }).transform(babelify, { presets: ["latest"] });

  return b.bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
        // Add transformation tasks to the pipeline here.
        // .pipe(uglify())
        .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('build/js/'));
});

Now I get the error: pjax-api.js:24Uncaught Error: Cannot find module 'spica'. I guess this is not the correct way to require or import spica/localsocket?

[falsandtru]

I published the new version now. pjax-api has been using Browserify since 3.4.0, also the depended libraries too. You should be able to build it.

[Flobin]

@falsandtru thank you so much for all your help and hard work!

I’ve updated the above code, still using browserify-shim, but with the new versions of spica, localsocket, and pjax-api. Main.js only has the import statement for pjax-api. The import seems to be working correctly!

However, I’m getting a different error now:

tinymce.js:41629 Uncaught TypeError: _pjaxApi2.default is not a constructor
at Object.5.jquery (http://localhost:8000/static/articles/build/js/main.js:60706:1)
at s (http://localhost:8000/static/articles/build/js/main.js:1:254)
at e (http://localhost:8000/static/articles/build/js/main.js:1:425)
at http://localhost:8000/static/articles/build/js/main.js:1:443

This is main.js.

[falsandtru]

Thanks for the report. That is because __esModule flag is missing. I fixed it in 3.4.1. The same is true for other depended libraries.

[Flobin]

@falsandtru thank you again!

I’ve updated to the new versions, but am still getting an error:

My code and the error are here and the full main.js is here. Maybe it's an issue with how I'm doing the require statements?

[falsandtru]

Probably you need to update other libraries such as spica and localsokcet. What version of libraries are you using?

[Flobin]

I’m using these versions:

Robins-MacBook-Pro:articles robin$ npm update spica localsocket pjax-api
togethere@1.0.0 /Users/robin/work/2016-06-04_togethere/togethere/articles/static/articles
├── localsocket@0.5.1
├── pjax-api@3.4.1
└── spica@0.0.43

(forgot to update package.json in that earlier gist, sorry!)

[falsandtru]

Now you cannot use browserify-shim for spica and localsocket. So you need to remove the following code.

  "browserify-shim": {
    "./node_modules/spica/dist/spica.min.js": "global:spica",
    "./node_modules/localsocket/dist/localsocket.min.js": "global:localsocket"
  }

[Flobin]

I’ve uninstalled browserify-shim and made sure it’s not being used, but it looks like I’m still getting the same issue... code here.

Sorry to be such a pain in the ass. Maybe I’m doing things wrong in the way I require the libraries?

[falsandtru]

Seems like this is a difficulty of Browserify. We cannot directly bundle another browserified library. If you know another library which bundled browserified library, let me know that library.