Can anyone experienced with Webpack/npm components take a loot at: https://github.com/appcomponents/material-components/issues/4 ?
Basically - it is giving error Uncaught Error: Cannot find module "./components" when using this package with npm inside webpack project.
Simple for someone with knowledge but totally blocking for someone totally not into components/webpack.
It's some simple issue with path configuration which is making it impossible to use this really nice package.
I have copied my comment from the GitHub issue as this should have as much visibility as possible.
The issue is with the webpack.config.js. It's not resolving modules correctly.
I've created a pull request (#8) to resolve this issue. You can use that repo commit in the meantime, or you can modify the webpack.config.js file manually in node_modules/vue-material-components/. I've tested this with a known working Vue.js webpack config.
Related
I've been working on an npm repo; creating Vue-isolated components and publishing them as npm packages. Therefore there isn't a global App, so each package will have its own configuration (package.json, vite.config, etc). I was trying to create a Histoire folder where I can add my packages, but I'm getting errors all the time. I guess I'm not doing the proper config.?
I'm not sure how to make it work. I will appreciate some help here.
I made a reproduction of the error on Stack Blitz, you need to
npm run story:dev
https://stackblitz.com/edit/vitejs-vite-9ebma3?file=histoire/histoire.config.js
Thanks!
My wish is, that I can build a vue package and install it on any server just by changing the config without recompiling.
My problem:
I don't know how to fetch it.
I use axios for my backend communication at the moment, but I don't know how to download something without knowing the hostname.
I think an ideal solution would be to include a script that contains the config, similar to how the image tag works.
The script should not be minified or included.
But I didn't find a source of anyone doing that (where it worked).
Has anyone a solution for that.
PS: I found this question, but the hostname problem still remains.
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I've tried for hours to set up ESLint using the Airbnb linter in Visual Studio Code. I ran the commands found here: https://www.npmjs.com/package/eslint-config-airbnb and set the peer dependencies to the correct versions, but still no luck. I always get this error:
Unexpected top-level property "“extends”". . Please see the 'ESLint'
output channel for details.
Does anyone know of a fix for this? I've read so many blogs and threads to no avail and am at the point where it seems like it's just more hassle than it's worth, though everyone says the Airbnb style guide is best for React.
Install the ESLint extension for VS Code. This will cause lint errors to show up inline, directly in the code editor (as opposed to just showing in the terminal when you use the command line).
Install eslint-config-airbnb and all of the dependencies (follow the instructions in the documentation). If you're using npm 5+, simply run this command in your terminal while inside of the project directory: npx install-peerdeps --dev eslint-config-airbnb.
Setup your ESLint configuration. You can add a basic config in your package.json file under the eslintConfig property, like so: "eslintConfig": { "extends": "airbnb" }
If you've done all of the above steps and are still getting the error you mentioned, see this thread, where a number of potential solutions are mentioned in the comments.
Specifically, in your case it sounds like your configuration is not getting read properly, for whatever reason. I would try adding it to your package.json as mentioned above to see if that solves it.
When I try to use vu-currency-filter, I get this error
TS7016: Could not find a declaration file for module 'vue-currency-filter'. 'C:/dev/budgetManagement/node_modules/vue-currency-filter/dist/VueCurrencyFilter.bundle.js'
Is there a workaround for this?
I've tried a couple of the currency filters on npm and they all seem to have this problem. Should I abandon TypeScript and just use JavaScript?
I've read things online for other people having this problem, but they all seem very confusing.
I am using the vue.js template put out by Microsoft and VisualStudio.