I'm using WebPack and now I'm going to need to do the compilation of SASS fiels (we'll be working with Bootstrap). First of all, I installed node-sass and sass-loader (not sure if any of those is needed at all). Then, in my server.js I've added the following line (nothing more that would refer to the Sass object, yet).
import Sass from "node-sass";
The compilation gave me errors that fs package is missing so based on this answer I've tried the following (both individually and simultaneously). The error about fs disappeared but instead there's something about unexpected token in the package.json of the node-sass module.
node: { fs: "empty" },
target: "node",
...
I have no idea what those would do and how those affect anything. Both seem to be produce the same error. Any light on that would be an extra bonus as they appear quite different from each other.
Then, I also tried to enable to the loader in my webpack.config.js by the following addition suggested here. Even tried to map the source like described here. Another post suggests using a different syntax for target specification... Nothing seems to help and finally I got totally confused and gave up.
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{ test: /\.scss$/, loader: 'style!css!sass' }
]
},
sassLoader: { sourceMap: true },
...
Some of the posts I'm reading are old and I feel that they might be outdated and do more harm than good. And there seems to be quite a few posts not answered that regard the connection between WebPack and SASS (e.g. this and this). I fear that I might be barking up the wrong tree...
I need help being pointed in the right direction.
There should be no need to write import Sass from "node-sass"; anywhere in your code. The node-sass package is part of your build-pipeline which is using webpack and thus running in a node environment. But your front-end code typically does not have any connection to a node env because it's running in the browser. This also explains why you got errors related to fs. You should also get rid of your node: { fs: "empty" }, target: "node", ... stuff. In a pure front-end related webpack pipeline you shouldn't need those hacks.
Try the following in your webpack.config.js file:
module.exports = {
...
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
};
To get things going don't use source-maps from the beginning, but add them once the rest of the setup is running. To get sourcemaps each loader must re-use the result from the previous loader, which is why you should start with having a look how sourcemaps are configured for sass-loader.
Related
When I'm trying to build the Next.Js app then the below error is coming with a successful build. This error is showing when I deploy the app in Vercel.
error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json
This is my .eslintrc.json
{
"extends": ["next/babel","next/core-web-vitals"]
}
I've also added .babelrc
{
"presets": ["next/babel"],
"plugins": []
}
I also found a solution when I change the eslintrc.json file like below:
{
"extends": ["next","next/core-web-vitals"]
}
then no error is showing while building the app. But there is another problem showing when I use the above solution and the problem is:
Parsing error: Cannot find module 'next/babel'
This is shown in all the imports with red marks.
I tried to search the solution but did not found any solution for this.
I think, this might have to do with this weird hackfix that is being touted in a bunch of places that tells you to place next/babel in your eslint config file for some reason (e.g. here).
It probably was a hackfix for an old bug in older next.js versions. But as of (at least) summer 2022, it makes little sense to do so, considering that next/babel is a babel preset, not an eslint preset. Instead, in recent next.js versions, just reset your .eslintrc.json:
{
"extends": [
"next"
]
}
With this setup, things don't error out, as of next#12.2.*.
You also might want to take a look next's eslint customization options. For example, some people might be confused why eslint is seemingly not working.
In that case, consider this solution and the next.js docs on eslint.
If you have this problem, but you did not copy+paste your .eslintrc.json from the interwebz, then you might need to describe your situation in more detail.
my problem has been solved by this code. just copy and paste it into the eslintrc.json file.
{
"extends": ["next/babel","next/core-web-vitals"]
}
Or just replace "next" and "next/core-web-vitals" to
"plugin:#next/next/recommended"
https://nextjs.org/docs/basic-features/eslint
I had this issue when working with TurboRepo. The solution for me was to add next as a devDependency in the root of the monorepo.
Same Turborepo issue using pnpm. This solved it for me: https://github.com/vercel/next.js/issues/40687#issuecomment-1275184829
Essentially add this to your settings.json
// .vscode/settings.json
{
"eslint.workingDirectories": [
{ "pattern": "apps/*/" },
{ "pattern": "packages/*/" }
]
}
I'm in the process of upgrading a website from Webpack1 to Weback3, and I'm having trouble translating the scss loader into the Webpack 3 format because of the following line:
css?-autoprefixer&sourceMap!postcss?parser=postcss-scss!sass?sourceMap'
I've figured out that to translate this line to Webpack3, I need to add the "-loader" suffix to sone of the items, for exmaple "css" becomes "css-loader."
I can even get the site to compile if I take out the last-half of the line, and include only "css-loader," but the homepage styling is broken. For some reason, if I include the whole source map section, it fails to compile with error "ERROR in Entry module not found: Error: Can't resolve 'css?-autoprefixer&sourceMap'"
The original loader in Webpack 1 was:
loaders: [
{
loader: ExtractTextPlugin.extract('style-loader', 'css?-autoprefixer&sourceMap!postcss?parser=postcss-scss!sass?sourceMap'),
test: /\.scss$/
},
In Webpack 3, I have translated it to:
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [require.resolve('css-loader?-autoprefixer&sourceMap!postcss-loader?parser=postcss-scss!sass-loader?sourceMap'), require.resolve('sass-loader')]
})
},
If anyone can give me some pointers on how to get around this module not found error, I would be very grateful. I've spent hours reviewing the documentation, and googling, and I can't seem to find a clear guide as to what all of the connector symbols in the line mean (! = ? &) or why it now returns module not found.
The symbols have to do with inline loaders. From the documentation:
It's possible to specify loaders in an import statement, or any equivalent "importing" method. Separate loaders from the resource with !. Each part is resolved relative to the current directory.
import Styles from 'style-loader!css-loader?modules!./styles.css';
It's possible to overwrite any loaders in the configuration by
prefixing the entire rule with !.
Options can be passed with a query parameter, e.g. ?key=value&foo=bar,
or a JSON object, e.g. ?{"key":"value","foo":"bar"}.
https://webpack-3.cdn.bcebos.com/concepts/loaders/#inline
I'm trying to uglify ( mangle + remove comments ) a SapUI5 app by using grunt together with the grunt-sapui5-bestpractice-build plugin.
According to this link, there should not be an uglify task by using this plugin so I've combine it together with the grunt-contrib-uglify plugin.
The problem that I have is; when performing the application build, it seems that my uglify task is being ignored because the grunt-sapui5-bestpractice-build has an implicit uglify task that overwrites the one I'm defining.
For a better understanding, this is the code:
package.json
{
"name": "grunt-build",
"version": "0.0.1",
"description": "Grunt build",
"private": true,
"devDependencies": {
"#sap/grunt-sapui5-bestpractice-build": "1.3.33",
"grunt-contrib-uglify": "3.3.0"
}
}
Gruntfile.js
module.exports = function(grunt) {
'use strict';
// Project configuration.
grunt.initConfig({
uglify: {
options: {
mangle: true,
compress: {
drop_console: true,
dead_code: false,
unused: false
}
},
files: {
expand: true,
cwd: "<%= ref.staging%>",
src: ["**/*.js", '!test/**', '!test_local.html'],
dest: "<%= ref.process%>"
}
}
});
grunt.loadNpmTasks('#sap/grunt-sapui5-bestpractice-build');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', [
'lint',
'clean',
'build',
'uglify'
]);
};
The result is that the application is correctly built & minified, Component-preload.js is created ad used to load the app but the mangle is not done and the comments are still there.
Could you kindly provide any advice here? Do you have any way to input the grunt-sapui5-bestpractice-build with the mangle option in order to do it just using one plugin?
Thanks in advance.
This is more of an extended comment, and not a fully functional answer. I just ran out of space.
The advantage of having the Component-preload.js not mangled is that you can debug it normally, because it contains the spaces, comments etc. Debugging mangled code is more difficult.
You'll have to look at the things you need to do to accomplish this mangling. After '#sap/grunt-sapui5-bestpractice-build' is done, you have minified but not mangled Component.js, a minified but not mangled Comonponent-preload.js and a normal development version in Component-dbg.js, correct?
You might want to abandon the best practice package and go for something else entirely like this: https://www.npmjs.com/package/grunt-openui5. I can't see what happens in the steps in '#sap/grunt-sapui5-bestpractice-build', I can't even find that package anywhere.
Grunt is only executing a series of tasks in a row. I haven't tried the webIDE versions of this but here's the list of tasks I'm executing as part of an offline openui5 app:
'clean:build', // remove `build` folder
'clean:dist', // remove `dist` folder
'copy:build', // copy all my code to the `build` folder
'preload', // mangle all my code in the `build` folder and create a preload
'copy:dist:minified', // copy the mangled code to `dist`
'copy:dist:dbg', // copy and rename my original code as `-dbg.js` versions to `dist`
'clean:build' // remove the `build` folder
This was done with gulp, using packages gulp-openui5-preload and gulp-uglify and some others. Not sure if gulp works on the web ide, but I think you can recreate this in Grunt.
You can either use something like this to mangle the results of the default process and create a new preload file, or you can scrap the default and try to roll your own entirely.
I have a web application built with webpack. I have many styling variations, and those styles are all called style.css and in their own respective directories like
./STYLE_A/style.scss
./STYLE_B/style.scss
./STYLE_F/style.scss
I am supplying a cross-env variable STYLE_DIR to webpack and I want that variable to control where the scss gets included from.
I've tried:
require(`./${STYLE_DIR}/style.scss`); //in the webpack (does nothing)
I've tried:
require(`./${STYLE_DIR}/style.scss`); //in my client.js (ends up including every style.scss from every one of the style directories)
I've tried setting this to a 'process.env' variable in webpack, I've tried using an alias to resolve, there's something I'm just missing.
I got interested in your question, then I did a little research and I think I have a way to make it work.
Steps:
1.
In Webpack config file use DefinePlugin in order to have a constant that can be setup at compile time. You do that in this way:
const GLOBALS = {
'process.env.STYLE_DIR': JSON.stringify(process.env.STYLE_DIR)
};
export default {
entry: [
'./app/index'
],
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin(GLOBALS)
],
...
}
2.
Put your style.scss file in the correct folders (STYLE_A, STYLE_B and STYLE_C as you indicated).
3.
In your .js file require your SCSS file as follow (of course be sure to have the corresponding loaders properly setup in Webpack config file):
require(`./${process.env.STYLE_DIR}/style.scss`);
4.
Set the STYLE_DIR variable before you run webpack. Something like this:
export STYLE_DIR = 'STYLE_A'
This is working for me. If I change the STYLE_DIR value before running Webpack I get a different style file imported.
I hope this helps.
Hi there I have been forced to come here due to every resource out there on the topic is very poor and incomplete.
Not only on the babel site but every single post out there is not complete and informative enough.
I tried to reach out at the babel forum and no replies.
I am trying to convert my prototype libraries to Es6 and convert to the most leanest possible code. So no bloaty duplicated generated code and if possible no bloaty requirejs and whatever browserify generates.
I have tried to make a project with grunt and babel directly, configure the external-helpers plugin according to the babel documentation.
It fails to include the relevant helper code and fails to include the import module code altogether.
ie a babel config like
{
options: {
sourceMap: false,
presets: ['es2015'],
"plugins": ["external-helpers"]
},
dist: {
files: {
'build/<%= package.name %>.js': ['src/<%= package.name %>.js']
}
}
}
The main project file has an import like
import Button from './ui/buttons/Button';
The module code looks like this as if the export is placed underneath extra code is generated for that.
export default class ShareButton {}
produces an output like this
Object.defineProperty(exports, "__esModule", {
value: true
});
require('babel-core/external-helpers');
var _Button = require('./ui/buttons/Button');
var _Button2 = babelHelpers.interopRequireDefault(_Button);
No source of the module or the helper object is included.
I searched hard for how to deal with external-helpers and it suggests it has to be imported into a separate file ie something like this to generate only the helper functions needed
babel-external-helpers -l createClass > src/helpers.js
But any resource regards to this fails to go as far as to how to import that into the project.
If I use the transform-runtime plugin, it produces a massive polyfill that cannot be disabled so a bug and not so useful for what I need.
"plugins": [
["transform-runtime", { "polyfill": false, "regenerator": false }]
]
If I use browserify / babelify it makes a royal mess and duplicates code still.
A config like
{
options: {
"transform": [["babelify", {
"presets": ["es2015"],
"plugins": ["external-helpers"],
sourceMap: false
}]]
},
dist: {
files: {
'build/<%= package.name %>.js': ['src/<%= package.name %>.js']
}
}
}
Produces code like this still with the external helper missing and duplicated code not relevant to the helper. ie
Object.defineProperty(exports, "__esModule", {
value: true
});
Is within every module in the generated file.
If I export the classes like this at the bottom of every file
export default class {}
Duplicated code is generated like
var _class = function _class() {
babelHelpers.classCallCheck(this, _class);
};
exports.default = _class;
In terms of filesize that doesn't include bloaty wrapping code like
},{}],2:[function(require,module,exports){
It seems concatting all the prototype classes files together to bundle in one file is the winner still.
So trying to port the library but keep it similar and bundle it together into one file.
Hopefully this is concise enough and there is a simple solution.
FYI browsers do not understand tabs and 4 spaces. I had to edit this post in my editor to get the code blocks working ! It would be nice to have a markup like other places like "```" ?
Let me know thanks.
I'm using rollup with babel now. Rollup produces a clean output as umd mode. Browserify is really bloaty in itself.
There is just a problem with polyfills being converted. I have to concat external ones in like for WeakMap.
I had a problem trying to use the generated Iterator and finding a polyfill for that so I have to code loops a particular way it doesn't generate Iterators.
The polyfill generation in babel is still too bloaty and crazy. It's pretty terrible. So I concat in minified polyfills that are very small and it's used globally.
I was running into something very similar. Was tired of trying to do it the "right way" and ended up just creating https://www.npmjs.com/package/grunt-babel-helpers which simply manipulates the string output.