Unknown file extension ".css"

[JonathanReeve]

I'm probably doing something wrong with this, but I copied and pasted the three lines of code from the readme into an index.js:

import { Recogito } from '@recogito/recogito-js';
import '@recogito/recogito-js/dist/recogito.min.css';
const r = new Recogito({ content: 'my-content' });

But running it with node index.js complains: Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

So I rename it to index.mjs and run node index.mjs, and get: Unknown file extension ".css" for /home/jon/Code/recogito-test/node_modules/@recogito/recogito-js/dist/recogito.min.css

I figure there's some additional configuration needed to the node/npm project, that's not included in the readme?

[rsimon]

Hi, that's not a RecogitoJS-specific issue. You need to configure your build, so it can handle CSS files: https://webpack.js.org/loaders/css-loader/

Also, renaming to mjs won't help I think. You'll probably have to set type to module in your package.json file. See here: https://stackoverflow.com/questions/63588714/node9374-warning-to-load-an-es-module-set-type-module

[JonathanReeve]

The part that's a RecogitoJS-specific issue is that the README.md doesn't contain a minimum viable example. Even with the stackoverflow answer, this is as far as I can get:

1. Create an index.js with these contents:

   import { Recogito } from '@recogito/recogito-js';
   import '@recogito/recogito-js/dist/recogito.min.css';
   const r = new Recogito({ content: 'my-content' });

2. Create a package.json file with the contents {"type": "module"}
3. Install webpack? And css-loader? npm install --save-dev webpack css-loader
4. Add a webpack.config.js with these contents:

   module.exports = {
   module: {
   rules: [
     {
       test: /\.css$/i,
       use: ["style-loader", "css-loader"],
     },
   ],
   },
   };

5. Run node --experimental-modules index.js

But even then, it still fails with the error "Unknown file extension '.css'".

It'd be great if you could edit README.md with a minimum viable example that can get Recogito working with npm.

[rsimon]

Projects and tech stacks differ a lot, so it's always a bit of a moving target keeping things up to date. But I agree it's under-documented due to lack of time.

Here's a Webpack project with a working build. (React, i.e. will probably contain lots of stuff not relevant to you. But hope it helps.)

https://github.com/LvanWissen/ga-probate-annotate

If you figure it out, a PR on the Readme would be great.

[rsimon]

PS: not sure if this was a typo but the 'i' at the end of your RegEx seems wrong. Could this be related?