ES6 'import' causing error with Babel - javascript

I am trying to make a Poker game using JavaScript es6, but even with babel, when the game is run, the following error is thrown:
Unexpected reserved word { import Hand from './hand';
I have the following in my node_modules:
babel
babel-core
babel-loader
babel-preset-es2015
webpack.config.js:
"use strict";
module.exports = {
context: __dirname,
entry: "./player.js",
output: {
path: "./bundle",
filename: "bundle.js"
},
module: {
loaders: [
{
test: [/\.jsx?$/, /\.js?$/],
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
},
devtool: 'source-maps',
resolve: {
extensions: ["", ".js", '.jsx']
}
};
I am trying to simply run player.js to test the constructor:
import Hand from './hand';
export default class Player {
constructor(name) {
this.name = name;
this.hand = dealHand();
}
dealHand() {
Hand.deal();
}
}
let me = new Player("sam");
console.log(`my name is ${me.name}`)
console.log(me.hand);

Related

Using web-worker in the library, but the chunk file can not be found in react application

There are two separate repo:
Library repo
React Web application
library provide 2 functions
func1 without using web-worker
func2 using web-worker
// func2
export const func2 = () => {
//.....
const worker = new Worker(new URL('./web-worker/worker.ts', import.meta.url));
//.....
}
bundle files from webpack5
then import it in react web application
func1 works fine
but got this error when I calling the func2
below is webpack config for the library
const path = require('path');
const config = {
mode: 'production',
entry: './src/index.ts',
module: {
rules: [
{
test: /.ts$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['#babel/preset-env', '#babel/preset-typescript'],
},
},
],
},
output: {
filename: "index.js",
path: path.resolve(__dirname, 'dist'),
publicPath: "/",
library: {
type: 'umd',
},
},
resolve: {
extensions: ['.ts', '.js'],
},
devtool: 'source-map',
};
module.exports = config

export 'default' was not found when I try to import my webpack library

This is my source code ./source/client/main.jsx.
export default {
test: () => console.log('Flow')
};
And this is my webpack.config.cjs.
const path = require('path');
const webpack = require('webpack');
const packageJSON = require('./package.json');
module.exports = (env, argv) => {
return {
mode: 'development',
entry: './source/client/main.jsx',
// entry: './main.js',
output: {
path: path.join(__dirname, 'release'),
filename: 'main.js',
library: {
name: packageJSON.name,
type: 'umd'
}
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react'
],
plugins: [
'#babel/plugin-transform-runtime'
]
}
}
}
]
}
};
};
My package.json contains a list of dependencies and both main and module pointing to the webpack product.
"main": "./release/main.js",
"module": "./release/main.js",
However, when I try to import my module in another webpack project, I get the default was not found error.
import Test from 'test';
export 'default' (imported as 'Test') was not found in 'test' (module has no exports)
Am I building the module wrong?

module.exports error for webpack backend (node.js)

I'm trying to use webpack to bundle my backend code. It's currently using vanilla node.js where I'm using module.exports.x, and when I run webpack, it also outputs the export line i.e. module.exports.x. Now the problem is when I run nodemon on the file, it gives me the error TypeError: Cannot set property 'x' of undefined.
What's my resolution here?
my config file.
"use strict"
const path = require("path")
// const utils = require("./utils")
// const config = require("../config")
var fs = require("fs")
const NodemonPlugin = require("nodemon-webpack-plugin")
const nodeExternals = require("webpack-node-externals")
function resolve(dir)
{
return path.join(__dirname, "..", dir)
}
module.exports = {
context: path.resolve(__dirname, "../"),
entry: "./src/server/server.js",
output: {
path: path.resolve(__dirname, "../src/server"),
filename: "server-webpack.js",
},
plugins: [
new NodemonPlugin(),
],
resolve: {
extensions: [".js",".ts", ".tsx"],
alias: {
"#": resolve("src"),
"#": resolve("src/server")
}
},
devtool: "#inline-source-map",
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: [resolve("src"), resolve("test")]
},
{
test: /\.tsx?$/,
loader: "ts-loader",
},
]
},
externals: [
nodeExternals()
],
target: "node"
}

Video React Component showing error

I'm using the react-video-player component in my project & while using it in the page, it's showing me the following error. I have attached the screenshot.
Can anyone help ? I'm having the following code:
import React, { Component } from "react";
import "video-react/dist/video-react.css";
import { Player } from 'video-react';
class VideoPlayer extends Component {
render() {
return(
<Player
playsInline
poster="/assets/poster.png"
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
/>
);
}
}
export default VideoPlayer;
and also I'm having the following config file which might help you understand the error.
/* webpack.config.js */
/* eslint comma-dangle: ["error",
{"functions": "never", "arrays": "only-multiline", "objects":
"only-multiline"} ] */
const webpack = require('webpack');
const pathLib = require('path');
const devBuild = process.env.NODE_ENV !== 'production';
const config = {
entry: [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/HelloWorld/startup/registration',
],
output: {
filename: 'webpack-bundle.js',
path: pathLib.resolve(__dirname, '../app/assets/webpack'),
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
],
module: {
rules: [
{
test: require.resolve('react'),
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
}
},
},
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
};
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
Use the command --force in the command line while installing react video
You may need css loader in webpack
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
}

Babel loader unable to import React

I'm using babel loader with webpack for combining multiple React components. Although I've installed webpack and babel-loader along with its dependencies. I'm getting two errors:
ERROR in ./components/layout.jsx
Module parse failed: /Users/myuser/Desktop/Projects/Demo/Scorecard/SPA/React/components/layout.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
|
| class Layout extends React.Component {
# ./build/import.js 15:14-49
ERROR in ./components/topic-list.jsx
Module parse failed: /Users/myuser/Desktop/Projects/Demo/Scorecard/SPA/React/components/topic-list.jsx Line 17: Unexpected token <
You may need an appropriate loader to handle this file type.
| render: function () {
| return (
| <div>
| <div className="row topic-list">
| <SingleTopicBox
# ./build/import.js 11:17-56
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');
module.exports = {
entry: APP_DIR + '/import.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: APP_DIR,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
import.js
import React from 'react';
import ReactDOM from 'react-dom';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';
layout.jsx
import React from 'react';
class Layout extends React.Component {
render() {
return (
<div className="container">
<TopicsList />
</div>
);
}
};
ReactDOM.render(<Layout />, document.getElementById('app'));
Remove include options from your webpack.config.js file. Include folder should be the folder where webpack can find your loader in this case babel loader
I'm not clear about your file structure but it might be the include part in resolve section of your webpack.config.js that results the problem.
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');
module.exports = {
entry: APP_DIR + '/import.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: THIS_SHOULD_BE_YOUR_SOURCE_FOLDER,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
You seem to be missing the React preset for Babel: babel-preset-react
npm install --save-dev babel-preset-react
And add it to your babel-loader presets.
I had the same case and resolved it by removing the exclude part of the webpack rule (since the failing import was an import of an imported npm package that was in the node_modules directory).
So, applying to your example:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');
module.exports = {
entry: APP_DIR + '/import.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: APP_DIR,
loader: 'babel',
// we want the loader to search in node_modules,
// so we comment the line below
// exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};

Categories

Resources