I'm having a problem when unit testing a vue single file component with some scss styling, as it is unable to process the #import statements. It works when I run launch the app using yarn run dev or build for production yarn run build, issue is only with unit test mode, and my setup uses mochapack to run the webpack before executing the test.
WEBPACK Compiling...
[=========================] 98% (after emitting)
ERROR Failed to compile with 1 errors
error in ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ #import 'themes/default/variables';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
home/xxxxx/src/styles/main.scss 1:9 #import
/home/xxxxx/src/components/WorkTrigger.vue 39:9 root stylesheet
# ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss& 4:14-442
# ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&
# ./src/components/WorkTrigger.vue
# ./tests/unit/WorkTrigger.spec.ts
# ./node_modules/mochapack/lib/entry.js
Type checking in progress...
[=========================] 100% (completed)
WEBPACK Failed to compile with 1 error(s)
Error in ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ #import 'themes/default/variables';
Any ideas on how may this be resolved. I don't need to load scss for testing, although I'm unable to disable style processing (null-loader) as I do not have a webpack.config file in the project, and I would not create one unless absolutely necessary. Project is generated with Vue CLI.
I was able to fix this by prefixing the path with '~#/...', give it a try and see. Example: "#import: '~#/styles/variables'; "
Related
Is there a way to track down this kind of build problem? I.e. a flag that would show more detailed error information? My project is very much like the default vue cli project. It has been working fine for months until this morning.
$ vue-cli-service build --mode dev
⠏ Building for dev...
ERROR Failed to compile with 0 errors 12:06:07 PM
ERROR Build failed with errors.
error Command failed with exit code 1.
In this case, I had a file called worker.js which is a web worker being loaded by worker-loader. In worker.js I import a second .js file which imports a missing .js file (due to my error). For whatever reason, this error doesn't make it to the surface of vue-cli-service build.
I've installed jquery.tagsinput-revisited via npm, which was provided here
npm i jquery.tagsinput-revisited
Then, I've added
require('jquery.tagsinput-revisited');
in one of my js file and
#import '~jquery.tagsinput-revisited/src/jquery.tagsinput-revisited';
in one of SCSS file.
Now, I'm having these error while npm run watch
This dependency was not found:
jquery.tagsinput-revisited in ./resources/js/bundle1.js
To install it, you can run: npm install --save
jquery.tagsinput-revisited
ERROR in ./resources/js/bundle1.js Module not found: Error: Can't
resolve 'jquery.tagsinput-revisited' in
'C:\xampp\htdocs\vetforum\www\resources\js' #
./resources/js/bundle1.js 9:0-37 # multi ./resources/js/bundle1.js
SCSS file get successfully compiled,but there seems an error in the js file.
After several attempts, i've done like this
In JS file
require('../vendors/tagsinput/jquery.tagsinput-revisited');
In SCSS file
#import '../vendors/tagsinput/jquery.tagsinput-revisited';
When trying to run my React Native app I get this error:
error: bundling failed: Error: Expected path `/Users/jgallaso/Projects/aerogear/aerogear-react-native-core/index.js` to be relative to one of the project roots
at toLocalPath (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/lib/toLocalPath.js:33:9)
at ModuleCache.getModule (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/ModuleCache.js:94:20)
at ModuleResolver._getFileResolvedModule (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:320:42)
at ModuleResolver.resolveDependency (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:311:989)
at ResolutionRequest.resolveDependency (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:96:16)
at DependencyGraph.resolveDependency (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:269:4352)
at /Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:201:36
at next (native)
at step (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:306)
at /Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:536
BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓░░░░░░░ 56.6% (331/440), failed.
My app has a dependency installed aerogear-react-native-core that is a Native Module. Source code is at: https://github.com/josemigallas/aerogear-react-native-core
This package on the other hand depends on other TS one (I ignore if this is problematic) and this code is located at: https://github.com/josemigallas/aerogear-js-sdk/tree/poc_react_native_library/packages/core
And the app code that actually tries to use all this is located at: https://github.com/josemigallas/aerogear-js-sdk/tree/poc_react_native_library/example/react-native
This means:
App
└─┬ aerogear-react-native-core#0.0.2
└── #aerogearmobile/core#1.0.0
Since this is all at development stage, nothing is pushed to npmjs, I'm just using npm link to include all dependencies.
Honestly I don't have a clue why this is failing, without the second dependency everything worked all right so that makes me think typescript has something to do. However, the error is complaining about aerogear-react-native-sdk's index.js file so maybe the error is related with the link.
I tried deleting all caches, re-installing npm modules, re-running the bundler many times...
If you have used "npm link" in the project, that might be the reason. Metro Bundler does not work with symlink correctly. Try to install the dependency without using "npm link".
Question
I want to make changes to an open source JavaScript library. Using webpack and npm and keeping everything local, what options do I have to make changes to a local module and import it into project in place of an public npm module downloaded from the registry? The local module and consuming app will also be source controlled under two separate git repositories.
Problem
I am testing this within an Aurelia app, but I think it is a webpack and npm problem. I have an app called my-app which has a dependency on aurelia-binding. I wish to make local changes to aurelia-binding and push them to a fork in GitHub. My project structure looks like this:
└───my-app
├───.git
├───dist
├───node_modules
│ └───aurelia-binding
| ├───.git
│ ├───dist
│ └───src
└───src
When built and run, everything works as expected. To make a change to aurelia-binding and test them in my-app, I need to install its dependencies and build it. This results in a structure like this:
└───my-app
├───dist
├───node_modules
│ └───aurelia-binding
| ├───.git
│ ├───dist
| ├───node_modules
| | └───dependencies...
│ └───src
└───src
When the node_modules are installed on the dependency, webpack throws an error at runtime. The error may look like an issue with the aurlia module, but I do not believe this is the case.
Unhandled rejection Error: Error invoking SVGAnalyzer. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: __WEBPACK_IMPORTED_MODULE_1_aurelia_pal__.a.createElement is not a function
I have also tried this using npm link with the library cloned next to my-app instead of within in but got the same result.
I used the following addition to the webpack.config.js to be able to use npm/yarn linked packages. It forces webpack to resolve the modules only using the main node_modules and not the "nearest" ones.
resolve: {
extensions: [".ts", ".js"],
symlinks: false,
modules: ["ClientApp", path.resolve('node_modules')],
}
Where "ClientApp" is the folder where my aurelia app is located. The symlinks parameter is used to prevent webpack from resolving the symlinked path to an absolute path.
A word of warning, with this setup you circumvent version checking by npm so you are responsible for linking a compatible version.
I am trying to publish a fork of an open source React component to npm and use load it in my webpack after a successful npm install of my published module.
The webpack is throwing a Module not found: Error: Cannot resolve 'file' or 'directory' ./Slider.jsx in /home1... error when loading.
The lib/index.js file that my rc-tools build created is:
1'use strict';
2
3 module.exports = require('./Slider.jsx');
while, the main fork of the repo has
1'use strict';
2
3 module.exports = require('./Slider');
as their created lib/index.js.
I am using the same build (rc-tools) tool as them and have nearly identical package.json. Why is my repo creating a different index.js and is this the cause of my webpack.config not loading?
Here is the link to the npm component: https://www.npmjs.com/package/meraki-slider
In my journey of learning about node and publishing, I simply forgot to remove the .jsx endings from my /src folder, which was causing my build to include them in my /lib folder and causing webpack to not compile. :P