Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: add extensions for relative imports #752

Merged
merged 1 commit into from
Jun 21, 2023
Merged

fix: add extensions for relative imports #752

merged 1 commit into from
Jun 21, 2023

Conversation

dylanarmstrong
Copy link
Contributor

This adds .js extensions to relative imports to help development in pure ESM browser environments.

Documentation on this can be found here.

With this line:

relative import paths need full extensions (e.g we have to write import "./foo.js" instead of import "./foo")

@lavrton
Copy link
Member

lavrton commented Jun 16, 2023

Hmm. Can you point to any specific environment where it helps? Like a demo where it is not working without that change and works after?

@dylanarmstrong
Copy link
Contributor Author

Sure, it will fail when trying to load in the browser as a module.

Note: it'll still fail when trying to load with this PR because of other packages, i.e. React.

package.json

{
  "type": "module",
  "scripts": {
    "build": "tsc"
  },
  "dependencies": {
    "react-konva": "^18.2.9"
  },
  "devDependencies": {
    "typescript": "^5.1.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "lib": [
      "dom",
      "es2022"
    ],
    "module": "node16",
    "target": "es2022",
    "outDir": "./public/lib"
  },
  "include": ["./src"]
}

public/index.html

<!doctype html>
<html>
  <head>
    <script type='importmap'>
      {
        "imports": {
          "@types/prop-types/": "/node_modules/@types/prop-types/",
          "@types/react/": "/node_modules/@types/react/",
          "@types/react-reconciler/": "/node_modules/@types/react-reconciler/",
          "@types/scheduler/": "/node_modules/@types/scheduler/",
          "csstype/": "/node_modules/csstype/",
          "its-fine/": "/node_modules/its-fine/",
          "its-fine": "/node_modules/its-fine/dist/index.cjs",
          "js-tokens/": "/node_modules/js-tokens/",
          "konva/": "/node_modules/konva/",
          "konva": "/node_modules/konva/lib/index-node.js",
          "loose-envify/": "/node_modules/loose-envify/",
          "loose-envify": "/node_modules/loose-envify/index.js",
          "react/": "/node_modules/react/",
          "react": "/node_modules/react/index.js",
          "react-dom/": "/node_modules/react-dom/",
          "react-dom": "/node_modules/react-dom/index.js",
          "react-konva/": "/node_modules/react-konva/",
          "react-konva": "/node_modules/react-konva/es/ReactKonva.js",
          "react-reconciler/": "/node_modules/react-reconciler/",
          "react-reconciler": "/node_modules/react-reconciler/index.js",
          "scheduler/": "/node_modules/scheduler/",
          "scheduler": "/node_modules/scheduler/index.js"
        },
        "scopes": {}
      }
    </script>
    <script type='module' src='./lib/main.js'></script>
  </head>
</html>

src/main.ts

import { Stage } from 'react-konva';
console.log('konv', Stage);

Then run:

npm install
npm run build
cd public/
ln -sv ../node_modules .
cd ..
npx serve public

Go to localhost:3000

And you should see:

404 on http://localhost:3000/node_modules/react-konva/es/ReactKonvaCore

With this PR, you will still see 404s, but not on this project anymore.

@lavrton lavrton merged commit 312566a into konvajs:master Jun 21, 2023
@dylanarmstrong dylanarmstrong deleted the fix/extensions-esm branch June 21, 2023 03:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@dylanarmstrong @lavrton