Having a heck of a time getting it to run

[mark8044]

Im having a heck of a time getting this to run.

// this imports the default parser
import bbCodeParser from 'js-bbcode-parser';
// this import the class constructor of the parser
import BBCodeParser from 'js-bbcode-parser/src/index.js';

// use to create a clean parser
const parserA = new BBCodeParser({});

// configure the default parser with
bbCodeParser.setCodes({});

Leads to error:

Uncaught SyntaxError: Cannot use import statement outside a module

After some googling it seems I might need require.js?

Tried it and after more errors I get to this point:

         require(['/js-bbcode-parser/src/index.js'], function (BBCodeParser) {
const parser = new BBCodeParser({
    '\\[br\\]': '<br>'
});
alert(parser.parse('This is a text[br]with HTML Break.'));
            });

Which then brings me to error:

Uncaught TypeError: BBCodeParser is not a constructor

Totally confused here. Is this an issue that I need to have node.js installed on a server? Never used it before and prefer not to

[DasRed]

Hey,

you don't need requirejs. You have to import it as ES module. If your structure does not support modules, you should use the commonjs import.

File A with ES module import:

• this can be used in node.js, but type has do be "module" in package.json, see https://nodejs.org/api/packages.html#type
• this can be used in browser, but your javascript file has to be of type "module", see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html

  // this imports the default parser
  import bbCodeParser from 'js-bbcode-parser';
  // this import the class constructor of the parser
  import BBCodeParser from 'js-bbcode-parser/src/index.js';

File B with commonjs import:

• this can be used in node.js, but type has do be "commonjs" in package.json, see https://nodejs.org/api/packages.html#type
• this can not be used in browser

  // this imports the default parser
  const bbCodeParser = require('js-bbcode-parser');
  // this import the class constructor of the parser
  const BBCodeParser = require('js-bbcode-parser/src/index.js');

Bye :)

[mark8044]

Thank you for the direction, I think there is some progress. Since I do not use node.js, It sounds like File A -> Bullet 2 is the correct one for me

Doing:

// this imports the default parser
const bbCodeParser = require('js-bbcode-parser');
// this import the class constructor of the parser
const BBCodeParser = require('js-bbcode-parser/src/index.js');

I end up with the following browser error:

Uncaught SyntaxError: Cannot use import statement outside a module

So then doing what you said it sounds like my core JS that does the module load, itself must be a module, so I added type="module" to my core JS file

<script type="module" src="index.js"></script> <--- index.js does: import bbCodeParser from 'js-bbcode-parser';

Now I end up with error:

Uncaught SyntaxError: Unexpected identifier 'bbCodeParser'

In case it matters, this is all done in the context of jQuery:

 $(document).ready(function() {

//this imports the default parser
import bbCodeParser from '/forums/bpeditor/htmlbbcode/js-bbcode-parser';
//this import the class constructor of the parser
import BBCodeParser from '/forums/bpeditor/htmlbbcode/js-bbcode-parser/src/index.js';

.... etc
});

[mark8044]

Ok it looks like loading all this inside jQuery was the issue, I just moved the import lines outside the document.ready and it all works.

Thank you on the education with modules! 👍 🥇

[DasRed]

You are welcome.

imports are always at the top of a module and out of any blocks.

But you can use dynamic imports, if you want to import something inside a block

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import