help wanted: import file from node_module package， but snowpack assume it is a package

[huruji]

I import a package file from node_module，but snowpack assume it is a package, so install failed：

my config:

module.exports = {
  devOptions: {
    port: 4000,
  },
  plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-babel', '@snowpack/plugin-dotenv'],
  mount: {
    public: '/',
    src: '/_dist_',
  },
  alias: {
    "@pages": "./src/pages",
    "@components": "./src/components",
    "@common": "./src/common",
    "@stores": "./src/stores",
    "@api": "./src/api",
    "@consts": "./src/consts",
    "@sdk": "./src/sdk"
  }
}

please help me!! thx.

[ralphtheninja]

How are you importing it?

[huruji]

just

import Button from '@ies/semi-ui-react/button/Button';

@ralphtheninja

[ralphtheninja]

Is this a private package/module? It would be nice if you could share a minimal example that shows the problem.

[FredKSchott]

Yea, I'm not sure I follow either. Does "@ies/semi-ui-react" not exist with your other packages in node_modules?

[huruji]

I found why, because the file is a jsx file，esinstall package can't handle this type correctly. In my project, jsx file the imported without extname, and can't be as a package, also can't be handled by require.resolve, so snowpack will throw this error, so how to handle this situation， our project has so many，it's not possible to add extname，I need your help， please!!! @FredKSchott

[FredKSchott]

That's correct, for packages we don't do any sort of automatic resolution like Modal -> Modal.jsx other than what the package.json tells us. You should add the .jsx file extension.

If you feel comfortable, you can also look into adding an "exports" entry, to map "/Modal" to "/Modal.jsx": https://nodejs.org/api/esm.html#esm_package_entry_points. This is still fairly new from the Node.js team, but Snowpack supports it.

Finally, you'll need to tell Snowpack (esinstall, really) how to import JSX. Packages are installed via Rollup, seperate from your Snowpack build, so you'll need to add a React plugin. Something like this:

// snowpack.config.js
module.exports = {
  installOptions: {
    rollup: {
      // you can pass custom plugins to build JSX files to JS
      plugins: [require('@rollup/plugin-babel')({ ... })],

Although, it may be easier to just build your JSX to JS as a part of the package itself, so that consumers don't need to worry about JSX. If you were building this package for a public audience, I would definitely push you to do that.