I wrote a component in reactJS that renders a tree
I am unable to import it directly to browser and keep getting this error:
Uncaught Error: Module name "TreeComponent" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
at makeError (require.js:5)
at Object.o [as require] (require.js:5)
at requirejs (require.js:5)
at reactJS_returnReactJs.action:2192
babel preset is react-app:
"babel": {
"presets": [
"react-app"
]
},
entry point for build is index.js:
export {default} from './components/TreeComponent';
Can you help me to find out what is wrong in my build steps?
If you export react component in your TreeComponent.js this way
export default TreeComponent({
});
Or something like this
exports.default = TreeComponent;
You need to import it this way
import { TreeComponent } from './components/TreeComponent';
Or you can do this way too
import TreeComponent from './components/TreeComponent/TreeComponent';
Related
I hope someone can tell me where I am going wrong in trying to get usable libraries
I have created a NPM project using create-react-app --format typescript, I then created the following structure:
|->tsconfig.json
|->package.json
|->config
|->tsconfig.base.json
|->tsconfig.cjs.json
|->tsconfig.esm.json
|->src
|->index.tsx
|->components
|->index.ts
|->ExampleComponent
|->ExampleComponent.component.tsx
|->ExampleComponent.stories.tsx
|->ExampleComponent.types.ts
|->index.ts
In this example the Example Component looks something like the following:
|->tscon
import React, { FC } from 'react';
// Contact specific icons
import Container from 'react-bootstrap/Container';
// Footer Properties
import { ExampleProperties } from './ExampleComponent.types';
export const ExampleComponent: FC<ExampleProperties> = ({ text }) => {
return (<Container fluid>{text}</Container>);
};
for the tsconfig files in 'config' I've lifted the Synk recommendation directly, while tsconfig.json is fairly simple like so:
{
"extends": "./configs/tsconfig.esm.json",
}
If I start the application via 'npm start' I get a website and the component correctly appears, but the issue is trying to import into another project.
I using npm link and npm link #Example/ExampleProject to bring the project in to another website and the index.tsx of that project looks like so:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ExampleComponent } from '#Example/ExampleProject';
const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element') const root = createRoot(container);
root.render(
<React.StrictMode>
<main role={"main"} >
<ExampleComponent/>
</main>
</React.StrictMode> );
But when it starts I am getting this error:
Module not found: Error: Can't resolve './ExampleComponent/index' in '/home/user/IdeaProjects/ExampleProject/dist/esm' Did you mean 'index.mjs'? BREAKING CHANGE: The request './Common/index' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.
The only thing I can think is tsc generates src/components/index.ts as a /src/component/index.js (which I rename). But ExampleComponent has .js and .mjs files within its directory
There seems to be no corresponding folder or file named 'react'. Maybe using npm start gives the JSX file access to 'react', I don't know where 'react' is located though.
Basically, where is 'react' located?
I looked in the node_modules folder, and there is a subfolder named react. However, there is no file named React in there.
import React from 'react';
In the above line of code, I can not figure out where React is. I tried looking in the 'react' folder that is a subfolder of node_modules
React is exported from the React package.
import React from 'react';
In the above line, you are importing a default export. You can give it any name you want instead of React.
In the React source code you can find this default export defined in package.json.
The word React is where you assigned whatever the 'react' library exported as default.
if you open the node_modules/react/package.json file and check it you can find following line of code,
...
"main": "index.js",
"exports": {
".": {
"react-server": "./react.shared-subset.js",
"default": "./index.js" // <----------------------------- see here
},
"./package.json": "./package.json",
"./jsx-runtime": "./jsx-runtime.js",
"./jsx-dev-runtime": "./jsx-dev-runtime.js"
},
The package.json says the entry point is index.js so if you check the content of index.js, (exports["."]["default"] says use index.js for default import ( ie import DefaultReact from 'react' ))
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
This is not just a react specific thing, you can learn how to create custom packages from here.
I would like to use a Web-Assembly Module that I wrote in Rust in my Astro App. I am using TypeScript and the following astro.config.mjs:
import { defineConfig } from "astro/config";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";
import tailwind from "#astrojs/tailwind";
import react from "#astrojs/react";
export default defineConfig({
integrations: [wasm(), tailwind(), react()],
vite: {
plugins: [wasm(), topLevelAwait()],
},
});
The code using the wasm in a file functions.ts looks like this:
import { greet } from "dices";
export function hello(): void {
let g: string = greet();
console.log(g);
}
Type checking all works fine, however when running with npm run dev I encounter the following error:
error WebAssembly.instantiate(): BufferSource argument is empty
CompileError: WebAssembly.instantiate(): BufferSource argument is empty
at Module.__vite_ssr_exports__.default (/__vite-plugin-wasm-helper:31:14)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async eval (/pkg/dices_bg.wasm:6:28)
at async instantiateModule (file:///D:/code/web-dev/dice-calculator-frontend/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:53445:9)
When I setup a new Vite project via npm create vite#latest with React and TypeScript with the same functions.ts file and the following vite.config.ts everything works and I can use the functions from the wasm module without issues.
vite.config.ts:
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";
export default defineConfig({
plugins: [react(), wasm(), topLevelAwait()],
});
Has anyone got WASM working with Astro? I am a bit confused because Astro uses Vite under the hood, but what works fine with just Vite, does not seem to work with Astro.
I found that using
<DistributionCalculatorWrapper client:only="react" />
instead of
<DistributionCalculatorWrapper client:load />
is a workaround that will work for me. I guess there is some issue that Node.js cannot use the wasm serverside, but if we explicitly have the components using wasm functions being only client side rendered with client:only="react" it works.
The error comes out when I added Contact Form by using 'EmailJS'.
I can see the dependencies on Package.json look fine, but it says not defined.
"react": "^17.0.2",
"react-dom": "^17.0.2",
I changed the importing format as following as advised,
import React from 'react';
import ReactDOM from 'react-dom';
also re-installed it, But, still the error is not fixed.
ReferenceError: React is not defined
at Object.children (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\index.js:3460:62)
at BaseAccordion.render (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\index.js:3595:23)
at processChild (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18)
at resolve (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at renderToString (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at Object.renderPage (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\render.js:54:854)
at Function.getInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\_document.js:791:19)
at Function.getInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\_document.js:1373:85)
at loadGetInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\lib\utils.js:5:101)
at renderToHTML (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\render.js:54:1145)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\next-server.js:112:97
at async C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\next-server.js:105:142
anyone can advise what I am missing here?
first check if you are using babel and react 17. Add "runtime" : "automatic" to the config.
{
"presets": ["#babel/preset-env", ["#babel/preset-react", {
"runtime": "automatic"
}]]
}
if not, check the files that actually change when you add contact form. Mostly in config files like babel or webpack.
if using webpack and got a config like this in webpack.config.json
externals: {
'react': 'React'
},
remove it
If all else fails, remember react is not being bundled instead might be calling window.react so just add
import React from 'react';
import ReactDOM from 'react-dom';
window.React = React
I'm trying to setup a jest snapshot test with redux-persist in my react-native project. I don't think its an es2015 imports problem as my test code looks something like this:
import React from "react"
import "react-native"
// Note: test renderer must be required after react-native.
import renderer from "react-test-renderer"
import App from "../App"
it("renders correctly", () => {
const app = renderer.create(<App />).toJSON()
expect(app).toMatchSnapshot()
})
I ran this exact same test before I added redux-persist and it was working.
Error thrown by jest:
● Test suite failed to run
/Users/a_050313/Documents/dev/scheduling/node_modules/redux-persist/es/integration/react.js:9
import React, { PureComponent } from 'react'; // eslint-disable-line import/no-unresolved
^^^^^^
SyntaxError: Unexpected token import
1 | import React, { Component } from "react"
2 | import { Provider } from "react-redux"
> 3 | import { PersistGate } from "redux-persist/es/integration/react"
4 |
5 | import "./__debug__/ReactotronConfig" // Run Reactron Tools config
6 |
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
at Object.<anonymous> (App.js:3:13)
at Object.<anonymous> (__tests__/App.js:7:10)`
The error was related to es2015 imports but It is on jest end. By default jest only transpiles project code and react-native code. So the added libs which aren't already transpilled would error out by jest.
(as mentioned on jest docs)
By default the jest-react-native preset only processes the project's own source files and react-native
Solution provided on the official docs seems a bit hacky but thats the only thing I found:
Add following in your package.json jest: { } section or in jest.config.js file.
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|redux-persist)/)"
]
where the bit redux-persist is the thing that solves the problem. If you have problem with other libs just add their names. My list looks something like this:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|redux-persist|react-native-linear-gradient|react-native-vector-icons|react-navigation)/)"
]
}
Additional Note just for redux-persist if you import PersistGate from
import { PersistGate } from "redux-persist/lib/integration/react"
instead
import { PersistGate } from "redux-persist/es/integration/react"
(reference)
you'll get the compiled version but for other libs still you got to this the above mentioned solution.