I wanted to let monaco editor show the One Dark Pro Theme. There is a step in one of the solutions.
import { wireTmGrammars } from 'monaco-editor-textmate'
But once when I add this import, webpack cannot compile my product.
It said:
error in ./node_modules/_monaco-editor-textmate#4.0.0#monaco-editor-textmate/dist/index.js
Module parse failed: Unexpected token (7:14)
You may need an appropriate loader to handle this file type.
| const tm_to_monaco_token_1 = require("./tm-to-monaco-token");
| class TokenizerState {
| _ruleStack;
| constructor(_ruleStack) {
| this._ruleStack = _ruleStack;
# ./node_modules/_babel-loader#7.1.5#babel-loader/lib!./node_modules/_vue-loader#13.7.3#vue-loader/lib/selector.js?type=script&index=0!./src/pages/oj/components/PreviewFile.vue 14:0-56
# ./src/pages/oj/components/PreviewFile.vue
# ./node_modules/_babel-loader#7.1.5#babel-loader/lib!./node_modules/_vue-loader#13.7.3#vue-loader/lib/selector.js?type=script&index=0!./src/pages/oj/views/ages/oj/views/help/ThanksPage.vue
# ./src/pages/oj/views/help/ThanksPage.vue
# ./src/pages/oj/views/index.js
# ./src/pages/oj/router/routes.js
# ./src/pages/oj/router/index.js
# ./src/pages/oj/index.js
# multi ./build/dev-client ./src/pages/oj/index.js
I tried to find a solution to this problem. What can I try next?
I'm using using a 3rd party Content management SDK ("dc-delivery-sdk-js": "^0.11.0") which throws error as you may need appropriate loader when trying to run " npm run build:ssr " (Server Dide Rendering build during local development)
ERROR in ./node_modules/dc-delivery-sdk-js/build/module/lib/client/createContentClientV2Fresh.js 3:37
Module parse failed: Unexpected token (3:37)
You may need an appropriate loader to handle this file type.
| import axiosRetry from 'axios-retry';
| import { createBaseContentClient } from './createBaseContentClient';
> const isThrottled = (error) => error?.response?.status === 429;
| const DEFAULT_RETRY_CONFIG = {
| retries: 3,
# ./node_modules/dc-delivery-sdk-js/build/module/lib/client/createContentClient.js 2:0-74 11:15-41
# ./node_modules/dc-delivery-sdk-js/build/module/lib/ContentClient.js
# ./node_modules/dc-delivery-sdk-js/build/module/index.js
# ./dist/moltonbrown-server/main.js
# ./server.ts
ERROR in ./node_modules/dc-delivery-sdk-js/build/module/lib/content/coordinators/FilterByImpl.js 9:42
Module parse failed: Unexpected token (9:42)
You may need an appropriate loader to handle this file type.
| async fetch(requestConfig) {
| try {
> if (!requestConfig.parameters?.locale && this.config?.locale) {
| requestConfig.parameters = Object.assign({}, {
| ...(requestConfig.parameters || {}),
# ./node_modules/dc-delivery-sdk-js/build/module/lib/ContentClient.js 8:0-67 113:19-31
# ./node_modules/dc-delivery-sdk-js/build/module/index.js
# ./dist/moltonbrown-server/main.js
# ./server.ts
I've tried script-loader (https://v4.webpack.js.org/loaders/script-loader/) which resolves the build issue locally but throw error post deployment since its has not suppport for Node.js which actually runs the SSR build in server.
any other alternative webpack loaders or solutions to resolve this issue for Angular 6 project ?
TL;DR
How to translate a node script like this:
"test": "NODE_ENV=test riteway -r #babel/register 'src/**/*.test.js' | tap-nirvana",
to use SWC instead of Babel?
Context
We recently upgraded our Next.js version. Next.js now supports SWC instead of Babel.
The unit tests for React in our project are written with RITEway. The test command is:
"test": "NODE_ENV=test riteway -r #babel/register 'src/**/*.test.js' | tap-nirvana",
It transforms the files with Babel first because otherwise import statements and JSX would cause errors.
During our attempts to migrating to SWC, we had no luck with the CLI. However, we found the #swc-node/register package. It allowed us to transform our command like this:
"test": "riteway -r #swc-node/register src/**/*.test.js | tap-nirvana"
which fixes new syntax like the import statement and a test like this would run:
import { describe } from 'riteway';
describe('my test', async assert => {
assert({
given: 'true',
should: 'be true',
actual: true,
expected: true,
});
});
However, tests for React components like this
import { describe } from 'riteway';
import render from 'riteway/render-component';
import Authentication from './user-authentication-component';
describe('user authentication component', async assert => {
const $ = render(<Authentication />);
assert({
given: 'just rendering',
should: "render 'Authentication'",
actual: $('*:contains("Authentication")').text(),
expected: 'Authentication',
});
});
still throw the following error:
$ yarn test
yarn run v1.22.17
$ riteway -r #swc-node/register src/**/*.test.js | tap-nirvana
/Users/user/dev/learning-flow/node_modules/#swc/core/index.js:135
return bindings.transformSync(isModule ? JSON.stringify(src) : src, isModule, toBuffer(newOptions));
^
Error: error: Expression expected
|
7 | const $ = render(<Authentication />);
| ^
error: Expression expected
|
7 | const $ = render(<Authentication />);
| ^
error: Unexpected token `)`. Expected this, import, async, function, [ for array literal, { for object literal, # for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier
|
7 | const $ = render(<Authentication />);
| ^
Caused by:
0: failed to process js file
1: Syntax Error
at Compiler.transformSync
How can we create that command so that it runs with SWC?
After some experimentation I found out that it works if you import React from 'react'; in every file (both the component as well as the test) and change the file extensions to .jsx as described in the docs.
However, this is unsatisfying, as we'd like to use React 17's JSX transform feature to avoid having to import React in every file. Additionally, we'd like to keep all file endings .js.
We tried setting .swcrc without any luck so far.
I'm posting this answer here in case no way to configure .swcrc can be found.
I'll assume your question is only about jest and not about the webpack setup for swc.
I've never used swc myself in jest so this is just a shot in the dark, but I found a package for jest called #swc-node/jest which allows you to use a transformer like:
module.exports = {
transform: {
'^.+\\.(t|j)sx?$': ['#swc-node/jest'],
},
}
Which should allow you to transpile all [jt]sx? imports.
There's also a different one called #swc/jest which seems to do the same thing.
I'd start with trying those.
Your issue is that jest isn't able to parse your code, for example if you were using typescript you'd need something like ts-jest in order to parse your TS for you, I think in this case you need a swc/jest transpiler which should first compile your code and output it to memory, then funnel it to jest to run it.
The alternative is that you could compile the tests before hand using swc, then run jest on the compiled files as a separate step. At least with TS you can do that, first compile everything using tsc and then run jest on the .js output. I'm sure swc should work the same.
As to why the #swc-node/register package you're using isn't working, I have no idea.
When I use optional chain and set Electron 12.0.2 in .browserslistrc, the project will failed to build.
in ./src/views/reader/reader.ts
Module parse failed: Unexpected token (15:29)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/ts-loader/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| if (imgElement.length > 0) {
| console.log('imgElement', imgElement);
> return imgElement[0]?.classList;
| }
| return null;
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/reader/reader-container.vue?vue&type=script&lang=ts&setup=true 4:0-43 121:12-27
# ./src/views/reader/reader-container.vue?vue&type=script&lang=ts&setup=true
# ./src/views/reader/reader-container.vue
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/reader.vue?vue&type=script&lang=ts
# ./src/reader.vue?vue&type=script&lang=ts
# ./src/reader.vue
# ./src/reader-main.ts
# multi (webpack)-dev-server/client?http://192.168.1.3:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/reader-main.ts
In reader.ts
export function getImgFromPoint(container: HTMLDivElement, selector: string) {
const imgElement = document
.elementsFromPoint(container.getBoundingClientRect().width / 2, 100)
.filter((e) => {
return e.matches(selector);
});
if (imgElement.length > 0) {
console.log('imgElement', imgElement);
return imgElement[0]?.classList;
}
return null;
}
When I set .browserslistrc to
> 1%
last 2 versions
not dead
the project can built successfully.
I think some loader can't resolve ?. syntax, so the building failed.
And when I set .browserslistrc to
> 1%
last 2 versions
not dead
I think babel will transpile the ?., so the loader can handle it. While I set .browserslistrc to to Electron 12.0.2, babel don't transpile it while Electron 12.0.2 support it.
And before build the project when you changed the .browserslistrc, you need del node_modules/.cache folder. Otherwise the change won't take effect.
Anyone know which loader caused the parse fail and how can I solve it?
Thanks!
The problem is not caused by any loader but directly by Webpack 4.x (the issue - Webpack is using old version of Acorn library (to parse the code) which does not work with optional chaining or null coalescing syntax)
If you are not using Vue CLI you can upgrade to Webpack 5 to solve this. If you are using Vue CLI, upgrading to Webpack 5 "by hand" is not an option. You must upgrade to Vue CLI 5 (which is currently in the beta)
If you want (or have) to stay on Webpack 4, you have two options:
Configure Babel to use #babel/plugin-proposal-optional-chaining and #babel/plugin-proposal-nullish-coalescing-operator plugins
// babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
plugins: [
'#babel/plugin-proposal-nullish-coalescing-operator',
'#babel/plugin-proposal-optional-chaining'
],
}
If you are using TypeScript, do not upgrade to version 3.8 or set compiler option target to es2019
I have 'npm install -S tabletop' into my vuepress site and I am struggling to either import or require the tabletop module.
I know next to nothing about webpack nor the internals of vuepress (this is nmy first vuepress project)
Building a static website for a friend but planning to use a google spreadsheet to hold current work opportunities and suck the line entries using tabletop.js (https://www.npmjs.com/package/tabletop) into a JSON then filter and loop through to present in a vuepress loop
However, I've failed at step one of this process ... using tabletop.js inside a vuepress container's tag
Hi all, I'm new to vuepress and webpack and I'm getting a headache over trying to use a javascript library. I'm familiar with javascript and writing my own scripts and also loading javascript libraries in raw html websites. But I've really got stuck trying to figure out where the relative path for a require statement should be
I've tried both npm installing and also inserting into the config.js HEAD (which appears in devtools) options 1 and/or 2 below
install tabletop.js with
npm install -S tabletop
2.add link to config.js' HEAD
module.exports = {
title: 'Starlife Company Services Ltd',
description: 'Cleaning and Security services across the South East',
head: [
['link', { type: 'text/javscript', src: 'https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js' }]
]
}
add a require in tags in component
<template>
....
</template>
<script>
export default {
name: "cleaning-cta"
};
console.log("script started from inside joblist.vue")
import as sheet from 'tabletop'
var recruitment = "https://docs.google.com/spreadsheets/d/1M7glQxJb31B3lQyKNqum5o-0eDAgKI54VBPUAJomIFM/pubhtml" ;
console.log(recruitment);
var tabletop = sheet.init({
key: '1M7glQxJb31B3lQyKNqum5o-0eDAgKI54VBPUAJomIFM',
callback: showInfo
})
</script>
I've tried various combinations of
import 'tabletop'
Tabletop.init(...)
-or-
require('tabletop')
import as from 'tabletop'
I've tried various relative pathways
'tabletop'
'./tabletop'
'../../tabletop'
'../../node_modules/tabletop'
without no avail all with either a require or an import or a HEAD inserted sript tag
without a path I get
vue.runtime.esm.js?4bfb:619 [Vue warn]: Failed to resolve async component: function () {
return Promise.all(/*! import() */[__webpack_require__.e(20), __webpack_require__.e(29)]).then(__webpack_require__.bind(null, /*! ./src/.vuepress/components/joblist */ "./src/.vuepress/components/joblist.vue"));
}
Reason: ReferenceError: Tabletop is not defined
with a relative path I get ...
client?cae4:159 ./src/.vuepress/components/joblist.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--3-0!/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib??ref--3-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib??vue-loader-options!./src/.vuepress/components/joblist.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../../tabletop' in '/home/pi/GitHub/starlife-website/src/.vuepress/components'
errors # client?cae4:159
(anonymous) # socket.js?e29c:47
sock.onmessage # SockJSClient.js?0a33:58
EventTarget.dispatchEvent # sockjs.js?fb87:170
(anonymous) # sockjs.js?fb87:887
SockJS._transportMessage # sockjs.js?fb87:885
EventEmitter.emit # sockjs.js?fb87:86
WebSocketTransport.ws.onmessage # sockjs.js?fb87:2961
vue.runtime.esm.js?4bfb:619 [Vue warn]: Failed to resolve async component: function () {
return __webpack_require__.e(/*! import() */ 20).then(__webpack_require__.bind(null, /*! ./src/.vuepress/components/joblist */ "./src/.vuepress/components/joblist.vue"));
}
Reason: Error: Cannot find module '../../tabletop'
Every variation of the path both for import or require seems to end up in the same two errors:
Error: Cannot find module '../../tabletop'
-or-
Reason: ReferenceError: Tabletop is not defined
After several hours I'm lost ... spent hours googling for examples none of which are based within vuepress and none have been helpful
With Insuffiicent knowledge to poke through webpack, and running out of alternatives my project has hit a wall and I cannot see my way around.
Any ideas are much appreciated
Current state of project can be found at
https://github.com/kingdom-values-clients/starlife-website/tree/345d55eed65f110626a9e4d3bcadae1efcca0cbc
See above and also in thes commit
https://github.com/kingdom-values-clients/starlife-website/tree/345d55eed65f110626a9e4d3bcadae1efcca0cbc
Error: Cannot find module '../../tabletop'
-or-
Reason: ReferenceError: Tabletop is not defined
I know I'm probably doing something dumb here but cannot figure it out nor can I find any help for anything remotely like this inside a vuepress component.