ES6 Export with Babel - npm

Clearly I'm missing something incredibly simple here, so I apologize in advance for the dumb question. I have no errors so it's difficult to Google.
I'm trying to export something, anything, from an npm package written in ES6, compiled with babel and webpack.
I followed this http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/ for my webpack setup, leaving it mostly-identical, but find it below for reference. I made a test export repo just to make sure it wasn't anything in the code of the module I was trying to export; find that below as well. Any help would be greatly appreciated; at this point I feel like I'm taking crazy pills.
src/index.js
const test = "test";
export default test;
webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: [
"babel-polyfill",
"./src/index"
],
output: {
//path: path.join(__dirname, "lib"),
//filename: "[name].js"
filename: "./lib/index.js"
},
// import bare, .js, and .jsx files
resolve: {
extensions: ["", ".js", ".jsx"]
},
devtool: "source-map",
module: {
loaders: [
{
loader: "babel-loader",
// only load src
include: [
path.resolve(__dirname, "src")
],
// only compile .js and .jsx files
test: /\.jsx?$/,
query: {
plugins: ["transform-runtime", "transform-decorators-legacy"],
//plugins: ["transform-decorators-legacy"],
presets: ["es2015", "stage-0", "react"]
}
},
]
},
debug: true
};
package.json
{
"name": "test-package",
"version": "0.0.1",
"description": "test",
"main": "lib/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx/xxx.git"
},
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"es6"
],
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/xxx/xxx/issues"
},
"homepage": "https://github.com/xxx/xxx#readme",
"dependencies": {
"babel-polyfill": "^6.5.0",
"babel-runtime": "^6.5.0"
},
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack -p
other project
npm i ../test-package
(verify actually installed, search for "test" in lib/index.js and find what should be the export)
import test from "test-package";
console.log(test);
console.log(Object.keys(test));
output: empty object, empty array

Why not trying
import * as test from "test-package";
And then
console.log(test);

Related

wrangler dev failed using #cfworker/web

I'm trying to deploy a project on Cloudflare workers using wrangler. I'm using the #cfworker/web package for routing. I've only setup a route at / for testing but it doesn't seem to work.
Here's the dev output:
> wrangler dev
./node_modules/#cfworker/web/dist/application.js 31:30
Module parse failed: Unexpected token (31:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| catch (err) {
> console.error(err?.stack ?? err);
| if (err instanceof HttpError) {
| return err.toResponse();
# ./node_modules/#cfworker/web/dist/index.js 3:0-33 3:0-33
# ./src/index.ts
Error: webpack returned an error. Try configuring `entry` in your webpack config relative to the current working directory, or setting `context = __dirname` in your webpack config.
my package.json:
{
"name": "my-project",
"main": "./src/index.ts",
"scripts": {
"dev": "wrangler dev",
"preview": "wrangler preview --watch",
"build": "wrangler build",
"publish": "wrangler publish"
},
"devDependencies": {
"#babel/cli": "^7.13.16",
"#babel/core": "^7.14.0",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
"#babel/plugin-proposal-optional-chaining": "^7.13.12",
"#babel/plugin-transform-runtime": "^7.13.15",
"#babel/preset-env": "^7.14.1",
"#babel/preset-typescript": "^7.13.0",
"#cloudflare/workers-types": "^2.2.2",
"babel-loader": "^8.2.2",
"typescript": "^4.2.4",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0"
},
"dependencies": {
"#cfworker/web": "^1.6.11"
}
}
my webpack.config.js:
const path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.ts',
output: {
filename: 'worker.js',
path: path.join(__dirname, 'dist'),
},
performance: {
hints: false,
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-typescript',
],
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-runtime',
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
],
},
},
],
},
}
I can't figure out if there's something wrong with my webpack config or if there something else.
I managed to get it working by changing the webpack config at line
exclude: /(node_modules|bower_components)/,
to
include: /(node_modules\\#cfworker\\web|src)/,
It seems that the #cfworker/web module is using optional chaining and nullish coalescing and was excluded from the babel-loader.

My webpack babel loader is not compiling my javascript code

I have been learning webpack and babel...
All things are working fine but my webpack config is not working as it should, I think something I missed here.
Here are my webpack.config.js code
const path = require('path');
module.export = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename:'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
publicPath:'/assets/'
},
module:{
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['#babel/preset-env']
}
}
}]
}
};
and here are all dev dependencies
{
"name": "chapter-22",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "./node_modules/.bin/webpack src/index.js -o dist/assets/bundle.js --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "Jabid",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"#babel/polyfill": "^7.11.5",
"webpack-dev-server": "^3.11.0"
}
}
problem solved , i mistakenly wrote module.export instead of module.exports.

vue.js - dynamic imports results in error: Support for the experimental syntax 'dynamicImport' isn't currently enabled

