Develop Reference

How to import nodejs module "module" via es6 import to create "require" function with "createRequire" in order to use node's "require"?

I am writing a JavaScript es6 module which contains "Mocha" test-cases which test a JavaScript es6 module containing the actual functionality of my app.
I am trying to import nodejs module "module" via es6 import like so:
import { createRequire } from 'module';
Next I create a "require" function by calling "createRequire":
const require = createRequire(import.meta.url);
Afterwards I try to use "require" to import nodejs modules:
const chai = require('chai');
const assert = chai.assert;
I put that all together in a HTML file, started a web-server and opened the HTML file in the browser.
Unfortunately, the first line gives me an error in the console of the Browser Firefox:
TypeError: Error resolving module specifier: module
The browser Chromium gives me the following error message:
Uncaught TypeError: Failed to resolve module specifier "module". Relative references must start with either "/", "./", or "../".
Actually, giving relative references is not working either:
I installed the nodejs module "module" (npm install module) and used a relative path to that module. Unfortunately, the browser does not know how to load the module because no concrete entrypoint is given.
I just tried stick to the manual but had no luck:
https://nodejs.org/api/modules.html#modules_module_createrequire_filename
What do you think? How should I change my code so that this works?
Many thanks in advance for your valuable advice.

I hope you've installed the module using 'npm install module' command, try using commonJS pattern and include the module in the following way
const { createRequire } = require('module');

require() is used to load files in node, and module is a node module.
These things don't exist in browsers.
You do these things, and running mocha tests in node. There should be no browser, just a command line.

Create React App with node_module that imports css

I have not dealt a lot with writing modules and am using lerna for the first time, and could use a lift from somebody more familiar with these subjects.
I am converting our existing babel hooked common component directory into a lerna module. The shared component module is currently bundled with rollup. I am stuck on a component which imports css from a node_module like so: import 'slick-carousel/slick/slick.css';
The cjs module generated by rollup does require('slick-carousel/slick/slick.css') as I would expect, however the create-react-app which makes use of the in house module does not hook the require properly. When I run the app I get an error where it tries to compile the .css as code:
slick-carousel/slick/slick.css:2
.slick-slider
^
SyntaxError: Unexpected token .
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
...
How do I get the css import in the module to hook properly into the app?
Is there a better way to handle hooking the module for development into our create-react-app packages using lerna?

Uncaught SyntaxError: Unexpected identifier when importing into rails app

I'm trying to write jquery inside a rails application. I've imported jquery into the app, but it wasn't recognizing the $. At the top of the .js file I"m working in I imported:
import $ from 'jquery'
window.$ = $
but I get the unexpected identifier error. The error points to the import line.

Rails is not using webpack or other module-aware and es6-aware build tools (until webpacker).
If you want to use modules, either
use webpacker (which needs a specific directory structure), or
use a UMD-like module (the ones that declare dependencies in a way that's compatible with require.js, commonjs and globals) and browserify.
Read more on UMD modules here https://dontkry.com/posts/code/browserify-and-the-universal-module-definition.html
On webpacker, for instance here https://medium.com/statuscode/introducing-webpacker-7136d66cddfb

Webpack 2 - import throws error on postcss.config.js and other js files

I have a project with Webpack 2, PostCSS, ES2015 (Babel) and Jest.
Right now, all ES2015 is working correctly on src/index.js and files directly connect to src/index.js.
But in some files it breaks the code. Example, on mixins/index.js, I have this:
const postcss = require('postcss');
And when I change it to this:
import postcss from 'postcss';
It throws this error:
Module build failed: SyntaxError: Unexpected reserved word
The same happen in postcss.config.js.
What am I missing on Webpack configuration to make it work?
You can check the repository here. These are the files I talked about: postcss.config.js and mixins/index.js

PostCSS requires your files to be in dedicated CSS files instead of *.js files like they are in your project.
If you want to use PostCSS with JavaScript (like with ReactJS inline-styles) you need the postcss-js parser which requires an additional loader and a naming style like *.style.js so that webpack doesn't confuse the JavaScript styles with regular JavaScript files which are processed via Babel.

Using node modules with Rollup to build web client

I'm trying to build a react application using rollup instead of browserify and babel. I realize I need to use the rollup-plugin-babel to transpile jsx, but when I tell rollup the format is iife, the final page loads with an error:
Uncaught ReferenceError: React is not defined
What do I need to add to the rollup.config.js to include the node modules I've installed in package.json in my final build?

Two options:
Include React as a separate <script> tag before your app bundle
Include rollup-plugin-node-resolve in your config file, to pull in dependencies from your node_modules folder.
If you take the second route you'll also need rollup-plugin-commonjs (to convert the CommonJS module into an ES module). I think you would also need to add import * as React from 'react' to each module that contained JSX, otherwise you'll continue to get the ReferenceError.
Note: you might be able to use rollup-plugin-buble to transpile JSX. It's similar to the Babel plugin but much faster (though it doesn't transpile every ES2015 feature)