When running npm run serve, my VueJS projekt (Vue 2.6.11) running webpack is not finding my locally changed node module.
If i install it normally, it works (of course) and i see the changes i made in it, in the node modules folder of the project that linked it - so the link itself should be fine.
I linked it by using "npm link" in the project i want to link (i ran the build before) and then using "npm link [name]" in my main project.
The import i'm using in the main.js looks like this:
import [module-name] from '[module-name]'
just as it did when i had it installed regularly.
I also changed the settings of webpack by doing this:
module.exports = {
configureWebpack: {
resolve: {
symlinks: false //npm link
},
...
because the documentation of vue stated (for version 2, the new version has information about chainWebpack in it), that links won't work otherwhise as they're not resolved without it. still, this is the output on npm run serve:
This dependency was not found:
* [module-name] in ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/CommentWriteArea.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save [module-name]
(with the correct name in it of course)
Other solutions like installing the local version or forking the repository are not an option. It has to be linked for my use case
I am quite unfamiliar with npm, (I develop in python) and most of the time I just do what the tutorial says. But now I am stuck. I tried Tailwindcss in combination wit 'Vue 3' and followed the install steps from the website:website tailwind+Vue 3
npm init #vitejs/app my-project
cd my-project
npm install
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
npx tailwindcss init -p
And after adding some HTML and running:
npm run dev
everything works fine in the browser.
But then Iwant to build it for using in production I use
npm run build
and after some processing my dist folder is filled with an index.html and assets.
And here starts my problem. I was expecting that I could copy these files to my server and that it should serve my site. But All I see is a blank page.
I can't find the answer anywhere or others with same problems so I think its something stupid I just don't know. But what is it?
Hope someone can help me...
Try this, maybe something will work
https://dev.to/vonagedev/using-tailwind-css-with-vue-js-b1b
Webpack (and Vue-loader which is a Webpack loader for Vue.js components) can be configured to use PostCSS which is a Webpack loader for CSS.
It will look for the configuration inside a postcss.config.js file and can build the app with CSS from packages you add.
And, configure it using this code.
// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
],
};
The demo app is also generated without any CSS assets. Instead, it uses CSS inside the components (which is fine). To include Tailwind CSS, create a CSS asset using your editor or the commands below.
# mkdir -p for making parents they don't exist
mkdir -p src/assets/styles/
touch src/assets/styles/index.css
Now add this code, which adds the various packages of the Tailwind CSS library.
/* src/assets/styles/index.css */
#tailwind base;
#tailwind components;
#tailwind utilities;
```
I'm quite new in Vue and maybe my issue is trivial.
What I have to do:
I want to create a Vue component that I can put in a NPM private repo and import it into other projects with a sth like bundle.js file
TLDR:
can't import vue component building by vue-cli-service build --target lib/wc. Importing component I have sth silimar to "export 'HelloWorld' was not found in '../node_modules/hello-world'
long version:
I have asked questions and projects as much as I could. All projects are built by vue-cli without any additional changes.
create new default project vue create hello-world
by default we havefirst component here - src/component/HelloWorld, and for this example this is component which we want to export
using vue-cli-service try to make exportable file.
3a. vue-cli-service build --target lib --name vue-test ./src/components/index.js where index.js is
import Vue from 'vue';
import HelloWorld from './HelloWorld.vue';
const Components = {
HelloWorld,
};
Object.keys(Components).forEach((name) => {
Vue.component(name, Components[name]);
});
export default Components;
3b. or directly vue file vue-cli-service build --target wc --name vue-test 'src/components/HelloWorld.vue'
in both scenarios vue-cli-service generates me file in to /dist folder and I want to believe this file are correct
in both scenarios I can't import this component to another vue project using import {HelloWorld} from 'path/to/folder/or/file'; or require('path/to/folder/or/file'). It seems like bundle files haven't exported member.
what I doing wrong? Should use build --target wc or build --target lib?
If You don't want to create new app to reproduce this issue U can download repo from https://github.com/okosowski/vueTest (project started using vue cli).
git clone
npm install
npm run build-bundle-lib or npm run build-bundle-lib
npm link or simply copy file to exiting vue project
try to import/display HelloWorld
I will be grateful for any help!!!
thanks
node v10.14.2
npm 6.4.1
vue-Cli 2.9.6 (the same on 3.3.0)
other used version in https://github.com/okosowski/vueTest/blob/master/package.json
I was facing the same exact problem while using vue-cli to build and test my Vue component. Fortunately I was able to find the solution after reporting it as a bug to vue-cli issue tracker on GitHub. Turned out there was nothing wrong with the common.js file nor was it a bug.
Anyway... long story short, the existing project you are trying to import into is unable to resolve symlinks (because this is what happens when you use npm link). In order to solve your problem, you need to add the following into vue.config.js in the root folder of the project you are importing into:
// vue.config.js
module.exports = {
chainWebpack: config => config.resolve.set('symlinks', false)
}
Hope this helps. For more info, check out these links:
My issue report in the vue-cli tracker
Webpack configuration: resolve.symlinks
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
Given the following directory structure:
my-project
|
|-- node_modules
|
|-- react
|-- module-x
|
|--node_modules
|
|--react
You can see both my-project and module-x require React. I have the same problem as described on this question, but the suggestion is to remove react from the package.json dependencies. I do that and it works fine, as long as no node_modules are installed in module-x, because Webpack will use React from my-project. But if I'm in the process of developing module-x and the node_modules are installed, Webpack uses React from both my-project and module-x.
Is there a way I could have Webpack make sure only one instance of React is used, even though it's required on two separate levels?
I know I could keep module-x in a separate directory when developing, but it seems like I'd have to publish it and then install it in my-project to test it, and that's not very efficient. I thought about npm link, but had no luck with it since it still has node_modules installed in module-x.
This here sounds a lot like the same challenge I'm having, but it doesn't seem like npm dedupe or Webpack's dedupe option would work. I'm probably not understanding some important detail.
This issue usually arises when using npm link. A linked module will resolve its dependencies in its own module tree, which is different from the one of the module that required it. As such, the npm link command installs peerDependencies as well as dependencies.
You can use resolve.alias to force require('react') to resolve to your local version of React.
resolve: {
alias: {
react: path.resolve('./node_modules/react'),
},
},
If you don’t want to (or can’t) modify the project configuration, there is a more straightforward solution: just npm link React itself back to your project:
# link the component
cd my-app
npm link ../my-react-component
# link its copy of React back to the app's React
cd ../my-react-component
npm link ../my-app/node_modules/react
Just in case it's useful for others, the solutions suggested above didn't work for me, I had to perform the following steps to solve it:
In the library:
Setup the libraries that are generating issues as peerDependencies in the package.json instead of dependencies or devDependencies, e.g. in my case react:
"peerDependencies": {
"react": "^16.8.6",
...
}
run npm install
build the library (in my case, with a rollup -c npm script
In my main app:
change the version of my library to point to my local project with a relative path in package.json, e.g.
"dependencies": {
"my-library": "file:../../libraries/my-library",
...
}
Add resolve.symlinks = false to my main app's webpack configuration
Add --preserve-symlinks-main and --preserve-symlinks to my package.json start script, e.g:
"scripts": {
"build": "set WEBPACK_CONFIG_FILE=all&& webpack",
"start": "set WEBPACK_CONFIG_FILE=all&& webpack && node --preserve-symlinks-main --preserve-symlinks dist/server.js",
}
run npm install
run npm run start
In the same vein as the accepted answer here's how you can achieve the desired outcome with Craco:
const path = require('path')
module.exports = {
webpack: {
configure: config => {
config = {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'react': path.resolve('./node_modules/react'),
},
},
}
// console.log(config)
return config
},
},
}
It's important to note you can't just pass resolve as a key, you have to do your own deep merge using the configure callback.