I am attempting to load a .js file into my markdown file in React using gatsby-plugin-mdx. However, I am running into an import error, which shows as a WARN as follows:
warn ./.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/7cd2ab5f9fe4b662b5bb93052ee9e
f2c.js
Attempted import error: 'Test2' is not exported from '../../../../src/pages/test2'
(imported as 'Test2').
Looking at the cache, it seems benign enough:
import { Test2 } from "../../../../src/pages/test2";
import * as React from 'react';
export default {
Test2,
React
};
The contents of the import seem arbitrary, and the warn will be the same (and contents will not load). I used a simple export default function returning a h1 tag to experiment, for example.
My .md file is fairly straight forward:
# Testing 1
top
import { Test2 } from "../pages/test2"
<Test2 />
bottom
I suspected this is a configuration issue, but I'm yet to resolve it in my gatsby-config.js, which is currently as the following:
module.exports = {
siteMetadata: {
title: 'Marco Sousa Blog',
author: 'Marco Sousa'
},
plugins: [
'gatsby-plugin-dark-mode',
'gatsby-plugin-react-helmet',
'gatsby-plugin-sass',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-source-filesystem',
options: {
name:'src',
path: `${__dirname}/src/`
}
},
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
'gatsby-remark-relative-images',
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 750,
linkImagesToOriginal: false
}
},
{
resolve: `gatsby-remark-katex`,
options: {
// Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
//strict: `ignore`,
}
},
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: true,
noInlineHighlight: false,
languageExtensions: [
{
language: "superscript",
extend: "javascript",
definition: {
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],
prompt: {
user: "root",
host: "localhost",
global: false,
},
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
}
},
]
}
},
{
resolve: "gatsby-plugin-page-creator",
options: {
path: `${__dirname}/src/`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`],
},
},
],
}
I think my querying/slug usage is fine, as the site and posts are operable prior (and after) to attempting to implement mdx. Observing the gatsby-plugin-mdx docs, I attempted to use gatsbyRemarkPlugins to encapsulate the other plugins, but this did not change the warn. What, more exactly, do you think could be the problem with my mdx usage?
This issue was in the way I imported. I simply changed
import { Test2 } from "../pages/test2"
<Test2 />
to
import Test2 from "../pages/test2"
<Test2 />
Test2.js was not a named export/import as I had imagined. Rather
Test2.js used the default export, which does not need to be wrapped with curly braces.
Related
We have a react app that we were building using webpack, but are trying to migrate into Vite the significantly lower build times.
We've successfully refactored our build code to use vite, where builds and dev server run successfully when we run them locally. However, whenever we deploy to heroku, and the build script starts... the build simply stalls on the while transforming the js files.
Log Below:
...
2023-02-05T19:26:35.377Z vite:resolve 2.32ms css_variables/colors.css -> /tmp/build_38ed17db/src/css/css_variables/colors.css
2023-02-05T19:26:35.861Z vite:resolve 0.33ms css_variables/durations.css -> /tmp/build_38ed17db/src/css/css_variables/durations.css
2023-02-05T19:26:36.059Z vite:resolve 0.12ms css_variables/sizes.css -> /tmp/build_38ed17db/src/css/css_variables/sizes.css
2023-02-05T19:26:36.090Z vite:resolve 0.12ms css_variables/indices.css -> /tmp/build_38ed17db/src/css/css_variables/indices.css
2023-02-05T19:26:36.175Z vite:resolve 0.22ms index.css -> /tmp/build_38ed17db/src/css/index.css
2023-02-05T19:26:36.210Z vite:resolve 0.12ms nav_bar.css -> /tmp/build_38ed17db/src/css/nav_bar.css
2023-02-05T19:26:36.340Z vite:resolve 0.19ms other_pages/auth_page.css -> /tmp/build_38ed17db/src/css/other_pages/auth_page.css
2023-02-05T19:26:36.460Z vite:resolve 0.37ms other_pages/page.css -> /tmp/build_38ed17db/src/css/other_pages/page.css
2023-02-05T19:26:36.724Z vite:resolve 0.19ms other_pages/simple_pages.css -> /tmp/build_38ed17db/src/css/other_pages/simple_pages.css
2023-02-05T19:26:37.009Z vite:resolve 0.18ms superadmin/superadmin_page.css -> /tmp/build_38ed17db/src/css/superadmin/superadmin_page.css
2023-02-05T19:26:37.133Z vite:resolve 0.16ms other_pages/pricing_calculator_page.css -> /tmp/build_38ed17db/src/css/other_pages/pricing_calculator_page.css
2023-02-05T19:26:37.954Z vite:resolve 0.20ms other_pages/project_portfolio_page.css -> /tmp/build_38ed17db/src/css/other_pages/project_portfolio_page.css
I've been scratching my head for days, because there are no log outputs for an error having occurred, and I've run out of options for searching online for solutions to this problem.
Our config looks as follows:
import { defineConfig, loadEnv } from "vite";
import * as path from "path";
import { fileURLToPath } from "url";
import react from "#vitejs/plugin-react";
import rollupNodePolyFill from "rollup-plugin-polyfill-node";
import { NodeModulesPolyfillPlugin } from "#esbuild-plugins/node-modules-polyfill";
import svgr from "vite-plugin-svgr";
import inject from "#rollup/plugin-inject";
import progress from 'vite-plugin-progress'
import dns from "dns";
dns.setDefaultResultOrder("verbatim");
export default defineConfig(({ command, mode, ssrBuild }) => {
const env = loadEnv(mode, process.cwd(), "");
return {
base: "/",
root: "./",
resolve: {
alias: {
"react-native": "react-native-web",
"src": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./src"),
util: "rollup-plugin-node-polyfills/polyfills/util",
sys: "util",
events: "rollup-plugin-node-polyfills/polyfills/events",
stream: "rollup-plugin-node-polyfills/polyfills/stream",
path: "rollup-plugin-node-polyfills/polyfills/path",
querystring: "rollup-plugin-node-polyfills/polyfills/qs",
punycode: "rollup-plugin-node-polyfills/polyfills/punycode",
url: "rollup-plugin-node-polyfills/polyfills/url",
string_decoder:
"rollup-plugin-node-polyfills/polyfills/string-decoder",
http: "rollup-plugin-node-polyfills/polyfills/http",
https: "rollup-plugin-node-polyfills/polyfills/http",
os: "rollup-plugin-node-polyfills/polyfills/os",
assert: "rollup-plugin-node-polyfills/polyfills/assert",
constants: "rollup-plugin-node-polyfills/polyfills/constants",
_stream_duplex:
"rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
_stream_passthrough:
"rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
_stream_readable:
"rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
_stream_writable:
"rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
_stream_transform:
"rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
timers: "rollup-plugin-node-polyfills/polyfills/timers",
console: "rollup-plugin-node-polyfills/polyfills/console",
vm: "rollup-plugin-node-polyfills/polyfills/vm",
zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
tty: "rollup-plugin-node-polyfills/polyfills/tty",
domain: "rollup-plugin-node-polyfills/polyfills/domain",
buffer: "rollup-plugin-node-polyfills/polyfills/buffer-es6",
process: "rollup-plugin-node-polyfills/polyfills/process-es6",
"node-modules-polyfills:buffer": "buffer",
"node-modules-polyfills:string_decoder": "string_decoder"
}
},
server: {
port: 3001
},
// Env vars aren't exposed by default so we need to opt-in by prefix
envPrefix: [
"REACT_APP_",
"NODE_ENV"
],
define: {
__APP_ENV__: env.APP_ENV,
"process.env": env,
VITE: true
},
build: {
target: "modules",
minify: "esbuild",
manifest: true,
sourcemap: true,
outDir: "build",
rollupOptions: {
cache: true,
plugins: [
inject({
exclude: ["node_modules/library/**/*.js"]
}),
rollupNodePolyFill()
],
output: {
manualChunks(id) {
if (id.includes('recharts')) {
return 'recharts';
}
}
}
},
commonjsOptions: {
transformMixedEsModules: true,
esmExternals: "auto"
}
},
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis"
},
plugins: [
NodeModulesPolyfillPlugin()
]
}
},
plugins: [
react(),
svgr(),
progress()
]
};
});
Our heroku server sets YARN_PRODUCTION to true, and uses the YARN_CACHE but we've attempted removing those to no avail.
I've followed just about every guide to fix this problem I can find online, and it still just wont work.
I'm under the impression that perhaps the build is running out of memory (our application is quite large), but usually when that is the case, heroku would notify us in the logs.
If there is any significant details that would be helpful in attempting to help, please let me know, and I'll do my best to provide them. But I am seriously confused at what is going wrong.
some tips :
this line is only relevant for dev mode server , try to comment it
dns.setDefaultResultOrder("verbatim");
I think the process try to apply polyfills to existing polyfills....
I tried to add an external javascript file to nuxt.config.ts.
but nuxt didn't load the file.
nuxt.config.ts file:
export default defineNuxtConfig({
css: [
'bootstrap/dist/css/bootstrap.min.css'
],
script: [
{
src: 'script.js',
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
}
})
The correct way to load scripts in Nuxt 3 is by using the head object in app (See more in Official Docs here)
In your case, This should work.
export default defineNuxtConfig({
app: {
head: {
link: [
{ rel: 'stylesheet', href: 'bootstrap/dist/css/bootstrap.min.css' },
],
script: [{ src: 'script.js' }],
},
},
vite: {
define: { 'process.env.DEBUG': false },
},
});
head contain meta, script, link, style and no-script tags, so if you want to write any of them you'll use the same approach
I tried many ways and this is the only way it's worked.
export default defineNuxtConfig({
css: [
'#/css/bootstrap.rtl.min.css'
],
app: {
head: {
script: [
{
src: '_nuxt/js/bootstrap.bundle.min.js',
}
],
}
}
})
I'm using this github cli plugin to scaffold mv3 chrome extensions using vue and vite.
The template is created correctly and I'm able to work on it, but I have a problem when I want to use the chrome.window.create or chrome.tabs.create, when I run the build command the final folder will not contain the popup.html file, it will be bundled only if is used inside the manifest.js file that is used to generate the build
This is the manifest configuration
import { defineManifest } from '#crxjs/vite-plugin'
export default defineManifest({
name: '',
description: '',
version: '1.0.0',
manifest_version: 3,
icons: {
16: 'img/logo-16.png',
32: 'img/logo-34.png',
48: 'img/logo-48.png',
128: 'img/logo-128.png',
},
//If I uncomment popup will be included but tabs and popup windows will not work
action: {
// default_popup: 'popup.html',
// default_icon: 'img/logo-48.png',
},
//options_page: 'options.html',
background: {
service_worker: 'src/background/index.js',
type: 'module',
},
content_scripts: [
{
matches: ['http://*/*', 'https://*/*'],
js: ['src/content/index.js'],
},
],
host_permissions: [
'https://*.herokuapp.com/*'
],
web_accessible_resources: [
{
resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
matches: [],
},
],
permissions: [
'tabs',
'gcm',
'identity',
],
oauth2: {
"client_id": "...cd.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
]
}
})
And this is the vite code I have
import { defineConfig } from 'vite'
import { crx } from '#crxjs/vite-plugin'
import vue from '#vitejs/plugin-vue'
import manifest from './src/manifest.js'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const production = mode === 'production'
return {
build: {
emptyOutDir: true,
outDir: 'build',
rollupOptions: {
output: {
chunkFileNames: 'assets/chunk-[hash].js',
},
},
},
plugins: [crx({ manifest }), vue()],
}
})
How I can fix the build to include the popup.html page or any custom html page I can need?
I'm using Rollup to build a UMD version of my module.
This rollup.config.js successfully builds my module, without including #tensorflow/tfjs:
import path from 'path';
import commonjs from '#rollup/plugin-commonjs';
import { nodeResolve } from '#rollup/plugin-node-resolve';
export default {
input: "dist/tmp/index.js",
output: {
file: "dist/umd/index.js",
format: 'umd',
name: 'Foo',
globals: {
'#tensorflow/tfjs': 'tf',
}
},
context: 'window',
external: ['#tensorflow/tfjs'],
}
However, I rely on a second module (tensor-as-base64) that I do want to include in the bundle. I cannot figure out how to include that specific module.
From a lot of googling it seems like I need to use #rollup/plugin-commonjs and #rollup/plugin-node-resolve, but I can't find any examples for how to scope the includes to a specific folder under node_modules. I've tried something like this:
import commonjs from '#rollup/plugin-commonjs';
import { nodeResolve } from '#rollup/plugin-node-resolve';
export default {
input: "dist/tmp/index.js",
output: {
file: "dist/umd/index.js",
format: 'umd',
name: 'Foo',
globals: {
'#tensorflow/tfjs': 'tf',
}
},
context: 'window',
external: ['#tensorflow/tfjs'],
plugins: [
nodeResolve({
}),
commonjs({
include: [/tensor-as-base64/],
namedExports: {
'tensor-as-base64': ['tensorAsBase64'],
},
}),
]
};
This seems to just hang with no output.
Any tips on how to include a single specific module from the node_modules folder (and ignore everything else in that folder)?
Update 1
I tried this config:
export default {
input: "dist/tmp/index.js",
output: {
file: "dist/umd/index.js",
format: 'umd',
name: 'Foo',
globals: {
'#tensorflow/tfjs': 'tf',
}
},
context: 'window',
external: ['#tensorflow/tfjs'],
plugins: [
nodeResolve({
resolveOnly: [
/^(?!.*(#tensorflow\/tfjs))/,
],
}),
],
})
This produces the following output:
dist/tmp/index.js → dist/umd/index.js...
[!] Error: 'default' is not exported by ../../node_modules/tensor-as-base64/dist/index.js, imported by dist/tmp/upscale.js
Which is accurate in that tensor-as-base64 does not export default.
After including the commonjs plugin, it gets into an infinite loop. I think that's where I'm missing some bit of configuration.
I should add that this is a monorepo, so maybe there's an issue with node_modules being at the root of the folder?
I am not really strong with setting up my custom npm packages, therefore I am asking for help. I am trying to test my custom ESLint plugin rules on another project. For this, I have set up two projects in one root directory and linked them, using the file linking option (find the image of the file structure attached):
"eslint-plugin-winniepukki-guidelines": "file:../guide"
.eslintrc configuration file on the project, where I want to use my custom ESLint plugin:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb-base',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'winniepukki-guidelines',
],
rules: {
'winniepukki-guidelines/use-license': 'error',
'winniepukki-guidelines/avoid-names': 'error',
},
};
Unfortunately, the rules do not apply properly with the following error:
Definition for rule 'winniepukki-guidelines/avoid-names' was not found.eslint(winniepukki-guidelines/avoid-names). This is how the avoid-names.js file looks like:
module.exports = {
meta: {
messages: {
avoidName: "Avoid using variables named '{{ name }}'"
}
},
create(context) {
return {
Identifier(node) {
if (node.name === "foo") {
context.report({
node,
messageId: "avoidName",
data: {
name: "foo",
}
});
}
}
};
}
};
And this is the ESLint package's index.js file itself, illustrating how do I export them:
const path = require('path');
const requireIndex = require('requireindex');
module.exports.rules = requireIndex(path.join(__dirname, 'rules'));
Project overview: https://i.stack.imgur.com/hLKcH.png