We Keep Coding

Cannot use exported classes in webpack configuration

I need to have multiple configurations of webpack#5.
I wanted to create WebpackBuilder class that will be responsible for creating that webpack configuration.
So I created that file:
export default class WebpackBuilder {
test() {
console.log('Test');
}
}
When I import that file using const WebpackBuilder = require('./webpack.builder'); I got errors:
[webpack-cli] C:\strony\www\polskieszlaki_new\strony\webpack.builder.js:3
export default class WebpackBuilder {
^^^^^^
SyntaxError: Unexpected token 'export'
When using import WebpackBuilder from './webpack.builder';
[webpack-cli] C:\strony\www\polskieszlaki_new\strony\webpack.blog.config.js:2
import WebpackBuilder from './webpack.builder';
^^^^^^
SyntaxError: Cannot use import statement outside a module
My webpack command is webpack --mode=production --config webpack.blog.config.js

Looks like you imported an esm module into your configuration file which is written in cjs style.
You have to turn your esm module to cjs:
class WebpackBuilder {
test() {
console.log('Test');
}
}
module.exports = WebpackBuilder;
NOTE: You can also find out more languages to write the configuration file here: https://webpack.js.org/configuration/configuration-languages/

Typescript does not load file with same name as parent folder

I have such files:
app.ts and config/config.ts
When from app.ts I try to import or require config:
import './config/config';
config file completely ignored(code inside config/config.ts is not executed) and no error occur (such as no module found), but If I rename config.ts for example to config-loader.ts and try to import config/config-loader - this works perfectly.
Can someone explain why I can't use file same name as parent folder to load this file later?
UPD:
here is content of app.ts file
import {foo} from './config/config';
console.log('from app');
console.log(foo);
./config/config.ts:
console.log('test from config');
export const foo = 'bar';
app is run with
ts-node -r tsconfig-paths/register app.ts
in console after run I see:
from app
undefined

Try to import an exported module from that file.
import {Config} from './config/config';
where Config is your exported module.
You can also use the JS way like
const config = require("./config/config")
but you will lose the typings.
In your case, the below means run a script.
import './config/config';
runs the script 'config'.

Could not find a declaration file for module. '/path/to/module-name.js' implicitly has an 'any' type

I am going through the Gatsby.js tutorial and in tutorial two, you have to import some fonts. When I try to import theme lawton I see this error under import lawtonTheme from "typography-theme-lawton";
I first did npm install --save typography-theme-lawton
Could not find a declaration file for module 'typography-theme-lawton'. '/Users/react/tutorial-part-two/node_modules/typography-theme-lawton/dist/index.js' implicitly has an 'any' type.
Try `npm install #types/typography-theme-lawton` if it exists or add a new declaration (.d.ts) file containing `declare module 'typography-theme-lawton';`
This is my typography.js file:
import Typography from "typography";
//import bootstrapTheme from " typography-theme-bootstrap";
import lawtonTheme from "typography-theme-lawton";
const typography = new Typography(lawtonTheme);
//const typography = new Typography({ baseFontSize: "18px" });
//const typography = new Typography(bootstrapTheme);
export default typography;
This is my gatsby-config.js file:
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography.js`
}
}
]
};
Also in the gatsby-config file, the word module is underline and this note shows:
[ts] File is a CommonJS module; it may be converted to an ES6 module. [80001]
I also tried npm install #types/typography-theme-lawton but it gave me errors

Based on your your problem，I guess you are using typescript, and the project can't find the ts module.
You need to install ts files.Try this:
npm install —-save #types/.....
Or, you can add a d.ts file in your project somewhere, and add the above in the file.
declare module typography-theme-lawton
[ts] File is a CommonJS module; it may be converted to an ES6 module. [80001]
I assume you are using VSCode.Add this in the setting to enable it:
"javascript.suggestionActions.enabled": false
PS: It's just a suggestion,so you can just ignore this.

How to import "old" ES5 code in ES6

I have an ES6 application (with Babel 6.5 and Webpack) and it successfully imports my modules like this:
import $ from 'jquery';
I wanted to install https://github.com/robflaherty/riveted/blob/master/riveted.js (a plugin for Google Analytics), but as you can see, the code doesn't have something like module.exports = ..., it only defines a global variable riveted, but it has an apparently valid package.json pointing to riveted.js.
So doing something like
import riveted from 'riveted'
riveted.init();
throws an error:
_riveted2.default.init is not a function
import riveted from 'riveted'
riveted.init();
import 'riveted'
riveted.init();
throws an error:
riveted is not defined
import * as riveted from 'riveted'
riveted.init();
throws an error:
riveted.init is not a function
How can I access riveted's init() function?

You can use the webpack exports loader:
var riveted = require("exports?riveted!riveted")
See the shiming modules overview for details

Step 1. modify riveted.js
Add some code after line 18.
// Browser global
root = !root && typeof self == 'object' ? self : root; // add this line
root.riveted = factory();
Because the this is undefined when the file is imported by es6, we use self instead.
self is better than window, it works in both main thread and worker.
Step 2. modify your import path
like this:
import './riveted.js';
riveted.init();
The ./ or ../ is required for import js file directly.
Examples:
import `./file.js`
import `../file.js`
import `./a/b/file.js`
import `../a/b/file.js`
import `../../a/b/file.js`
Tested in chrome.

SystemJS import "base script" from directory, like in Python

Is it possible to import a "base script" from a module-like directory with SystemJS, like a Python's __init__.py?
Example:
Directory structure
app/
module1/
__init__.js // or module1.js
module1.weeble.js
module1.thingy.js
module2/
__init__.js // or module2.js
module2.weeble.js
module2.thingy.js
bootstrap.js
module1/__init__.js
import Weeble from "./module1.weeble"
import Thingy from "./module1.thingy"
class Module1 {
constructor() {
this.weeble = new Weeble();
this.thingy = new Thingy();
}
}
export default Module1
bootstrap.js
Import directory to import the base script (__init__.js or module1.js) or something:
import Module1 from "./module1"
import Module2 from "./module2"
let module1 = new Module1();
let module2 = new Module2();
// INSTEAD OF
// import Module1 from "./module1/__init__"
// OR
// import Module1 from "./module1/module1"
Is this possible? Python imports a directory as a module if __init__.py is present in that directory
# so one doesn't have to type
from module/__init__.py import module_part
# but only
from module import module_part
# or to import the entire module
import module

Yup it's possible. Use a index.js file for that:
module1/index.js
Then you can import "./module1";

JavaScript itself isn't a module-based language language (not yet). In order to do this you will need to include another library like RequireJS