I've a project on Webpack that I'm trying to setup SASS transpiling with. I believe I am fairly close, although there are issues with my configuration (code and details in the gist here).
Running webpack with the code as it is yields the following error:
/foobar/src/js/components/App.jsx
6:8 error Unable to resolve path to module '../../scss/components/app' import/no-unresolved
Having spent a while on this, I noted that if I replace the import 'scss/components/app' line in App.jsx with import '../../scss/components/app.scss', the transpilation works. This leads me to believe that there are two issues:
My resolve.root Webpack configuration isn't working since relative imports work, but not absolute ones.
My resolve.extensions Webpack configuration isn't being applied either, since I need to append the .scss file extension to get it working.
Other notes:
I'm using webpack 1.13.1.
If I intentionally introduce syntax errors into the SCSS file, webpack correctly prompts me of issues with that file.
I've also tried setting my resolve.root configuration as an array (i.e. [path.resolve(__dirname, './src')]) to no avail.
Goal-wise, I'm hoping to achieve something similar to this example.
I've tried debugging the import paths with console-loader and am getting undefined.
Any help will be appreciated, thanks!
UPDATE:
A friend just shared that the issue is coming not from sass-loader/etc., but from eslint. This means the nature of this question is going to be quite different (less webpack, more eslint).
Anyway, my .eslintrc extends that of AirBNB's, I'm guessing I need to modify it based on the details in this plugin.
The part of interest is:
settings:
import/ignore:
- node_modules # mostly CommonJS (ignored by default)
- \.coffee$ # fraught with parse errors
- \.(scss|less|css)$ # can't parse unprocessed CSS modules, either
I've updated my .eslintrc to resemble:
{
"extends": "airbnb",
"settings": {
"import/ignore": [".scss$"]
}
}
But am still getting errors. Any ideas?
Can you post all the files in the gist? I tried looking for issues just by looking at the code but a runnable example with all files and imports in webpack config would be more helpful.
I'm curious why you added eslint to loaders instead of preloaders. You need to add it to preloaders.
Related
I'm using spring-restdocs to generate docs.
I'm wondering if any property to fail the asciidoctor task while getting similar warnings when building the doc.
Snippet http-response not found at ../../../build/generated-snippets/find-list-configuration-fixed-assets-source-response/http-response.adoc for operation find-list-configuration-fixed-assets-source-response
Snippet path-parameters not found at ../../../build/generated-snippets/update-currency/path-parameters.adoc for operation update-currency
Unfortunately, this is not possible. There is an open issue https://github.com/asciidoctor/asciidoctor-gradle-plugin/issues/154 since 2015. If you read through this issue you will find a workaround. Maybe it will help you. :-)
This is possible starting with asciidoctor 2.0, by configuring the fatalWarnings option of asciidoctorj.
Documentation of fatalWarnings:
Patterns for AsciidoctorJ log messages that should be treated as fatal errors. The list is empty be default. Use setFatalWarnings to clear any existing patterns or to decouple a task’s configuration from the global configuration. Use fatalWarnings to add more patterns. Pass missingIncludes() to add the common use-case of missing include files.
Example:
asciidoctor {
asciidoctorj {
fatalWarnings missingIncludes()
}
}
I have a site that is using multiple independent webpack bundles, which all have roughly the same file structure. When I try to debug something in chrome devtools, it looks like modules are interefering with eachother on the debug level, since both use paths like webpack:///./src/index.ts, hence I'm only able to view the index.ts file of the last module loaded.
Is there a way to add a prefix or otherwise regulate the internal paths webpack is using? So that it becomes something like webpack:///[mymodulename]/src/index.ts
I found the solution, the following makes sure source maps use a relative filepath, and in this way I'm able to append something to it, so now I can debug each bundle individually again
output: {
filename: "./bundle_a.js",
devtoolModuleFilenameTemplate: "bundle_a/[resource-path]"
},
I'm building a project with webpack. The project uses materializecss. When I add materialize.js to the entry file, it complains with the error below
Cannot resolve module 'hammerjs'
When I open the file, I can see the definition there but it appears webpack is unable to identify it. Same thing with weakmap in knockout-es6. My solution to this was to add a reference to hammer.min.js in resolve.alias but not sure if that is the correct thing to do.
How do I get webpack to recognize these dependencies when they are bundled together with the library in question - in this case materialize.js?
As long as you have hammerjs installed to your project (ie. npm i hammerjs --save), it should find it. As pointed out by #egunays you should also have import 'expose?Hammer!hammerjs/hammer to get access to Hammer object.
In case you are worried about possible duplication (you can verify this by examining the generated bundle), you can use webpack.optimize.DedupePlugin. webpack.optimize.CommonsChunkPlugin can come in handy as well. That will allow you to separate your app code from a vendor bundle.
See official optimization docs for more info.
It's better to use ProvidePlugin for this.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"Hammer": "hammerjs/hammer"
}),
This does not require an extra loader and is actually recommended in the docs:
There are cases where you want a module to export itself to the global context. Don't do this unless you really need this. (Better use the ProvidePlugin) 1
I want to package a Grails application for different brands. While generating a war file, I want to pass some custom parameter that refers to a certain brand and styles the application by loading the stylesheet for the brand.
I read online and one approach I found was with maven. I tried working with maven but I am stuck while initially compiling the application. The error is
Failed to execute goal org.grails:grails-maven-plugin:2.2.1:maven-compile
(default-maven-compile) on project foreAction: Forked Grails VM exited with error.
I am stuck as to what approach to take now. I searched for the above error and tried different solutions but nothing seems to work.
If there is a different way without using Maven I am willing to give it a shot.
You could always hook into the events using scripts/_Events.groovy and replace the appropraite CSS/assets. The documentation explains how to hook into build events.
Your code inside scripts/_Events.groovy might look something like this:
// This is called after the staging dir is prepared but before the war is packaged.
eventCreateWarStart = { name, stagingDir ->
// place your code here that copies your resources to the appropriate location in the staging directory.
Ant.copy(
file: System.getProperty('somePassedInFile'),
toFile: "${stagingDir}/assets/stylesheets/whatever.css",
overwrite: true
)
}
Then you can pass in the value of the source file from grails prod war like this:
grails prod war -DsomePassedInFile=/path/to/file.css
Hope this helps at least give you an idea of how you can accomplish this. (All written off the top of my head so beware of typos etc.)
I have the following folder structure:
/main
/loader.php
/build.xml
/components
/package1
/class1.php
/package2
/class2.php
/tests
/package1
/class1.test.php
/package2
/class2.test.php
When I run the web application I load loader.php at first and include other components by calling Loader::load( 'package_name' ). Then all neccessary files are included. The good thing here is that I don't need to include loader.php within the class files because I can rely on having a working instance of Loader.
The Unit Test classes simulate this behaviour by including all neccessary classes explicitly. So there is also no problem with phing and PHPUnit.
But now I want to generate a coverage report with phing and Xdebug. The problem here is that phing seems to load every single PHP file to create the coverage database. Unfortunately it stops because it cannot find the Loader class that is used in the PHP files.
I could easily add an include statement to every class file, but I wonder whether there is a way to include files only if code coverage analysis is inspecting the file?
Other idea: I could also configure the coverage analysis in a way that it scans the unit tests directory and therefore finds all neccessary includes. Then I'd need to filter classes that match to a pattern like /Test$/i or so. Possible?
I looked for ages for something similar.
In the end I ended up with the changes below. Basically you tell php cli to prepend a php file which contains your loading logic.
In php.ini of my cli I've set the following:
auto_prepend_file = autoload.php
I made sure that the file was on my include path (/usr/share/php in my case) and put following lines in it (I use Zend Framework which is also on my include path):
require_once "Zend/Loader/Autoloader.php";
$autoloader = Zend_Loader_Autoloader::getInstance();
$autoloader->registerNamespace('Model_');
Now, what you could do is define your __autoload function and define what needs to be autoloaded, but you get the idea.
It's an ugly hack, but it got things done for me.
Wkr
Jeroen