I'm learning Vue.js with Webpack for the first time today and trying to get a router working with lazy/dynamic imports.
I want to use lazy/dynamic imports because I am rebuilding my content management system which has many, many pages that may or may not be used during the user's session, so loading the modules they need dynamically, when they need them, makes more sense with regards to my application.
My very basic router currently looks like this:
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
function loadView(view) {
return () => import(/* webpackChunkName: "view-[request]" */ `#/views/${view}.vue`);
}
export default new Router({
routes: [
{
path: "/",
name: "dashboard",
component: loadView("Dashboard")
},
{
path: "/login",
name: "login",
component: loadView("Login")
}
]
});
However, I run into the following compilation error:
ERROR in ./src/router/index.js Module build failed (from
./node_modules/babel-loader/lib/index.js): SyntaxError:
...../src/router/index.js: Support for the experimental syntax
'dynamicImport' isn't currently enabled
With the additional note:
Add #babel/plugin-syntax-dynamic-import to the
'plugins' section of your Babel config to enable parsing.
And shows me which line is the problem, which is quite obvious anyway:
return () => import(/*..........
^
I recognise this error from when I was playing with Webpack on its own a few months ago, so I knew I had to install the dynamic import plugin to make this work.
This is what I installed:
npm install babel-plugin-syntax-dynamic-import
And I made this plugin available in my babel.rc configuration file and ran npm run dev to recompile everything:
{
"presets": [
[
"#babel/env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
]
],
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
But I'm still getting the error and I still can't use dynamic importing features! Am I doing something wrong? Has anybody else had trouble with getting dynamic imports to work?
My webpack.config file:
'use strict';
const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'development',
entry: [
'./src/app.js'
],
devServer: {
hot: true,
watchOptions: {
poll: true
}
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true,
outputStyle: 'compressed',
data: `
#import "./src/assets/scss/_variables.scss";
#import "./src/assets/scss/_mixins.scss";
`
}
}
]
}
]
},
resolve: {
alias: {
"#": path.resolve(__dirname, './src'),
"Components": path.resolve(__dirname, './src/components/')
}
},
optimization: {
minimizer: [new UglifyJsPlugin()],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
]
}
My package.json file:
{
"name": "manage_v2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config build/webpack.config.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.22",
"vue-router": "^3.0.2",
"vuex": "^3.1.0"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.5",
"babel-plugin-dynamic-import-webpack": "^1.1.0",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"uglifyjs-webpack-plugin": "^2.1.1",
"vue-loader": "^15.6.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
}
}
I fixed the problem myself after many hours of frustration. I still don't know why the method that's used in the Babel, Webpack and Vue documentation doesn't work but I did get this working:
I first removed the plugin declaration from babel.rc file and then added an option to the babel loader in webpack.config file:
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
plugins: [
"#babel/plugin-syntax-dynamic-import"
]
}
}
}
I hope this helps others.
You have the wrong plugin assignment:
"plugins": ["#babel/plugin-syntax-dynamic-import"]
Would be the correct format for that plugin.

Issue using extract-text-webpack-plugin

I am trying to use the Extract Text Webpack Plugin, but I have not been able to generate a new css file for the compiled sass files.
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : './src/app.js',
output : {
filename : './dist/bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename : 'app.bundle.css'
}),
]
}
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
app.js:
var css = require('../css/app.scss');
console.log("This is a test Hi from webpack !!!");
I able to generate a new css file for the compiled sass files
please go through repo for your reference working example
your configuration looks good only ,my be you miss the path or forgot load css file in index.html or may be you did not create any scss files
live example

Babel Error: Unknown Option: babelrc.presets

When running tests using Jest, I need my .babelrc file for it to run.
When running npm start, it only works without the .babelrc file, with the error:
Unknown option: C:\...\babelrc.presets
I'm guessing it's to do with the version of babel I have, but I have tried to following "answer" to this question: Unknown option: .../.babelrc.presets
but to no avail.
Here is my package.json:
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "src/app.js",
"author": "x",
"license": "ISC",
"scripts": {
"start": "webpack-dev-server --port 3000",
"test": "jest"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"react",
"react-dom",
"react-addons-test-utils",
"fbjs"
]
},
"devDependencies": {
"babel-core": "^6.7.*",
"babel-jest": "^11.0.2",
"babel-loader": "^5.0.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"jest-cli": "^11.0.2",
"react-addons-test-utils": "^0.14.8",
"webpack": "^1.12.*",
"webpack-dev-server": "^1.10.*"
},
"dependencies": {
"react": "^0.13.3"
}
}
and my .babelrc:
{
"presets": [
"react",
"es2015"
]
}
and my webpack config, if it's relevant:
module.exports = {
entry: [
'./src/app.js'
],
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/
}]
}
};
You've listed babel-core#^6 but are using babel-loader#5, update your babel-loader to the most recent version.
I can work with babel src --out-dir lib, but not with npm run XXX using babel-core#6.20.0 and babel-loader#6.2.9 .While I install Babel-cli#6.18.0 CLI globally on my machine, after I install babel-cli# locally project, it can works with npm run.