sairion / buble-loader Goto Github PK
View Code? Open in Web Editor NEWWebpack loader that compiles ES2015 features using buble
Webpack loader that compiles ES2015 features using buble
How can buble-loader
work with configured options when there is a stage of indirection like when using vue-loader
?
vue-loader
also has issues working with Babel unless the .babelrc
file is used so this issue is not unique to buble-loader
. I tried using a LoaderOptionsPlugin
to pass in the objectAssign
value but it doesn't work.
PeerDependencies can't be resolved well automatically. And your last update broke our build.
Hello, I am trying to learn and organize all the information in Reactive Development, I am not yet an expert on the subject, I am hoping to gather as much information as: Webpack, PWA, Service Works ..... among others, I want to be expecializar in developing applications Progressive Web Apps, I have made some advances, but still much is missing. For example I always found the bad Babel in your transpiler, very dirty the file ... So I discovered Buble, through this link -> https://nolanlawson.github.io/frontendday-2016/#1, I liked it a lot as is the result of the transpiler with Buble. Only that in my configuration is not working ... I use Webpack 3 + Preact + CSS Styled-Components (which is very good). I deleted my Babel configuration, which was working and I decided to adopt Buble. How do I set up:
1 - Webpack 3 with Buble?
2 - I tried to use this in Webpack ->
{test: /. js $ /, loaders: 'buble-loader', exclude: / node_modules /, include: Path.join (BIFAO_COMPONENTS),
query: {objectAssign: 'Object.assign'}
},
3 - As the styled-component uses `` backticks, it is giving this error:
Tagged template strings are not supported. Use transforms: {templateString: false}
to skip transformation and disable this error, or `tra
nsforms: {dangerousTaggedTemplateString: true} `if you know what you're doing (45: 0)
@ multi (webpack) -dev-server / client? http: // localhost: 9000 ./bifaosteakhouse/components/app.js
4 - Like where I include in the webpack this part:
buble ({jsx: 'h'})
buble-loader has gotten pretty far behind buble, especially the browser targets and their supported features. Is @sairion still accepting PRs?
I did not find a simple way to have buble-loader also let buble create source maps. is there an easy way I am missing ?
Hey, would you be open to me converting this repo to standard linting. It would make it easier to contribute as right now there's no linter setup in the project. Standard is great and 0 setup (just like bublè
!).
Hello,
I'm using webpack 2 with buble and buble loader. I have this code inside my rules
array :
{
test: /.js$/,
loaders: 'buble-loader',
include: path.join(__dirname, 'client'),
query: {
objectAssign: 'object-assign'
}
}
Unfortunetly, it seems like the polyfill just isn't working. I need to polyfill Object.assign
for IE 11.
The error I'm getting on whichever browser is the following Uncaught ReferenceError: object is not defined
The latest Webpack 2.2.0-rc.2 with the latest vue
, buble
and buble-loader
doesn't work. It might be Buble or the loader. Now I must use the commented out code.
Hash: aea9930c9ec965ef369c
Version: webpack 2.2.0-rc.2
Time: 22ms
ERROR in ../app/webpack/modules/debug-tool/store/mutations.js
Module parse failed: /opt/webird/dev/node_modules/buble-loader/index.js?{"objectAssign":"Object.assign","transforms":{"modules":false,"forOf":false}}!/opt/webird/app/webpack/modules/debug-tool/store/mutations.js Unexpected token (23:0)
You may need an appropriate loader to handle this file type.
|
| export default ( obj = {}
| var obj;, obj[types.SET_OPEN_FLAG] = function (state, payload) {
| state.isOpen = payload
| }, obj )
@ ../app/webpack/modules/debug-tool/store/index.js 6:0-35
@ ../app/webpack/modules/debug-tool/index.js
@ ../app/webpack/commons/vue/index.js
// System
import Vue from 'vue'
// Local
import * as types from './mutation-types'
// const mutations = {
//
// /**
// *
// */
// [types.SET_OPEN_FLAG] (state, payload) {
// state.isOpen = payload
// if (state.isOpen) {
// state.wasOpened = true
// }
// },
//
// }
// export default mutations
export default {
/**
*
*/
[types.SET_OPEN_FLAG] (state, payload) {
state.isOpen = payload
},
}
Buble is 0.14.* now
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.(js|jsx)$/, use: 'buble-loader' }
]
}
};
index.js
import ReactDOM from 'react-dom';
import React from 'react';
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
Error message in console: React is not defined
-> var element = React.createElement( Welcome, { name: "Sara" });
I did notice this note on the buble website: 'If React (or whatever other JSX library you're using) isn't available in the global namespace, you're responsible for importing it into the file:'. But even when I do, it still throws this error.
I need to pass additional options to buble.transform
. I patched the buble-loader
code like this to make it work:
var transformed = buble.transform(source, {
transforms: {
modules: false
- }
+ },
+ objectAssign: 'angular.extend'
});
It would be great if I could somehow pass additional options through the webpack configuration to the buble-loader which are then added like shown above!
My account was compromised, as a result many spam issues got created across multiple repos. I am deleting all such issues. Please check my tweet: https://x.com/arghyac35/status/1729721954909684064?s=20
When compiling in webpack I get:
ERROR in ./app/createRoot.js
Module build failed: Error
at JSXOpeningElement.transpile (/Users/karolis/Documents/workspace/overview-ui/node_modules/buble/dist/buble.umd.js:2642:15)
at JSXElement.transpile (/Users/karolis/Documents/workspace/overview-ui/node_modules/buble/dist/buble.umd.js:880:12)
at JSXElement.transpile (/Users/karolis/Documents/workspace/overview-ui/node_modules/buble/dist/buble.umd.js:2528:30)
at ReturnStatement.transpile (/Users/karolis/Documents/workspace/overview-ui/node_modules/buble/dist/buble.umd.js:6126:20)
When compiling directly with buble, I get a more detailed error:
---
8 : export default function createRoot (shell, data) {
9 : const { initialProperty } = data
10 : const store = createStore()
11 : const Root = (props) => {
12 : return <Overview {...props} shell={shell} />
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Mixed JSX attributes ending in spread requires specified objectAssign option with 'Object.assign' or polyfill helper. (12:11)
Would be great to pass these nice errors to webpack somehow.
Buble doesn't transpile import
/export
statements, making Buble impossible to work with Webpack 1. Moreover, Webpack 2 already does this.
Alternatively, we can add a warning for Webpack 1 users about this.
With the default config in the README:
➜ buble-nodent-webpack ./node_modules/.bin/webpack
/Users/josh/Scratch/buble-nodent-webpack/node_modules/loader-runner/lib/loadLoader.js:35
throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
^
Error: Module '/Users/josh/Scratch/buble-nodent-webpack/node_modules/buble/dist/buble.umd.js' is not a loader (must have normal or pitch function)
at loadLoader (/Users/josh/Scratch/buble-nodent-webpack/node_modules/loader-runner/lib/loadLoader.js:35:10)
at iteratePitchingLoaders (/Users/josh/Scratch/buble-nodent-webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at runLoaders (/Users/josh/Scratch/buble-nodent-webpack/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
at NormalModule.doBuild (/Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/NormalModule.js:129:2)
at NormalModule.build (/Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/NormalModule.js:180:15)
at Compilation.buildModule (/Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/Compilation.js:142:10)
at moduleFactory.create (/Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/Compilation.js:424:9)
at /Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/NormalModuleFactory.js:242:4
at /Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/NormalModuleFactory.js:93:13
at /Users/josh/Scratch/buble-nodent-webpack/node_modules/tapable/lib/Tapable.js:204:11
at NormalModuleFactory.params.normalModuleFactory.plugin (/Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/josh/Scratch/buble-nodent-webpack/node_modules/tapable/lib/Tapable.js:208:13)
at onDoneResolving (/Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/NormalModuleFactory.js:68:11)
at onDoneResolving (/Users/josh/Scratch/buble-nodent-webpack/node_modules/webpack/lib/NormalModuleFactory.js:189:6)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
➜ buble-nodent-webpack ./node_modules/.bin/webpack --version
2.2.1
Any ideas?
I am not sure if this is a bug on this project or related to laravel-mix or other, I gonna post here the issue, because I am lost finding how to resolve the problem:
# gulp default
[11:33:13] Using gulpfile /var/www/web/gulpfile.js
[11:33:13] Starting 'all'...
[11:33:13] Starting 'less'...
[11:33:25] Finished 'less' after 12 s
[11:33:25] Starting 'copy'...
[11:33:25] Finished 'copy' after 47 ms
[11:33:25] Starting 'copy'...
[11:33:25] Finished 'copy' after 145 ms
[11:33:25] Starting 'webpack'...
{ [Error: ./resources/assets/js/app.js
Module build failed: TypeError: Cannot read property 'transforms' of null
at Object.module.exports (/var/www/web/node_modules/buble-loader/index.js:18:46)]
message: './resources/assets/js/app.js\nModule build failed: TypeError: Cannot read property \'transforms\' of null\n at Object.module.exports (/var/www/web/node_modules/buble-loader/index.js:18:46)',
showStack: false,
showProperties: true,
plugin: 'webpack-stream',
__safety: { toString: [Function: bound ] } }
As far I could see, I have this versions:
./node_modules/laravel-elixir-webpack-official/package.json:34: "buble-loader": "^0.2.2",
./package.json:16: "buble-loader": "^0.5.0",
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.