Skip to content

ESM Support

Sebastien LE MOUILLOUR edited this page Jul 1, 2024 · 6 revisions

You will retrieve there all things you will maybe have to manage in your projects with ESM:

@use issue

Can't find stylesheet to import.
  ╷
2 │ @use '~@talend/design-tokens/lib/tokens';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

To resolve that, remove the ~

Storybook "homemage" configuration

in sass loader, there could be some need to add includePaths to include node_modules as the prefix is not there anymore in the sass import. Be sure that the path is well targeting the node_modules folder

{
  loader: require.resolve("sass-loader"),
  options: {
    // Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
    implementation: require.resolve("sass"),
    sassOptions: {
      sourceMap: true,
+     includePaths: [require("path").resolve(__dirname, "../node_modules")],
    },
  },
},

Custom webpack config

In case you don't use the common config for webpack, you will maybe need to add fallback config for things like path or url

resolve: {
	...
	fallback: {
		url: false,
		path: false,
	},
},