I'm new to Webpack. My React config works, but when I try to import postcssJs from 'postcss-js' the browser throws an Uncaught TypeError: Cannot read property 'Base64' of undefined in the bundle on var _Base64 = global.Base64;.
Here is my webpack config:
module.exports = {
entry: './demo/js/components/App.js',
output: {
path: __dirname + '/demo/js',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel',
query: {
presets: [
'es2015',
'stage-0',
'react'
],
plugins: [
'transform-react-stateless-component-name'
]
}
}
]
},
node: {
fs: 'empty'
},
watch: true
}
Here is the React file I'm having problems with:
import React from 'react'
import postcssJs from 'postcss-js' // When I comment out this line, everything works fine.
export default ({greeting}) => <h3>{greeting}</h3>
I'm sure I'm just missing some basic Webpack paradigm about using some sort of loader or something, but I can't figure it out.
I'd really appreciate any help as this has been blocking me for several hours now...
Here are my dependencies:
"dependencies": {
"chalk": "^1.1.3",
"postcss": "^5.2.5",
"postcss-value-parser": "^3.3.0"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-flow-strip-types": "^6.18.0",
"babel-plugin-transform-react-stateless-component-name": "^1.0.1",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"browser-sync": "^2.17.5",
"imports-loader": "^0.6.5",
"lodash": "^4.16.4",
"npm-run-all": "^3.1.1",
"postcss-js": "^0.1.3",
"react": "^15.4.0-rc.4",
"react-dom": "^15.4.0-rc.4",
"stylus": "^0.54.5",
"webpack": "^2.1.0-beta.25"
}
It works without Babel, but I need Babel...
Related
I am trying to use ArcballControls.js controls inside my vue js application. This Class has functions which uses arrow syntax, and every other class in controls does not use arrow syntax. This is the only difference i could understand between other files.
Below is the ArcballControls.js provided by three js
https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/ArcballControls.js
This below is the whole jsm/controls from three.js
https://github.com/mrdoob/three.js/tree/dev/examples/jsm/controls
When i try to use this controls inside my application i am getting this error.
error in ./node_modules/three/examples/jsm/controls/ArcballControls.js
Module parse failed: Unexpected token (238:16)
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
| //listeners
|
> onWindowResize = () => {
|
| const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!
./node_modules/#vue/cli-plugin-babel/node_modules/babel-loader/lib!
./node_modules/cache-loader/dist/cjs.js??ref--1-0!
./node_modules/vue-loader/lib??vue-loader-options!
./src/components/Sidebar/ThreeDCanvas.vue?vue&type=script&lang=js
This is my package.json file
"dependencies": {
"#babel/plugin-transform-arrow-functions": "^7.16.7",
"three": "^0.133.0",
"vue": "^2.6.11",
"vue-style-loader": "^4.1.2",
"vuetify": "^2.6.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"#babel/core": "^7.17.8",
"#babel/preset-env": "^7.16.11",
"#mdi/font": "^6.5.95",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.2.31",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-core": "^6.26.3",
"babel-eslint": "^10.1.0",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.5.3",
"less-loader": "^5.0.0",
"node-sass": "^7.0.1",
"prettier-eslint": "^13.0.0",
"sass": "^1.49.7",
"sass-loader": "^7.3.1",
"vue-svg-loader": "^0.12.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.46.0"
},
Inside config/index.js, in module property, this is how i set up the babel loader, i am not sure if its the right way to do it.
module: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
indentedSyntax: true, // optional
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules(?!\/three)/,
use: [
{
loader: 'babel-loader',
options: {
presets: [['#babel/preset-env', { targets: 'defaults' }]],
},
},
],
},
],
},
This is my component where i initialize the threed scene
<script type="module">
import * as Three from 'three'
import ThreeScene from '#/components/Scene/ThreeScene.js'
import Renderer from '#/components/Scene/Renderer.js'
import Camera from '#/components/Scene/Camera.js'
import HLight from '#/components/Scene/HLight.js'
import DLight from '#/components/Scene/DLight.js'
//import is here
import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js'
import ObjectLoader from '#/components/Scene/ObjectLoader.js'
import CubeLoader from '#/components/Scene/CubeLoader.js'
export default {
name: 'ThreeDCanvas',
data() {
return {}
},
methods: {
init() {
this.scene = new ThreeScene()
this.camera = new Camera()
this.renderer = new Renderer({ antialias: true })
this.objectLoader = new ObjectLoader()
this.controls = new ArcballControls(
this.camera,
this.renderer.domElement,
this.scene
)
Could some one help me to find what i am doing wrong here ?
Inside the file config/index.js on module added babel loader.
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader']
},
in package.json removed unnecessary dependencies and downgraded some.
Node version i am using is 14.17.4 and because of that, node-sass had to downgrade to 4.14.1,
after the issue with loader for threejs was fixed, i had issues with
sass loader.
"node-sass": "^4.14.1",
"prettier-eslint": "^13.0.0",
"sass": "^1.49.7",
"sass-loader": "^7.3.1",
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
i removed babel-loader and babel-preset-es2015 from package.json.
This is my babel-config.js
module.exports = {
presets: ['#vue/cli-plugin-babel/preset'],
}
When i made these changes i am able to access the arcballcontrol from threejs.
Forgive me for getting long content to explain my problem.
I made a simple npm vue3-helloword-webpack plugin. This plugin consoles the simple text from inside the onMounted method.
If I bundle this helloworld plugin using vue-cli tool, the callback of onMounted from plugin would be triggered. But same does not happen while bundling by webpack.
I think the problem is occurred because of currenIntance(I guess it’s a vue instance) is null as shown in below image.
Content: when the plugin is bundled by webpack
Webpack.config.babel.js
const TerserPlugin = require("terser-webpack-plugin")
const libraryNamePlugin = 'vue3-helloworld-webpack';
const appConfig = {
entry: {
'vue3-helloworld-webpack': __dirname + '/src/index.js',
'vue3-helloworld-webpack.min': __dirname + '/src/index.js'
},
devtool: 'source-map',
output: {
path: __dirname + '/dist',
filename: '[name].js',
library: libraryNamePlugin,
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /(\.jsx|\.js)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
include: 'vue3-helloworld-webpack.min.js',
}),
],
},
};
module.exports = [appConfig];
package.json
....
"main": "dist/vue3-helloworld-webpack.js",
"scripts": {
"build": "webpack --config webpack.config.babel.js"
},
"dependencies": {
"core-js": "^3.6.5"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/register": "^7.13.16",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-add-module-exports": "^1.0.4",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.3.4",
"eslint": "^7.27.0",
"eslint-loader": "^4.0.2",
"lodash": "^4.17.21",
"mocha": "^8.4.0",
"terser-webpack-plugin": "^5.1.3",
"vue": "^3.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"yards": "^0.1.4"
}
....
vue3-helloworld-webpack.js
import {onMounted, h} from 'vue'
const config = { msg: String }
export default {
name: 'vue3-helloworld-webpack',
props : config,
setup(props) {
console.log("setup() is invoked")
console.log(props.msg);
onMounted(function () {
console.log("Hooray!!! Onmounted() is triggered")
});
},
render() {
return h('div', {
id: 'helloworld-1'
});
}
}
src/index.js
import vue3helloworldwebpack from './vue3-helloworld-vuewebpack';
const install = (app) => {
app.component(vue3helloworldwebpack.name, vue3helloworldwebpack);
};
export default install;
Result: when the plugin is used by other very simple vue app
Content when the plugin bundled by Vue-cli
package.json
....
"main": "dist/vue3-helloworld-vuecli.umd.js",
"scripts": {
"build": "vue-cli-service build --formats umd --target lib ./src/index.js"
},
"dependencies": {
"core-js": "^3.6.5"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.6",
"#vue/cli-plugin-eslint": "^4.5.6",
"#vue/cli-plugin-unit-jest": "^4.5.6",
"#vue/cli-service": "^4.5.6",
"#vue/compiler-sfc": "^3.0.0-rc.10",
"#vue/test-utils": "^2.0.0-beta.5",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.3.0",
"eslint": "^7.9.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.0-0",
"husky": "^6.0.0",
"prettier": "^2.1.1",
"typescript": "^4.0.2",
"vue": "^3.0.0",
"vue-jest": "^5.0.0-alpha.4"
}
....
Other codes are similar to webpack version except name and webpack config file.
Result
The other simple vue3 app which is using the created plugin(vue3-helloworld-webpack)
Main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3HelloworldWebpack from 'vue3-helloworld-webpack'
createApp(App).use(Vue3HelloworldWebpack).mount('#app')
App.vue
<template> <vue3-helloworld-webpack msg="Welcome!!!!" /></template>
We can get created plugins: webpack and vue-cli versions on GitHub.
My question
Vue cli version does work. One interesting thing, the same webpack file configuration is working for vue2 plugin also.
But it does not work for vue 3 plugin, How can I do this without using vue-cli but using webpack version ?
I have a project in vuejs + vuetify, the project is running fine on chrome browser but when I run the project on Internet Explorer 11 It only shows me the session pages and when i hit the login button it gives me this error
Unhandled promise rejection SyntaxError: Expected ':'
in console and I have to hit the login button twice to enter the app. Here I do not see the main content of page, only sidebar menu gets displayed and the main content is not renderd and I again get an error in my console which is
Unhandled promise rejection NavigationDuplicated: Navigating to
current location(/dashboard/home/something) is not allowed
This is my package.json
"dependencies": {
"#types/leaflet": "^1.5.1",
"algoliasearch": "^3.33.0",
"amcharts3": "^3.21.14",
"auth0-js": "^9.11.3",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.8.0",
"echarts": "^4.2.1",
"firebase": "^6.4.2",
"instantsearch.css": "^7.3.1",
"jquery": "^3.4.1",
"leaflet": "^1.4.0",
"moment": "^2.22.2",
"nprogress": "^0.2.0",
"screenfull": "^4.2.1",
"slick-carousel": "^1.8.1",
"velocity-animate": "^1.5.2",
"vue": "^2.6.10",
"vue-chartjs": "^3.4.2",
"vue-count-to": "^1.0.13",
"vue-croppa": "^1.3.8",
"vue-draggable-resizable": "^2.0.0-rc1",
"vue-echarts": "^4.0.3",
"vue-fullcalendar": "^1.0.9",
"vue-fullscreen": "^2.1.5",
"vue-i18n": "^8.14.0",
"vue-instantsearch": "^2.3.0",
"vue-loading-spinner": "^1.0.11",
"vue-notification": "^1.3.16",
"vue-perfect-scrollbar": "^0.2.0",
"vue-quill-editor": "^3.0.6",
"vue-radial-progress": "^0.2.10",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.2",
"vue-slick": "^1.1.15",
"vue-star-rating": "^1.6.1",
"vue-tour": "^1.1.0",
"vue-video-player": "^5.0.2",
"vue-wysiwyg": "^1.7.2",
"vue2-breadcrumbs": "^2.0.0",
"vue2-dragula": "^2.5.4",
"vue2-dropzone": "^3.6.0",
"vue2-google-maps": "^0.10.7",
"vue2-leaflet": "^2.2.1",
"vuedraggable": "^2.20.0",
"vuetify": "^2.0.11",
"vuex": "^3.0.1",
"weather-icons": "^1.3.2",
"webpack": "^4.39.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"deepmerge": "^4.0.0",
"fibers": "^4.0.1",
"sass": "^1.22.10",
"sass-loader": "^7.3.1",
"vue-template-compiler": "^2.6.10"
}
This is how I am importing babel-polyfill in my main.js
import 'babel-polyfill';
import Vue from 'vue'
import vuetify from '#/plugins/vuetify'
import * as VueGoogleMaps from 'vue2-google-maps'
import { Vue2Dragula } from 'vue2-dragula'
import VueQuillEditor from 'vue-quill-editor'
import wysiwyg from 'vue-wysiwyg'
import VueBreadcrumbs from 'vue2-breadcrumbs'
babel.config.js
module.exports = {
presets: [
["#vue/app", {
modules: "commonjs"
}]
]
}
vue.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
publicPath: process.env.NODE_ENV == 'production' ? '/' : '/',
css: {
sourceMap: true
},
productionSourceMap: false,
transpileDependencies: [
/\/node_modules\/vuetify\//,
/\/node_modules\/vue-echarts\//,
/\/node_modules\/resize-detector\//
],
configureWebpack: {
resolve: {
alias: {
Api: path.resolve(__dirname, 'src/api/'),
Components: path.resolve(__dirname, 'src/components/'),
Constants: path.resolve(__dirname, 'src/constants/'),
Container: path.resolve(__dirname, 'src/container/'),
Views: path.resolve(__dirname, 'src/views/'),
Helpers: path.resolve(__dirname, 'src/helpers/'),
Themes: path.resolve(__dirname, 'src/themes/')
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: [
//jquery plugin
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
}
}
I solved this issue by downgrading the version of vue2-dropzone, its latest version has some issues with IE11 and pass "vue2-dropzone" inside the transpileDependencies of your webpack file.
I'm trying to learn how to write a React App and set up from practically scratch.
I keep trying to run webpack --config webpack.dev.config.js.
I keep getting this error. And I've tried using different loaders and presets.
What is wrong with my setup? Is it my npm node modules are outdated?
I've tried updating all my presets, loaders and even babel itself.
Error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
at createDescriptor (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
webpack.dev.config.js:
var path = require('path');
module.exports = {
mode: 'development',
// context: path.resolve(__dirname, 'src'),
entry: path.resolve(__dirname,'src/index.js'),
output: {
filename: 'main.js',
libraryTarget: "commonjs2"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'],
plugins: ['transform-class-properties']
}
}
]
}
]
},
resolve: {
extensions: ['.js']
}
};
package.json :
{
"name": "react-imgur-album",
"version": "0.0.1",
"description": "React Component for displaying images in an Imgur Album",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.dev.config.js --progress --display-error-details"
},
"keywords": [
"imgur",
"react",
"react-components",
"component",
"images",
"photos",
"pics"
],
"author": "Kyle Calica",
"license": "ISC",
"dependencies": {
"#babel/preset-react": "^7.0.0",
"react-dom": "^16.5.2"
},
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"fixed": "^0.3.0",
"it": "^1.1.1",
"path": "^0.12.7",
"react": "^16.5.2",
"webpack": "^4.22.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
index.js:
import React, { Component } from 'react';
var imgurAPI = 'https://api.imgur.com/3/album/';
export default class ImgurAlbum extends Component {
constructor(props){
super(props);
this.state = {
imgurPosts: [],
isLoading: true
};
}
componentDidMount(){
fetch(imgurAPI + this.props.album + '/images',{
'headers':{
'Authorizathion': 'client-id'
}
}).then(res => res.json())
.then(data => console.log(data));
}
render(){
return(
<div>
<h1>hi!</h1>
</div>
);
}
}
I notice I have two babel cores installed, I don't know how to remove one, or which one to keep. Or even how to select which one with webpack?
I found my solution!
It's a babel mismatch.
I had an old babel-core and babel-presets installed.
In Babel 7, it is best to install using:
npm i #babel/preset-react #babel/preset-env
then in your .babelrc:
{
"presets" : ["#babel/preset-env","#babel/preset-react"]
}
I also uninstalled the old babel-preset-react and babel-preset-es2015 for safe measure.
Still learning so I might be missing steps or understanding here. Please add if you believe you need more information or if I am wrong about anything, but I was able to get mine to build
after looking at the possible solutions for the issue i had, couldn't find a way to solve this error:
Uncaught SyntaxError: Unexpected token import
Im stuck at this point and cant seem to solve it (feel a bit restless when trying to learn and work).
P.S. I appreciate your time and help. Im relatively a new developer, pardon me if i have asked anything stupid. thanks
For your expert review, here's the relevant files that im working with:
package.json
{
"name": "",
"version": "1.0.0",
"dependencies": {
"browser-sync": "^2.18.6",
"browsersync": "0.0.1-security",
"jquery": "^3.1.1",
"jquery-smooth-scroll": "^2.1.2",
"lazysizes": "^3.0.0-rc3",
"normalize.css": "^5.0.0",
"picturefill": "^3.0.2",
"waypoints": "^4.0.1"
},
"devDependencies": {
"autoprefixer": "^6.7.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.2",
"gulp-imagemin": "^3.1.1",
"gulp-modernizr": "^1.0.0-alpha",
"gulp-postcss": "^6.3.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-svg-sprite": "^1.3.1",
"gulp-svg2png": "^0.3.0",
"gulp-uglify": "^2.0.1",
"gulp-watch": "^4.3.11",
"postcss-hexrgba": "^0.2.1",
"postcss-import": "^9.1.0",
"postcss-mixins": "^5.4.1",
"postcss-nested": "^1.0.0",
"postcss-simple-vars": "^3.0.0",
"webpack": "^2.2.1"
}
}
webpack.config.js
module.exports = {
entry: {
app: "./app/assets/scripts/App.js"
},
output: {
path: "./app/temp/scripts",
filename: "App.js"
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
},
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
App.js
import MobileMenu from './modules/MobileMenu';
var mobileMenu = new MobileMenu();
MobileMenu.js
class MobileMenu {
constructor() {
alert("testing 123")
}
}
export default MobileMenu;
scripts.js
var gulp = require('gulp'),
webpack = require('webpack');
gulp.task('scripts', ['modernizr'], function(callback) {
webpack(require('../../webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
Solution
As it seems that it doesnt really matter which version of the babel core, babel-loader we actually use. Also .babelrc file was not required for me. What worked for me was to include the bundled file in my HTML which was generated at temp/scripts/App.js, instead of including the original source at assets/scripts/App.js. Thats it ! cheers
Thanks to #MichaelJungo