I'm using Vue 2 (but I think that my question isn't Vue-specific). The application uses a WebAssembly library of mine that I've installed with npm install [directory_name]. When I run npm run serve, it serves the .wasm file as text/html instead of application/wasm.
I add this to vue.config.js:
module.exports = {
// ...
devServer: {
mimeTypes: { 'application/wasm': ['wasm'] },
},
};
But in that case, I get this:
Error: Attempt to change mapping for "wasm" extension from "application/wasm" to "application/wasm". Pass force=true to allow this, otherwise remove "wasm" from the list of extensions for "application/wasm".
Is it possible cli-vue-service/webpack-dev-server already knows about .wasm files, and I've understood something wrong about how we install libraries with npm install?
I'm answering my own question.
It's tricky (assuming it's possible) to get webpack to load the .wasm file because of the way webpack works. What I did was add -s "SINGLE_FILE=1" to emcc's options so that it does not produce a .wasm file; instead, it embeds the wasm in the glue .js file.
Btw I came here after getting this error:
Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
I had a typo in my wasm fetch URL and I was fetching a file that didn't exist, but it was giving me this mime type error. Once I fixed the typo, everything worked. I didn't have to add the mime type to the webpack config. (maybe they fixed it since you posted in February.) I'm using the Vue development server.
Related
I just updated to latest create-react-app (web pack 5). And am now getting the following errors (I'm just showing the first 2 errors here). Any help explaining what this error means and how to fix it would be greatly appreciated. I don't think the problem is with react-pdf because I created a new create-react-app project that uses that package and there's no problem.
{
Compiled with problems:X
ERROR in ./node_modules/react-pdf/node_modules/#babel/runtime/helpers/esm/inherits.js 1:0-46
Module not found: Error: Can't resolve './setPrototypeOf' in '/Users/bob/dev/workbox-web/node_modules/react-pdf/node_modules/#babel/runtime/helpers/esm'
Did you mean 'setPrototypeOf.js'?
BREAKING CHANGE: The request './setPrototypeOf' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/react-pdf/node_modules/#babel/runtime/helpers/esm/objectWithoutProperties.js 1:0-74
Module not found: Error: Can't resolve './objectWithoutPropertiesLoose' in '/Users/bob/dev/workbox-web/node_modules/react-pdf/node_modules/#babel/runtime/helpers/esm'
Did you mean 'objectWithoutPropertiesLoose.js'?
BREAKING CHANGE: The request './objectWithoutPropertiesLoose' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
}
Somehow I was accessing a wrong version of babel after CRA upgrade to 5. Deleting node_modules and re-installing was not enough. I needed to delete node_modules and yarn.lock and then yarn install - and then all was ok.
I've installed in my NestJs project a MIME library https://www.npmjs.com/package/mime
(this is a row in my package.json "mime": "^2.5.2").
I've imported this package in my code in this way:
import * as mime from 'mime';
and use some methods like this:
mime.getType(file.name),
in the console, it prints me this error:
ERROR in .....facade_folder/facade.service.ts(93,38):
TS2339: Property 'getType' does not exist on type 'typeof import("..../node_modules/#types/mime/index")'.
But the strange thing is that the code runs and works, in fact in my DB I have the correct mime type stored:
I can leave these errors as they are, but I want to understand what is wrong with this usage, as I follow all the library directions apparently.
I've already tried to delete dist and node_modules folder, npm i, clean cache and run all over again.
Thanks so much.
I have had no problems with deploying my vue projects so far and uploading it to my website. However suddenly Im getting the following errormessage after I have been running
npm run build
and uploading the files in my distfolder.
Uncaught SyntaxError: Unexpected token '<' chunk-vendors.468a5298.js:1
Uncaught SyntaxError: Unexpected token
'<' app.f775d578.js:1
The only difference I can notice is that vue now seems to recommend using yarn.
I made a new project just for testing using yarn but with the same error.
vue create my-application
yarn install
yarn serve
yarn build
uploading content in distfolder to my website - same errormessage
Anyone else experienced this?
My old build works without any problems
Im using #vue/cli 4.5.6
I got it working now. Deleted the folder on my ftp and created a new one. Dont know this solved it but it did :)
If you are deploying your dist not to your root of the web, then one possible cause of this is an incorrect static assets path. Make sure both your css and js generated from npm run build are imported to the correct path from your web server
On dist/index.html, you will see something like this
<link href=/js/chunk-....js rel=prefetch>
This means that it's an absolute path (root of the web), when it's supposed to be relative from the dist folder like this:
<link href=js/chunk-....js rel=prefetch>
To easily fix this is, add publicPath key in your vue.config.js file:
module.exports = {
...
publicPath: ""
};
Then rebuild the project.
Anyone got a link to documentation explaining exactly how ES6 import is supposed to work with npm packages (as opposed to javascript module files) ?
Also (and possibly related) a link to documentation on the use/significance of "module" as a top-level key in an npm package.json file ?
Eg. consider the following from juggle/resize-observer ;
package.json
{
...
"module": "lib/exports/resize-observer.js",
...
}
consumer javascript file
import { ResizeObserver } from '#juggle/resize-observer';
On the above import Chrome sends a request to the server for '#juggle/resize-observer' which is a directory..... so what happens next ? (I don't have a working instance of this and my server doesn't return anything yet as I don't know what it's supposed to / in what format ). Is this syntax only for use with some sort of build tool where it ultimately gets replaced with the actual file ?
I have looked at the npm site/googled and cannot find any relevant documentation.
UPDATE Still waiting for a link to relevant documentation (no relevant Google results at this time) but for anyone asking the same question: apparently you need your server to do "module resolution" . Alternatively you can use Snowpack or a bundler eg. Webpack.
Apparently npm/node packages are not packaged with browsers in mind or based on any W3C/Web Modules standard specification.
See here for module resolution info.
So at present to use an npm package in a browser you must do one of the following
use a bundler like webpack
use snowpack
use a CDN which resolves the module request
implement npm module resolution in your own server
Find the package entry point and use that in your ES6 import statement.
However, if the package's json "main" property changes in a subsequent update you
will need to update your code to reflect this.
UPDATE: After updating to stylus 0.7.4 and express 2.3.12 I can no longer reproduce this. Presumably it was a bug somewhere in an earlier version of stylus.
I'm trying to get the most basic express + stylus setup hooked up. I want to have screen.styl rendered into css and returned in the response when a GET for /screen.css is handled.
I've debugged into the stylus middleware and the debugger is jumping around in ways I can't follow. The stylus middleware code looks fine, but a GET /screen.css is resulting in a Error: ENOENT, No such file or directory '/Users/plyons/projects/test_stylus/screen.css' going out in the response.
I have a test directory with just 2 files (the server is in coffeescript, but it's trivial).
screen.styl server.coffee
cat server.coffee
express = require 'express'
app = express.createServer()
app.use require('stylus').middleware(__dirname)
app.use express.static __dirname
app.listen 9800
cat screen.styl
a
background-color red
From staring at the stylus middleware.js file for quite a while, I think this should work. The stylus middleware is definitely executing and attempting to do fs.stat on both the .styl file, which exists, and the .css file, which does not yet exist, thus the ENOENT, but the middleware looks like it should detect that ENOENT and handle it without any problems (compile the .styl and save the result in the .css). But no .css file is being written. If it was written, the system is designed for the middleware to call next() without actually sending anything in the response, but then the static provide would find the .css file and send it as the response, right?
Anyone know what I've got wrong here?
UPDATE: After updating to stylus 0.7.4 and express 2.3.12 I can no longer reproduce this. Presumably it was a bug somewhere in an earlier version of stylus.