We Keep Coding

Module parse failed: Unexpected token ? Optional chaining not recognised in threejs svgloader.js [duplicate]

Project setup:
Vuejs 3
Webpack 4
Babel
TS
We created the project using vue-cli and add the dependency to the library.
We then imported a project (Vue Currency Input v2.0.0) that uses optional chaining. But we get the following error while executing the serve script:
error in ./node_modules/vue-currency-input/dist/index.esm.js
Module parse failed: Unexpected token (265:36)
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
| getMinValue() {
| let min = this.toFloat(-Number.MAX_SAFE_INTEGER);
> if (this.options.valueRange?.min !== undefined) {
| min = Math.max(this.options.valueRange?.min, this.toFloat(-Number.MAX_SAFE_INTEGER));
| }
I read that Webpack 4 doesn't support optional chaining by default. So, we added the Babel plugin for optional chaining. This is our babel.config.js file:
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
plugins: ["#babel/plugin-proposal-optional-chaining"],
};
(But, if I am correct, this plugin is now enable by default in the babel-preset. So this modification might be useless ^^)
One thing that I don't understand is that we can use optional chaining in the .vue files.
I created a SandBox with all the files: SandBox
How could I solve this error?

I was able to overcome this issue using #babel/plugin-proposal-optional-chaining, but for me the only way I could get Webpack to use the Babel plugin was to shove the babel-loader configuration through the Webpack options in vue.config.js. Here is a minimal vue.config.js:
const path = require('path');
module.exports = {
chainWebpack: config => {
config.module
.rule('supportChaining')
.test(/\.js$/)
.include
.add(path.resolve('node_modules/PROBLEM_MODULE'))
.end()
.use('babel-loader')
.loader('babel-loader')
.tap(options => ({ ...options,
plugins : ['#babel/plugin-proposal-optional-chaining']
}))
.end()
}
};
NB replace "PROBLEM_MODULE" in the above with the module where you have the problem.
Surprisingly I did not need to install #babel/plugin-proposal-optional-chaining with NPM. I did a go/no-go test with an app scaffolded with #vue/cli 4.5.13, in my case without typescript. I imported the NPM module that has been causing my grief (#vime/vue-next 5.0.31 BTW), ran the serve script and got the Unexpected token error on a line containing optional chaining. I then plunked the above vue.config.js into the project root and ran the serve script again, this time with no errors.
My point is it appears this problem can be addressed without polluting one's development environment very much.
The Vue forums are in denial about this problem, claiming Vue 3 supports optional chaining. Apparently not, however, in node modules. A post in this thread by atflick on 2/26/2021 was a big help.

