i'm using Vue Single-file-components with UiKit.
main.js
import App from './App.vue'
import "../node_modules/uikit/src/less/uikit.theme.less";
const app = createApp(App)
const globals = reactive({})
app.mount('#app')
uikit includes a few SVG files for things like the arrows on <select>:
/path/to/project/node_modules/uikit/src/images/backgrounds
├── accordion-close.svg
├── accordion-open.svg
├── divider-icon.svg
├── form-checkbox-indeterminate.svg
├── form-checkbox.svg
├── form-datalist.svg
├── form-radio.svg
├── form-select.svg
└── list-bullet.svg
unfortunately, the SVGs don't end up in dist/ when i npm run build (or npm run dev, etc.)
How do i get those images working?
The path in the image above is correct relative to the less sources; i get the impression that something is supposed to automagically change them on compile (lessc doesn't seem to have any relevant options?)
Edit
I noticed this in the output of vue build:
$ npm run build
> junctspace-web-designer#0.0.0 build
> vite build
vite v4.0.4 building for production...
transforming (106) node_modules/yaml/browser/dist/compose/util-contains-newline.js
../../images/backgrounds/divider-icon.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
../../images/backgrounds/list-bullet.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
../../images/backgrounds/form-select.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
../../images/backgrounds/form-datalist.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
../../images/backgrounds/form-radio.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
../../images/backgrounds/form-checkbox.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
../../images/backgrounds/form-checkbox-indeterminate.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
../../images/backgrounds/accordion-close.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
../../images/backgrounds/accordion-open.svg referenced in /home/tether/Clones/junctspace-web-designer/src/assets/main.less didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ 116 modules transformed.
dist/index.html 0.76 kB
dist/assets/index-9a8004d3.css 113.23 kB │ gzip: 19.09 kB
dist/assets/index-08c469df.js 206.39 kB │ gzip: 70.56 kB
Add these aliases to your vite.config.js
export default defineConfig({
resolve: {
alias: {
'../../images/backgrounds': 'uikit/src/images/backgrounds',
'../../images/components': 'uikit/src/images/components',
'../../images/icons': 'uikit/src/images/icons'
}
}
});
Related
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'; "
I would like to organise a flutter project into a multi-package one with following requirements:
use one repository for this project
able for developers to work on the packages in this repository locally
make the packages accessible as dependencies from other projects outside of this repository
The file setup for the repository I have now is:
.
├── app_base
│ ├── ...
│ └── pubspec.yaml
├── feature
│ ├── ...
│ └── pubspec.yaml
└── README.md
I tried using path dependencies like this in app_base/pubspec.yaml:
name: app_base
dependencies:
feature:
path: ../feature
and it works for local development but if I try to use app_base in a completely different project and not use paths but a git dependency:
name: actual_app
dependencies:
app_base:
git:
url: ssh://address.to/the_repo.git
path: app_base
ref: deadbaca
it cannot resolve the transitive feature dependency:
Running "flutter packages get" in actual_app...
Error on line 21, column 11: Invalid description: "../feature" is a relative path, but this isn't a local pubspec.
path: ../feature
^^^^^^^^^^
pub get failed (65)
Process finished with exit code 65
Is there a way to make it work for both local development and used as a git dependency from other project?
Just use Git dependencies for both scenarios (locally and for other projects).
If you think this is cumbersome during local development, use path dependencies locally and change it back to Git before committing.
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.
There's an npm module I'm using, that works fine in my project when installed with npm and its semver, but that fails with the below error when I try to install it with its github url.
The error: Uncaught Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded
I'm loading the same version of the module, not changing any build configs, the only difference is loading with semver vs github url.
I should say, the module's lib folder is not checked into github. So I do run a build of the module manually.
I'm using webpack for the build. I suspect its a problem with the copies of react being loaded, but that doesn't seem to have changed, and webpack seems to be handling duplicates.
npm ls react:
├── react#15.6.1
├─┬ react-color#2.2.0
│ └─┬ reactcss#0.4.6
│ └── react#0.14.9
└─┬ react-with-context#1.2.1
└── react#15.6.1 deduped
A little confused, any tips appreciated
(If that makes any difference, the error seems to be thrown from a dependency of the module that I'm testing. And in both modules (the one I'm testing + its dependency), react is listed as a peerDependency package.json)
I work on an web app with pouchdb, and protractor for e2e tests.
Recently, following pouchdb documentation, we switch from npm pouchdb package to pouchdb-browser package, which is more suitable for in-browser use.
It has a side effect as we also inject pouchdb from portractor in order to force some state during e2e test:
export namespace pouchBackdoor {
function _inject(): void {
browser.executeScript('return typeof PouchDB == "undefined"').then(res => {
if (res) {
let lib = path.join(
__dirname, '../node_modules/pouchdb/dist/pouchdb.js');
browser.executeScript(fs.readFileSync(lib, 'utf-8'));
}
});
}
Following the modification node_modules/pouchdb doesn't exist anymore and our test dont pass.
A quick workaround is to re-install the complete pouchdb distribution for the dev environment, but it's not really satisfying as everything we need should be in pouchdb-browser already.
So I tried to find the equivalent of node_modules/pouchdb/dist/pouchdb.js file in node_modules/pouchdb-browser/ folder but it turns out that i'm not able to do it.
I tried to use node_modules/pouchdb-browser/lib/index.js but it returns the following error:
Failed: unknown error: require is not defined
Which make sence as require doesn't exist in browser environment.
So my question is, does anyone tried to do the same and find a solution, or you does anyone know better how npm works and can give me any leads ?
PS: there is the contain of my node_modules/pouchdb-browser/ folder after a clean npm install pouchdb-browser:
pouchdb-browser/
├── lib
│ ├── index.es.js
│ └── index.js
├── LICENSE
├── node_modules
│ └── lie
│ ├── ...
├── package.json
└── README.md
Thanks for reading !
Edit:
Issue open in github/pouchdb to ask for pouchdb.js inclusion in pouchdb-browser package:
https://github.com/pouchdb/pouchdb/issues/6745