I using Nuxt.js # v2.13.2 and I try to config my project working with ie 11
The doc say:
The default targets of #nuxt/babel-preset-app are ie: '9' in the client build, and node: 'current' in the server build.
Here is my nuxt.config.js
build: {
babel: {
presets({ isServer }, [ preset, options ]) {
// change options directly
options.buildTarget = 'client'
options.targets = {
ie: 11,
}
}
}
}
And my pages
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
But it not working in ie 11
[object Error]{description: "Syntax error", message: "Syntax error", name: "SyntaxError", number: -2146827286, stack: "SyntaxError...", Symbol(amplify_default)_i.icdaor5bqh3: undefined, Symbol(extensions)_k.icdaor5bqh3: undefined, Symbol(observable)_j.icdaor5bqh3: undefined, Symbol(react.element)_h.icdaor5bqh3: undefined
How to do that thank.
As far as I can tell, the issue is that the Symbol polyfill does not and cannot support cross-realm native functionality.
More detail here: https://github.com/zloirock/core-js/issues/834
Related
I am currently unable to use third-party plugins in my Nuxt 3 application. Here's what my code/setup looks like:
In my package.json I have the following dependency: "#braze/web-sdk": "^4.6.1"
In my plugins/ directory, I have a braze.client.js file
Within the braze.client.js file, I have the following:
import * as braze from '#braze/web-sdk'
export default defineNuxtPlugin(() => {
braze.initialize(apiKey, {
baseUrl: apiEndpoint
})
return {
provide: {
openSession
}
}
})
Within my nuxt.config.ts, I added the following (since my project has Vite, I followed Braze's documentation here: https://www.braze.com/docs/developer_guide/platform_integration_guides/web/initial_sdk_setup/#vite):
optimizeDeps: {
exclude: ['#braze/web-sdk']
}
Then within my <script> tags within the page/component, I have the following:
const { $openSession } = useNuxtApp()
onMounted(() => {
$openSession()
})
All the steps above continue to create a "500 navigator is not defined" error and I'm stumped with how I can resolve it.
I tried using beforeOnMount, not using as lifecycle hook, as well as placing $openSession() within an if statement:
if (process.client) {
}
Yet no matter what, it still renders the 500 error.
Describe the bug
react-monaco-editor cannot be used together with worker-loader.
To Reproduce
create a new typescript app with CRA, run a min react-monaco-editor demo. (everything is fine)
install worker loader and add config in config-overrides.js, and start app.
example repo to reproduce
ERROR in ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at getDefaultChunkFilename (/Users//Documents/test/my-project/node_modules/worker-loader/dist/utils.js:23:24)
at Object.pitch (/Users//Documents/test/my-project/node_modules/worker-loader/dist/index.js:61:108)
Child vs/editor/editor compiled with 1 error
assets by status 1.27 KiB [cached] 1 asset
./node_modules/monaco-editor/esm/vs/language/json/json.worker.js 39 bytes [not cacheable] [built] [1 error]
ERROR in ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at getDefaultChunkFilename (/Users//Documents/test/my-project/node_modules/worker-loader/dist/utils.js:23:24)
at Object.pitch (/Users//Documents/test/my-project/node_modules/worker-loader/dist/index.js:61:108)
Child vs/language/json/jsonWorker compiled with 1 error
details of my config-overrides.js
const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function override(config, env) {
config.plugins.push(
new MonacoWebpackPlugin({
languages: ['json']
})
);
config.stats = {
children: true
}
config.module.rules.push(
{
test: /\.worker\.js$/,
use: {
loader: 'worker-loader',
options: {
inline: 'fallback',
filename: '[contenthash].worker.js',
},
},
},
{
test: /\.worker\.ts$/,
use: [
{
loader: 'worker-loader',
options: {
inline: 'fallback',
filename: '[contenthash].worker.js',
},
},
'ts-loader',
],
},
);
return config;
};
Environment (please complete the following information):
OS: MacOS
Browser Chrome
Bundler webpack5 (CRA)
[ ] I will try to send a pull request to fix this issue.
I have solved it. It seems not to be a problem of react-monaco-editor or monaco-editor.
The problem is between worker-loader and monaco-editor-webpack-plugin.
I temporarily update my worker-loader config to match workers in my src folder only and solve this problem.
It could be better to figure out how to configure it in monaco-editor-webpack-plugin because it build files contains worker from monaco-editor without hashcode.
For reasons that are out of my control, I need to resolve a module that is outside of my react-native project directory. So, consider the following directory structure:
react-native-project/
├─ App.jsx
├─ babel.config.js
external-directory/
├─ Foo.jsx
I would like any import Foo from 'Foo' inside of react-native-project to resolve ../external-directory/Foo.jsx. My first attempt at this was to use babel-plugin-module-loader with the following configuration:
plugins: [
[
'module-resolver',
{
alias: {
Foo: '/absolute/path/to/external-directory/Foo',
},
},
],
],
This doesn't work, with metro emitting the following error:
error: Error: Unable to resolve module /absolute/path/to/external-directory/Foo from /absolute/path/to/react-native-project/App.jsx:
None of these files exist:
* ../external-directory/Foo(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* ../external-directory/Foo/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
This error message is wrong: ../external-directory/Foo.jsx does exist. I've verified this numerous times. I've also set up a standalone babel package to test an identical import scenario, and babel correctly resolves the external module.
The other approach I took was to add a custom resolveRequest function in my metro.config.js:
const defaultResolver = require('metro-resolver').resolve;
module.exports = {
...
resolver: {
resolveRequest: (context, moduleName, platform, realModuleName) => {
if (moduleName === 'Foo') {
return {
filePath: '/absolute/path/to/external-directory/Foo.jsx',
type: 'sourceFile',
};
} else {
return defaultResolver(
{
...context,
resolveRequest: null,
},
moduleName,
platform,
realModuleName,
);
}
},
},
};
This also doesn't work, emitting the following error message:
error: ReferenceError: SHA-1 for file /absolute/path/to/external-directory/Foo.jsx (/absolute/path/to/external-directory/Foo.jsx) is not computed.
Potential causes:
1) You have symlinks in your project - watchman does not follow symlinks.
2) Check `blockList` in your metro.config.js and make sure it isn't excluding the file path.
The potential causes do not apply in this scenario: There are no symlinks nor does the blockList contain the external directory (I explicitly configured blockList: null to verify).
Is there any way to accomplish what I'm trying to do? Or does metro (either by design or incidentally) prevent this?
You can use a metro bundler build in option - extraNodeModules and watchFolders.
const path = require('path');
module.exports = {
resolver: {
...,
extraNodeModules: {
app: path.resolve(__dirname + '/../app')
}
},
...,
watchFolders: [
path.resolve(__dirname + '/../app')
]
};
I'm a bit clueless with integrating the #google/model-viewer into a nuxtjs project:
This is my model-viewer.js in the plugins folder
import Vue from "vue";
import modelViewer from "#google/model-viewer";
Vue.use(modelViewer);
The part in my nuxt.config.js
plugins: [
"#/plugins/hooks",
{ src: "#/plugins/gsap", mode: "client" },
{ src: "#/plugins/model-viewer", mode: "client" },
],
... and the component so far
<template>
<model-viewer
:src="src"
bounds="tight"
enable-pan
camera-controls
environment-image="neutral"
poster="poster.webp"
shadow-intensity="1"
autoplay
></model-viewer>
</template>
<script lang="ts">
export default {
ssr: false,
name: "Viewer3d",
props: {
src: {
type: String,
required: true,
},
},
setup() {
return {};
},
};
</script>
When called I get the Error
Failed to compile with 1 errors friendly-errors 13:36:36
ERROR in
./node_modules/#google/model-viewer/dist/model-viewer.min.js
friendly-errors 13:36:36
Module parse failed: Unexpected token (999:5963)
friendly-errors 13:36: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 | * limitations
under the License. | */
and a
window is not defined
from my browser.
What am I missing? I am not familiar with loaders in nuxt and wasn't able to find something helping me with my problem.
I had the same issue but with NuxtJS. Try to use an older version of the model-viewer, everything until version 1.10.1 is working for me.
I have Vue cli 3.0.0-rc.10. We use TypeScript3 in class style. I want use IE11. I see error in IE 11, about not support arrow function in sl-vue-tree plugin.
I tried
// babel.config.js
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
"presets": [
[
"#vue/app",
{
"useBuiltIns": "entry",
}
]
]
}
and import ‘#babel/polyfill’; in enter file - not work
Only work
// vue.config.js
module.exports = {
transpileDependencies:[
‘sl-vue-tree’,
]
};
Now in production mode all is Ok, but i got error in development mode "export ‘default’ (imported as ‘SlVueTree’) was not found in ‘sl-vue-tree’
How solve problem?