Webpack is Not Playing Nice with gulp-babel - javascript

I'm building a gulp script to process my ES2015 code, eventually with react, but it's simply not working. Uglify was throwing errors. (stream.js:74 throw er; // Unhandled stream error in pipe.) Once I looked at the build it was obvious that the ES2015 code was not being converted.
Most solutions to this issue concern a missing preset. I made sure to include babel-preset-es2015. I have a .babelrc file that reads:
{
"presets": ["es2015", "react"]
}
My `gulpfile.babel.js won't run without it.
The file I'm trying to process is very simple:
// index.js
let bobby = "bobby"
console.log(bobby + ' Drink rum.')
When it's turned into an early JavaScript, the let should be replaced by a var. Maybe there is something wrong with my gulpfile.babel.js?
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import runSequence from 'run-sequence';
import babel from 'gulp-babel';
// load all gulp-* plugins in node_modules
const plugins = gulpLoadPlugins()
gulp.task('default', () => {
runSequence('build', 'copy:index')
})
gulp.task('build', () => {
return gulp.src('src/**/*.js')
.pipe(babel())
.pipe(plugins.webpack())
// .pipe(plugins.uglify())
.pipe(plugins.rename('bundle.js'))
.pipe(gulp.dest('dist/'))
})
gulp.task('copy:index', () => {
gulp.src('src/index.html')
.pipe(gulp.dest('dist/'))
})
My gulp version is 3.9.1
My node version is 6.2.0
These are my dependencies so far:
"dependencies": {
"babel-core": "^6.17.0",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-register": "^6.16.3",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-filter": "^4.0.0",
"gulp-load-plugins": "^1.3.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0",
"gulp-webpack": "^1.5.0",
"react": "^15.4.0-rc.4",
"react-dom": "^15.4.0-rc.4",
"run-sequence": "^1.2.2",
"webpack": "^1.13.2"
}
UPDATE: So I went and created a separate task just for Babel and it works. When I added on uglify and rename it works, but when I add Webpack, it has problems. Obviously, Webpack isn't playing nice. Has anyone else had this kind of trouble working with Webpack and gulp?

Let me ask this, do you really need webpack to play nice with gulp-babel? We know webpack plays well with babel and generally from everything that I've read thus far, webpack does not play nice with gulp. There's so many weird things going on with any of the webpack plugins. The best resource I've found thus far for getting webpack and gulp to work together is here.
My advice thus far, forget trying to get webpack and gulp to play nice together. Instead, just have gulp run webpack when you have changes to your js. Here's my set up:
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: './assets/js/index.js',
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
... [other webpack things] ...
In my package.json I set up a script using cross-env to run webpack
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wp-dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
"wp-build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
now in gulp, here's my task as per the suggestion from phase2technology.com:
gulp.task('webpack', (cb) => {
exec('npm run wp-dev', function(err, stdout, stderr){
console.log(stdout);
console.log(stderr);
cb(err);
});
});
Really I think the key here is to just let webpack do the bundling and use gulp to run tasks.

Related

Babel-loader not transpiling JSX component. ModuleParseError

I'm trying to build a standalone component as a package. I'm using webpack to transpile all the CSS and JS/JSX files into JS. I'm able to build the package and pack it into a .tgz file using npm pack. However, when I install the package in another project and try using the component from the installed package. I'm getting this error:
ModuleParseError: Module parse failed: Unexpected token (34:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
And, in the terminal of the running project, I get this:
error - SyntaxError: Cannot use import statement outside a module
webpack.config.js
const path = require('path')
module.exports = {
mode:'production',
entry:'./src/components/StandaloneComponent.js',
output:{
path:path.join(__dirname,'dist'),
filename:'StandaloneComponent.js',
libraryTarget:"commonjs2"
},
module:{
rules:[
{
test:/\.js|jsx$/,
exclude:/(node_modules)/,
use:'babel-loader'
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
},
resolve:{
alias:{
'react':path.resolve(__dirname,'./node_modules/react'),
'react-dom':path.resolve(__dirname,'./node_modules/react-dom'),
'next':path.resolve(__dirname,'./node_modules/next')
}
},
externals:{
react:{
commonjs:"react",
commonjs2:"react",
amd:"React",
root:"React"
},
"react-dom":{
commonjs:"react-dom",
commonjs2:"react-dom",
amd:"ReactDOM",
root:"ReactDOM"
},
next:{
commonjs:"next",
commonjs2:"next",
amd:"Next",
root:"Next"
}
}
}
package.json
{
"name": "testcomponent",
"version": "1.0.3",
"description": "A lightweight and easy to use package.",
"main": "./src/components/StandaloneComponent.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [
"NextJS",
"react"
],
"peerDependencies": {
"next": "^12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"prop-types": "^15.7.2"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"#babel/preset-react": "^7.16.0",
"#babel/preset-stage-0": "^7.8.3",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"next": "^12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1"
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I further installed this package in another project like this:
npm install path/to/tgz/testcomponent-1.0.3.tgz
And then imported the component as:
import StandaloneComponent from 'testcomponent'
As a possible workaround, I tried changing the extension of the component file from .js to .jsx and rebuilt the .tgz, but got the same result.
Looking at the error, I feel that babel-loader is unable to convert JSX into JS, which further is causing the import error, but I'm not entirely sure about it.
What could be causing this error?
Any help is appreciated.
Thanks.
The regex rule that you are using to load the JS and JSX file i.e. test:/\.js|jsx$/ seems incorrect in this case. You can fix it in following two ways:
Using capture groups: So when using or you need to capture the both the character sets as /\.(js|jsx)$/. This will consider both js and jsx extension. The earlier version just doesnt match the regex properly because of missing character set.
Using ? occurrence: You can also modify your regex to use the x as an zero or one occurrence using ? matcher. So the other option will be /\.jsx?$/
I believe you need to include the package you installed under include otherwise it looks like Webpack is configured to ignore your node_modules folder:
exclude: /(node_modules)/,
So make sure to let Webpack know what folders in node_modules that you do want to compile
include: [
path.resolve(__dirname, 'node_modules/testcomponent'
]

unable to use scss in storybook in monorepo vue app - module build error lang="scss"

I am adding storybook in an existing monorepo and keep getting error when trying to add scss via <style lang="scss">:
ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
This is the outline of monorepo structure:
package.json
.storybook
|_ main.js
|_ preview.js
client
|_package.json
|_ src
|_components
|_styles
|_stories
The relevant root package.json looks like:
"scripts": {
"build": "yarn workspaces foreach run build",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"#mdx-js/react": "^1.6.22",
"#storybook/addon-actions": "^6.3.7",
"#storybook/addon-docs": "^6.3.7",
"#storybook/addon-essentials": "^6.3.7",
"#storybook/addon-links": "^6.3.7",
"#storybook/addon-postcss": "^2.0.0",
"#storybook/preset-scss": "^1.0.3",
"#storybook/vue3": "^6.3.7",
"#types/mdx-js__react": "^1",
"css-loader": "^6.2.0",
"node-sass": "^6.0.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"vue-loader": "^16.5.0"
}
Here is my .storybook/main.js
const path = require('path');
module.exports = {
"stories": [
"../client/src/stories/**/*.stories.mdx",
"../client/src/stories/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-scss"
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push(
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
}
);
return config;
},
}
In my vue components, trying to use <style lang="scss"> throws the above error. I thought scss would be handled by the changes made in .storybook/main.js, but it's not working, and I'm wondering if it has something to do with the monorepo and two package.json, or if it is something else.
Based on the package.json you've provided, you may be encountering this bug:
https://github.com/webpack-contrib/sass-loader/issues/923
In short, using Vue 3 with sass-loader v11.0.0 or higher without Webpack v5 leads to this error. An interim solution may be to install a known-compatible version of sass-loader:
npm install --save-dev sass-loader#10.1.1
Or, if using yarn:
yarn add --save-dev sass-loader#10.1.1
Updating the storybook's webpack to version 5 as shown here solved the issue:
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade

"TypeError: Invalid value used in weak set" while build using webpack

I'm trying to add scss to the project. I want to build css files from scss ones, but I get an error that says "TypeError: Invalid value used in weak set" since I added MiniCssExtractPlugin.
Here's my webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
// TODO: Add common Configuration
module: {},
};
const js = Object.assign({}, config, {
name: 'js',
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname, '../some/path/here'),
filename: 'main.js',
},
});
const scss = Object.assign({}, config, {
name: 'scss',
entry: path.resolve(__dirname, './scss/styles.scss'),
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
},
],
},
output: {
path: path.resolve(__dirname, '../some/path/here'),
filename: 'styles.css',
},
});
module.exports = [js, scss];
I googled a lot but didn't find any answers.
I use Node.js v 8.4.0.
Console output (There is more, but I think this is enough):
TypeError: Invalid value used in weak set
at WeakSet.add (native)
at MiniCssExtractPlugin.apply (/path/path/path/path/path/path/path/node_modules/mini-css-extract-plugin/dist/index.js:362:18)
PS: I'm new to webpack, so I'll be glad if you help me to make this code better. The main idea is to keep js compilation the same and add scss compilation. I also want to compile included scss files as separated ones.
PSS: If you need more information, I'll provide some, coz idk what else can be useful.
Maybe the latest mini-css-extract-plugin version has bugs. And I tried to use another version of this package. And its Worked!!!
Remove your last package version:
npm uninstall mini-css-extract-plugin
Download this version 0.9.0 (its worked for me):
npm i --save-dev mini-css-extract-plugin#0.9.0
*optionally (--save-dev)
checkout all versions:
mini-css-extract-plugin/all-versions
This is most likely due to either a bug or an incompatible version of webpack, e.g. upgrading to the current major v2.0.0 releases on webpack 4.
For more information, please check the changelog for breaking changes and fixes.
I think you'll need to downgrade some other plugins as well. I was following a tutorial when I had the same error. This is what worked for me:
{
"name": "recipe-blocks",
"scripts": {
"dev": "cross-env BABEL_ENV=default webpack --watch",
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack -p"
},
"main": "index.js",
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.2.0",
"#wordpress/babel-preset-default": "^3.0.1",
"babel-loader": "^8.0.4",
"classnames": "^2.2.6",
"cross-env": "^5.1.5",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"raw-loader": "^2.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"version": "1.0.0",
"license": "MIT"
}
Then Run:
npm install
npm run dev

Newbie GET error on Webpack, used for http server and bundling

Okay so I'm a designer learning to code. This is probably a pretty simple issue but I'm stuck and I've been banging my head against the wall for hours trying to figure this out.
I'm following this tutorial here:
https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
It has a repo that goes along with it here: https://github.com/joezimjs/Webpack-Introduction-Tutorial
I had a bunch of problems at the beginning because "./dist" was not considered a valid path, because relative paths were banned by webpack or something. Changed it to "/dist" and that fixed stuff, but then I ran into problems with the babel loader trying to process the node modules, so I put exclude node modules. That was something in the code on the repo but not in the tutorial so it took me some digging.
I've gotten to example five in the tutorial and I'm trying to run the server so that it creates the html page, but it's not working. I've tried copying and pasting all the original code, but it won't work. The server runs, but when I visit the localhost:8080 it gets a 404 error from the GET / ( which I guess basically means whatever path it's supposed to be getting via http methods isn't working?)
Here's a link to my repo:
https://github.com/thedonquixotic/webpack-practice
Here's my config.json file:
{
"name": "webpack-practice",
"version": "1.0.0",
"description": "project to practice webpack",
"main": "index.js",
"scripts": {
"prebuild": "del-cli dist -f",
"build": "webpack",
"server": "http-server ./dist",
"start": "npm run build -s && npm run server -s"
},
"author": "David Aslan French",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"del-cli": "^1.1.0",
"handlebars": "^4.0.11",
"handlebars-loader": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"http-server": "^0.11.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
Here's my webpack.config.js file:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'babel-polyfill',
'./src/main.js'
],
output: {
path: '/dist',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
options: { plugins: ['transform-runtime'], presets: ['es2015'] }
},
{ test: /\.hbs$/, loader: 'handlebars-loader', exclude: /node_modules/ }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Intro to Webpack',
template: 'src/index.html'
})
]
};
Sooooo... yeah... I'm burnt out and I can't figure out what I'm doing wrong.
YES!!!! I figured it out!
So here's the deal. It's a bunch of little things adding up.
The core of the problem is that the repo uses webpack 2 but when I npm install webpack it is webpack 4. Webpack 4 requires webpack-cli and webpack-cli doesn't allow for relative paths. So if I change the webpack.config.js file to an absolute path it doesn't create a new folder. And with no folder, there's no way to load the bundled files so it fails the GET the necessary code.
In order to have the correct path I need to use the dirname AND also include the const path =require ('path') solution. Which I just realized #ippi already suggested, and while I had tried the dirname change, I didn't define the const. I'm still really new to Javascript so stuff like that doesn't really occur to me.
Lastly it threw an error for index.html which was just a matter of me needing to add /node_modules/ to the exclude settings for babel. AWESOME! It works!!!!!

Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap

I followed the instructions at getbootstrap.com thinking that everything would just work. It isn't so far :\
Everything seems to be fine until I try to load the page, at which point my Express.js app throws the error
[[sass] error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
Parent style sheet: .../sass/app.scss at options.error (.../node-sass/lib/index.js:291:26)
I have tried npm install, restarting my server, looking on Google, StackOverflow (yes, I know there are quite a few similar questions, but none of them answer my question), the Bootstrap 4 GitHub issue pages and so far I haven't been able to come up with the answer.
Could it be that I installed the dependencies in the wrong place? (Dev instead of production or vis-à-vis)
Why am I getting this error??
My webpack.config.js file looks like this...
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translate CSS into CommonJS modules
}, {
loader: 'postcss-loader', // run post CSS actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compile Sass to CSS
}]
}
]
}
};
My package.json file
...
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^4.0.0",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.3.1",
"mongoose": "^5.0.0",
"node-sass-middleware": "^0.11.0",
"popper.js": "^1.12.9",
"precss": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"autoprefixer": "^7.2.5",
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"eslint": "^4.15.0",
"eslint-plugin-react": "^7.5.1",
"node-sass": "^4.7.2",
"nodemon": "^1.14.11",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
and inside app.scss I have
#import "custom";
#import "~bootstrap/scss/bootstrap";
When Sass is precompiled by its own CLI, it processes #imports by itself, and sometimes thus doesn’t understand ~ notation. So you can import "node_modules/bootstrap/scss/bootstrap"; in first place and replaced the ~
notation with node_modules/ instead.
I had a similar error
File to import not found or unreadable:
node_modules/bootstrap-sass/assets/stylesheets/bootstrap
Just add "bootstrap-sass": "^3.3.7", to devDependencies at yours package.json, ad run npm update, npm install in your project directory.
For me, I had to change the way I was importing
#import '../../../node_modules/bootstrap/scss/bootstrap';
Then it works
In Rails 7.0.1, after installing using rails new myapp --css=bootstrap, the same error occured. The problem was solved by:
Replacing the line with stylesheet_link_tag in application.erb by: stylesheet_link_tag "application.bootstrap", "data-turbo-track": "reload"
renaming app/assets/stylesheets/application.scss by app/assets/stylesheets/application.bootstrap.scss
Replacing the content by #import '../../../node_modules/bootstrap/scss/bootstrap';
I am not using webpack, but I got the same error when I try to import bootstrap in my scss file like this:
#import 'bootstrap';
It would work if I just import it like this in my case:
#import "../../../../../bootstrap/scss/bootstrap";
But since That is not clean enough to my liking, I found out I could alter my gulp scss task from:
.pipe(plugins.sass())
to:
.pipe(plugins.sass({
outputStyle: 'nested',
precision: 3,
errLogToConsole: true,
includePaths: ['node_modules/bootstrap/scss']
}))
(notice the includePaths section) and now I can just use
#import 'bootstrap';
In my scss file
I am using Solidus and on the very first while getting bootstrap works with the solidus faced the same issue.
The below thing works for me as we have to show the full path where the bootsrap is.
#import "../../../../../node_modules/bootstrap/scss/bootstrap";
I had a similar problem and the fix for me was very basic in the end.
I just had to change "../node_modules/bootstrap/scss/bootstrap"; to "node_modules/bootstrap/scss/bootstrap";.
This happens when you give import from node_modules in any scss file other than the base root style.scss. Try placing it in the root style.scss, it should do it.
If you are having any issue and the answers fail to resolve try this:
Open up your scss file that tries to import.
Rectify the address of the import it might be trying from differnt space.
I solved the problem by:
remove node_modules
npm install
ng serve
works ;)
I just run npm i bootstrap and it worked.
This is similar to my problem, npx mix fail to import bootsrtap with error;
SassError: Can't find stylesheet to import.
Turns out my application root folder name using "#" that caused npx consider as unusual path and fail to import
npx mix error
Solution:
Rename the folder (remove "#")
Good to go
Hope this helps

Categories