Had same issue with Vue 2 without typescript.
To fix this you need to force babel preset to include optional chaining rule:
presets: [
[
'#vue/cli-plugin-babel/preset',
{
include: ['#babel/plugin-proposal-optional-chaining'],
},
],
],
Can also be achieved by setting old browser target in browserslist config.
Most importantly, you need to add your failing module to transpileDependencies in vue.config.js:
module.exports = {
...
transpileDependencies: ['vue-currency-input],
}
This is required, because babel by default will exclude all node_modules from transpilation (mentioned in vue cli docs), thus no configured plugins will be applied.

I had a similar problem. I'm using nuxt but my .babelrc file looks like the below, and got it working for me.
{
"presets": [
["#babel/preset-env"]
],
"plugins":[
["#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
],
"env": {
"test": {
"plugins": [
["transform-regenerator", {
"regenerator": true
}],
"#babel/plugin-transform-runtime"
],
"presets": [
["#babel/preset-env", {
"useBuiltIns": false
}]
]
}
}
}

I managed to fix the solution by adding these lines to package.json:
...
"scripts": {
"preinstall": "npx npm-force-resolutions",
...
},
"resolutions": {
"acorn": "8.0.1"
},
...

text-to-svg package not working - ReactJS

I am using text-to-svg package to convert my text to svg, but it returns error:
Module not found: Error: Can't resolve 'path' in 'E:{path to
project}\node_modules\text-to-svg\build\src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path":
false }
Screenshot:
I tried to fix this by creating webpack.config.js and added this code to that file:
module.exports = {
resolve: {
fallback: {
"path": require.resolve("path-browserify")
}
}
}
and i installed path-browserify but it doesn't fixed anything. What should i do now?
I have tried a lot, but i am stuck. Please help....

can not build react project due to webpack

I am bumping in a annoying issue. I am trying to buişd a project using web3 upon other things and I get some compilation error I can not sort out :
Compiled with problems: X
ERROR in ../node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in 'C:\CAS\node_modules\cipher-base'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
I tried lots of things but can not manage to get it work out.
Can someone help?

I managed to get it o work
adding at the root of the website : webpack.config
containing :
module.exports = {
resolve: {
fallback: {
assert: require.resolve('assert'),
crypto: require.resolve('crypto-browserify'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
stream: require.resolve('stream-browserify'),
},
},
// Webpack 5 is enabled by default
// You can still use webpack 4 while upgrading to the latest version of Next.js by adding the "webpack5: false" flag
webpack5: false,
};

when i add a package i recieve webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case

i use react with laravel. i install a date picker package with nmp and after install that when i start npm run watch i recieved this error
Module not found: Error: Can't resolve 'stream' in '/home/poldark/Desktop/chapagha/chapagha/src/chapagha-web/node_modules/jalali-react-datepicker/dist'
webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
and
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
can any one tell me what to do?

// webpack.config.js
module.exports = {
...
resolve: {
// 如果确认需要node polyfill，设置resolve.fallback安装对应的依赖
fallback: {
crypto: require.resolve('crypto-browserify'),
path: require.resolve('path-browserify'),
url: require.resolve('url'),
buffer: require.resolve('buffer/'),
util: require.resolve('util/'),
stream: require.resolve('stream-browserify/'),
vm: require.resolve('vm-browserify')
},
// 如果确认不需要node polyfill，设置resolve.alias设置为false
alias: {
crypto: false
}
}
}

Error: Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm

Given the following code:
import { graphql } from 'graphql'
import graphqlTools from 'graphql-tools'
const { makeExecutableSchema } = graphqlTools
const typeDefs = `
type Query {
as: [A]
}
type A {
x: Int,
y: Int
}
`
const schema = makeExecutableSchema ({ typeDefs })
graphql(schema, '{ as { x, y } }').then(console.log)
I get this error:
Error: Cannot use GraphQLSchema "[object GraphQLSchema]" from another
module or realm.
Ensure that there is only one instance of "graphql" in the
node_modules directory. If different versions of "graphql" are the
dependencies of other relied on modules, use "resolutions" to ensure
only one version is installed.
What's going on?

This situation may also occur when the version of the graphql module you have installed is different from the version installed and used by graphql-tools.
I have found you can correct this by either:
Changing the version of graphql in your project's package.json file to match exactly what graphql-tools depends on in its package.json file.
Removing graphql as a dependency and just installing graphql-tools. Then you will automatically receive whatever graphql module version that graphql-tools installs (as long as you don't depend on any other packages that install another, conflicting version).
In other cases you might have the correct version, but it may be installed multiple times. You can use npm ls graphql to see all the installed versions. Try running npm dedupe to remove duplicate installations.

This happens because graphql-tools module imports graphql from its CommonJS module, while my code does it from the ES module. That is, each object in my own module comes from the ES module, while graph-tool's not.
Solution
It's as easy as importing anything from graphql importing the CommonJS module, and both objects from graphql and graphql-tools will be able to talk each together:
import graphql_ from 'graphql/index.js'
import graphqlTools from 'graphql-tools'
const { graphql } = graphql_
const { makeExecutableSchema } = graphqlTools
const typeDefs = `
type Query {
as: [A]
}
type A {
x: Int,
y: Int
}
`
const schema = makeExecutableSchema ({ typeDefs })
graphql(schema, '{ as { x, y } }').then(console.log)

My problem was both .js an .mjs graphql files are resolved due to wrong webpack configuration.
Root cause:
From TypeMapper.mjs file in graphql-compose, import statement does not have file extension and that was a failure on webpack bundle. In order to solve it, I required to add fullySpecified:false into the webpack config.
{
test: /\.m?js/,
include: /node_modules/,
type: "javascript/auto",
resolve: {
fullySpecified: false
}
}
And I also modified resolve statement like
resolve: {
extensions: [".ts", ".js", ".mjs"] // that was the actual problem
}
Since fullySpecified config has been set to false, webpack was trying to resolve files without extension respect to the order of resolve.extentions config. Due to the wrong order in that config, graphql files with .js ext were been resolving although all other files were using .mjs one.
Solution:
Simply re-order resolve.extensions config as
resolve: {
extensions: [".ts", ".mjs", ".js"]
}

In my case, I added the webpack-node-externals library to the webpack configuration, and I was able to run my bundled application.
externalsPresets: { node: true },
externals: [nodeExternals()],
I am using webpack version 5.*
Also I am using yarn package manager, so I added resolutions in my package.json
"resolutions": {
"graphql": "^15.3.0"
}

For me, it was solved by downgrading some packages like this:
"apollo": "^2.33.4", "graphql": "^15.5.0",
I also deleted node_modules and package-lock.json and installed packages with yarn instead of npm.

I got this exact error when my .npmrc did not have proper entries such as username and password. We are using jFrog to normalise package installation. .npmrc should be located at root with proper entries.
ex: .npmrc file which works
#<company-name>:registry=<registry-url>
//<artifactory-name>:_password=${PASSWORD}
//<artifactory-name>:username=${JFROG_USERNAME}
//<artifactory-name>:email=${YOUR_EMAIL}
//<artifactory-name>:always-auth=true