conflict with webpack externals react #1889

510mt · 2021-11-30T03:02:52Z

510mt
Nov 30, 2021

conflict with webpack externals react😭

it can't work correctly when i use externals react,like below:
part of craco.config.js

externals: {
          three: 'THREE',
          react: 'React',
          'react-dom': 'ReactDOM'
        }

index.html

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>Test</title>
    <script crossorigin src="/react.production.min.js"></script>
    <script crossorigin src="/react-dom.production.min.js"></script>
    <script crossorigin src="/three.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Result: it render nothing,and freeze this page,and can't reload

😭😭😭😭

when i remove the scipt and externals, it work well, like below !!!

i have no idea to fix this one, i try to pull the code and config preconstruct globals ,and push to my private npm;
even change to webpack, build umd and so on...🤡

CodyJasonBennett · 2021-11-30T03:07:41Z

CodyJasonBennett
Nov 30, 2021
Maintainer

react-three-fiber is shipped as a module, and has peer deps as modules (see without build tools docs). I'd see Josh's previous comment about UMD support.

What is your motivation behind using external scripts? Are you not able to use modules? Maybe we can resolve your use case in a discussion.

0 replies

510mt · 2021-11-30T03:42:00Z

510mt
Nov 30, 2021
Author

react-three-fiber is shipped as a module, and has peer deps as modules (see without build tools docs). I'd see Josh's previous comment about UMD support.

What is your motivation behind using external scripts? Are you not able to use modules? Maybe we can resolve your use case in a discussion.

well, i have a scene that u can import dynamic component to an screen editor (why using external scripts), like below:

The component that coded by three.js and build to a bundle.js can work well after import into this editor,
But i want to import react-three/fiber to create a simple 3d scene editor🙈

actually i can use native three.js to finish it ,but i find react-three/fiber is more convenient and powerful

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

conflict with webpack externals react #1889

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

conflict with webpack externals react #1889

Uh oh!

Uh oh!

510mt Nov 30, 2021