I'm completely new to Nuxt and Webpack, so I'm not sure quite what details I should include here, but I'm working on a VueJS project and I can't stop getting this error when I try to run a build:
ERROR in ./node_modules/node-fetch-native/dist/index.cjs 69:2
Module parse failed: Unexpected character '#' (69:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| class BlobDataItem {
> #path
| #start
|
# ./node_modules/node-fetch-native/lib/index.cjs 1:18-46
# ./.nuxt/server.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./.nuxt/server.js
This error is coming from a dependency so I don't want to edit the code in the file as that isn't a great long-term solution. I've tried adding this to my webpack.config file:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
}
... but still nothing. I've also had some problems with package dependencies, if that has anything to do with it. Let me know if there are other details I need to include. Thanks in advance!
Because of an unusual # character at line 69, column 2, the webpack module bundler appears to be having trouble parsing the code in the node-fetch-native package, according to the error notice you provided.
You can try adding a JavaScript file loader that can handle the syntax used in the node-fetch-native package to your webpack setup in an attempt to fix this problem. You can accomplish this by including the following rule in your module.
in your module.rules:
{
test: /\.m?js$/,
resolve: {
fullySpecified: false
}
}
I found the fix! Apparently this is an error with the a Nuxt update and we have to wait for a fix, but for now you can do this:
Go into nuxt.config.js
Find build > standalone (in mine it was at the very bottom)
Change it from true to false like this:
build: {
standalone: false
}
Related
My Visual Studio Code extension uses the node module highlight.js which comes with a folder full of CSS files. These provide colour schemes for syntax colouring. It has become necessary to bundle some of the CSS files.
It's about bundling an asset
The objective is to bundle a CSS file and at run-time access the file content as a string. If that can be achieved without an import statement that would be perfect. Normally, how exactly one accesses the content of the bundled file would be a separate question, but I have a feeling that content retrieval and how one should go about bundling the asset are closely entwined.
I freely admit to having a weak understanding of WebPack.
The story so far
The bundler is specified in package.json as "webpack": "^5.4.0" but I don't know how to ascertain what is actually present. It is conceivable that there is something wrong with my setup: when I try to run webpack --version on a command prompt in the project folder, it responds
CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)
We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no):
The first time this happened I responded yes. After a flurry of installation and another try the same thing happened. However, vsce package has no trouble using webpack for a production build and pressing F5 to debug successfully puts together a development build in a dist folder with an unminified file I can examine (which is how I know the file mentioned below is being bundled).
Moving on from there I've modified webpack.config.js like so
//#ts-check
'use strict';
const path = require('path');
/**#type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context -> https://webpack.js.org/configuration/node/
entry: './src/extension.ts', // the entry point of this extension, -> https://webpack.js.org/configuration/entry-context/
output: {
// the bundle is stored in the 'dist' folder (check package.json), -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
libraryTarget: 'commonjs2',
devtoolModuleFilenameTemplate: '../[resource-path]'
},
devtool: 'source-map',
externals: {
vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, -> https://webpack.js.org/configuration/externals/
},
resolve: {
// support reading TypeScript and JavaScript files, -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js', '.css']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
module.exports = config;
As you can see there are rules and loaders for CSS.
When I add this import
import "../node_modules/highlight.js/styles/atelier-dune-light.css";
webpack happily builds the bundle and when I inspect it I can find the bundled CSS.
However, when I try to load the extension in the extension debug host, it fails to load, with this message.
Activating extension 'pdconsec.vscode-print' failed: document is not defined.
Enabling break on caught exceptions reveals this rather surprising exception.
Exception has occurred: Error: Cannot find module 'supports-color'
Require stack:
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\node_modules\debug\src\node.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\node_modules\debug\src\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\dist\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\vscode-proxy-agent\out\agent.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\vscode-proxy-agent\out\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
OK, so activation failed because the loader barfed. But WTF does importing CSS have to do with support-color?
Remove the import and it runs just fine. I really don't know how to respond to this; it's not clear to me why a demand for a stylesheet should cause that error. At this point I look to others for guidance and advice.
Remove style-loader from webpack.config.js to fix the error.
Pull the CSS as a string like this. Note the abbreviated path.
const cssPath: string = "highlight.js/styles/atelier-dune-light.css";
const theCss: string = require(cssPath).default.toString();
You do not need the import statement, the use of require will cause Webpack to bundle the files, but you still have to remove style-loader to avoid the loader error.
I'm a C++ developer and beginner in the Node world.
I would like to create a CEP and VUE based Photoshop plugin.
The skeleton plugin works well.
I would like to use node-libcurl package for this plugin.
I installed libcurl - It's OK.
npm i node-libcurl --save
I put down into my C4.js
const { curly } = require('node-libcurl');
When I want to build my project I got this error:
INFO Starting development server... 98% after emitting CopyPlugin
ERROR Failed to compile with 1 error
7:26:51 PM error in
./node_modules/node-libcurl/lib/binding/node_libcurl.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for > > this binary file)
# ./node_modules/node-libcurl/dist/Easy.js 5:17-60
# ./node_modules/node-libcurl/dist/index.js
# ./src/c4/C4.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.22:8080&sockPath=/sockjs-node
(webpack)/hot/dev-server.js ./src/main.js
I tried this webpack.config.js in .... \node_modules\node-libcurl
module.exports = {
target: "node",
node: {
__dirname: false,
},
module: {
rules: [
{
test: /\.node$/,
loader: "node-loader",
},
],
},
};
... but it did not work.
I appreciate any help
Thx:
Carlos
It was my fail.
I got answer from developer.
This library is not supposed to work in the Browser, it is a backend-only library.
/Carlos
I have to create some unit tests with some inherited code.
All the code is in a large file, that eventually needs to be separated.
My karma-jasmine unit test pulls in this one large file that references chilkat_node8_win32. My test case is not exercising chilkat. I can't seem to exclude chilkat from within karma.config.js. The chilkat is within the code and not a separate file.
I have operationally setup and successful tested a hello world karma unit test. I then moved onto testing the target code and had a variety of configuration errors. I'm down to this last one.
After looking around... I couldn't find any karma related units tests with chilkat, that wasn't a dead link in python or giving my anti-virus an issue (I have red flags on the play).
I have tried excluding the file, but again it didn't work.
I found out later the chilkat is a purchased ftp and that the source code is private. Hence the error in the output of (Source code omitted for this binary file). I'm not sure if this is the reason preventing karma from working, or what.
I'm looking for another breadcrumb trail to follow, or else I will have to re-plumb some SW pipes to separate the ftp chilkat code portion into a separate file in order not to include the chilkat dependancy within the unit test code.
Any standard practice feedback is appreciated, as I will need justification for the additional scope-creep. I view that any FTP test should be a systems test, which is probably why I see nothing about chilkat with unit tests.
Thanks in advance.
~Mike
#Trimmed down unit test code to demonstrate issue:
const chilkat = require('chilkat_node8_win32');
const ftp = new chilkat.Ftp2();
#karma.config.js
module.exports = function (config) {
config.set({
//root path location to resolve paths defined in files and exclude
basePath: '',
//files/patterns to exclude from loaded files
exclude: [ '/**/chilkat.node' ], // <--- attempt to exclude
...
webpack: {
externals: ['pg', 'sqlite3', 'tedious', 'pg-hstore'],
module: {
rules: [
{
test: /\.js$/i,
exclude: '/**/chilkat.node', // <--- attempt to exclude
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
]
},
node: { fs: 'empty', child_process: 'empty', dns: 'empty', net: 'empty', tls: 'empty', hstore: 'empty', chilkat_node8_win32: 'empty' } // <--- attempt to enable
},
preprocessors: {
//add webpack as preprocessor to support require() in test-suits .js files
'./test/*.js': ['webpack']
},
Error
$ npm test
...
> karma start karma.conf.js
i ｢wdm｣: Compiled with warnings.
START:
i ｢wdm｣: Compiling...
× ｢wdm｣:
ERROR in ./node_modules/chilkat_node8_win32/chilkat.node 1:2
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./lib/modules/ABC.js 1:14-44
# ./test/test.js
i ｢wdm｣: Failed to compile.
I've just switched to Preact 8.4.2 and would like to get the React Developer Tools to work as well. In my webpack.config.js, I've added:
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat'
}
In my entry .js file, I've added:
require('preact/debug');
After adding these, I was getting an error when attempting to build:
Module parse failed: /myProject/node_modules/preact/src/preact.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { h, h as createElement } from './h';
| import { cloneElement } from './clone-element';
| import { Component } from './component';
# ./~/preact/debug.js 6:14-31
I only had .jsx files loading with babel-loader (not .js), so I added an additional entry in my webpack.config.js file:
{
test: /\.js$/,
include: /node_modules\/preact/,
loader: 'babel-loader'
},
After adding this entry, I'm able to build without issues, but my React Developer Tools just shows:
Waiting for roots to load...
to reload the inspector [click here]
Something is either up with your preact app or your webpack config. I just solved a similar problem.
First step, check if its your preact. If you have no console errors, drop your preact into this working boilerplate (you'll have to do a little rewiring to get it working) https://github.com/developit/preact-boilerplate
If after firing it up with your code, Devtools works as expected, then there is something wrong with your build. In that case it turns into a game of line by line updating your (mostly) working build to match preact-boilerplate.
In my case, I had included "src" in my webpack resolve. This threw no errors in terminal/console, and the build worked perfectly otherwise. Once I found it, devtools started working.
In a react project I used react-boilerplate but had private modules to include in the frontend that needed transpiling. In order for babel to transpile those I set exclude to the following function in the webpack config that relates to babel:
rules: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
// eslint-disable-next-line object-shorthand, func-names
exclude: function (modulePath) {
return /node_modules/.test(modulePath) &&
!/node_modules\/#trade-quorum\/tq-helpers/.test(modulePath);
},
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
And it worked perfectly.
Now I used that same trick in a different project but this time, in the resulting bundle tq-helpers is included but not transpiled into ES5 - the ES6 code is directly in the bundle and the build raises an error (more specifically UglifyJS).
There must be a reason around the dependencies to this package that are not the same in the two projects but hard to find. I was wondering whether there is a way to debug in details what babel does for a specific package in order to find the reason.
Thanks you for your help,
Best,
Didier