SQLGate
commented
2 years ago I have this problem and all of the computers I have have the same error. (Desktop(Windows 11), MacBook Pro and My Windows Notebook)
Closed SQLGate closed 2 years ago
SQLGate
commented
2 years ago I have this problem and all of the computers I have have the same error. (Desktop(Windows 11), MacBook Pro and My Windows Notebook)
wewoor
commented
2 years ago I have this problem and all of the computers I have have the same error. (Desktop(Windows 11), MacBook Pro and My Windows Notebook)
Ok, let's confirm this problem
SQLGate
commented
2 years ago What's problem ?
wewoor
commented
2 years ago What's problem ?
In progress~
wewoor
commented
2 years ago What's problem?
Hi, @SQLGate, I have resolved the problem.
There need to add a module rule in Webpack configs, because the react-dnd indicates thetype: 'module' in package.json,
Refer to:
https://webpack.js.org/api/module-methods/
https://webpack.js.org/configuration/module/#resolvefullyspecified
So, I customized the config in the config-overrides:
module.exports = function override(config, env) {
//do stuff with the webpack config...
config.module.rules.push({
test: /\.m?jsx?$/,
resolve: {
fullySpecified: false
},
});
return config;
}How to customize the create-react-app project could use the react-app-rewired
SQLGate
commented
2 years ago Thanks @wewoor I worked according to your opinion, and it worked However, it was very difficult for me as I lack skills in React. Will your opinion be the basis for creating a molecule-demo? Or is there a better way?
I'll attach the code I wrote first.
> npx create-react-app molecule-demo --template typescript
> cd molecule-demo
> npm install @dtinsight/molecule> npm install react-app-rewired --save-devmodule.exports = function override(config, env) {
//do stuff with the webpack config...
config.module.rules.push({
test: /\.m?jsx?$/,
resolve: {
fullySpecified: false
},
});
return config;
}+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src /* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}import React from 'react';
import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
import '@dtinsight/molecule/esm/style/mo.css';
function App() {
return (
<MoleculeProvider extensions={[]}>
<Workbench />
</MoleculeProvider>
);
}
export default App;> yarn start
jackqqxu
commented
2 years ago Thanks @wewoor I worked according to your opinion, and it worked However, it was very difficult for me as I lack skills in React. Will your opinion be the basis for creating a molecule-demo? Or is there a better way?
I'll attach the code I wrote first.
Create molecule-demo
> npx create-react-app molecule-demo --template typescript > cd molecule-demo > npm install @dtinsight/moleculeInstall react-app-rewired
> npm install react-app-rewired --save-devCreate a config-overrides.js file in the root directory
module.exports = function override(config, env) { //do stuff with the webpack config... config.module.rules.push({ test: /\.m?jsx?$/, resolve: { fullySpecified: false }, }); return config; }+-- your-project | +-- config-overrides.js | +-- node_modules | +-- package.json | +-- public | +-- README.md | +-- src'Flip' the existing calls to react-scripts in npm scripts for start, build and test in package.json
/* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", - "test": "react-scripts test", + "test": "react-app-rewired test", "eject": "react-scripts eject" }Create the src/App.js file and replace the file contents with the following.
import React from 'react'; import { MoleculeProvider, Workbench } from '@dtinsight/molecule'; import '@dtinsight/molecule/esm/style/mo.css'; function App() { return ( <MoleculeProvider extensions={[]}> <Workbench /> </MoleculeProvider> ); } export default App;Start command
> yarn start
it works!
Describe the bug The molecule-demo demo is not working correctly.
To Reproduce Steps to reproduce the behavior:
Screenshots
Desktop (please complete the following information):
Development Environment
Additional context Below is the error code.
Hope this helps you solve the problem.